Getting Started with Hummi
Hummi.app is a webapp for creating diagrams. This guide shows how to sketch out an idea, style diagrams, and make diagrams from data.
Creating a new diagram
In the left hand bar, click the blue (+Diagram) button to create a new diagram.
Adding text boxes
In the top right of the diagram is an input outlined in blue. Click on the input, type in a name, and press enter. A new text box appears in the diagram.
The newly added text box will initially be selected. If you type in a name while there is a current selection and press enter, the next text box created is created with a link from the previous selection.
Selecting and customizing
Click on a text box in the diagram to select it. Buttons appear for modifying the shape, color, and outline.
You can deselect by pressing the ESC key, or clicking in an empty part of the diagram.
Adding links
To connect two text boxes:
- Select a text box
- Move the mouse cursor over another text box. A blue pointer indicates that the text boxes can be connected.
- Click the mouse button on the target text box to create the link.
Removing text boxes and links
While you have a text box or a link selected, you can use the keyboard to delete them with the delete key or the backspace key.
Alternatively you can click on the (Remove) button next to the selected item.
Multi-select
Hold down the shift key and click an element to add it to the current selections.
Click on an empty part of the diagram and drag to select everything in an area. Holding shift while doing this will add to any current selection.
To remove a single item from the current selection, hold down shift and click the item.
Grouping
When multiple text boxes are selected, a group button will be available to form a group around the selection.
Moving things around
Drag text boxes around by holding the mouse button down, moving the cursor, and releasing at the target position. If a text box is already selected, it can only be dragged from the border, as clicking the text box will interact with the text instead.
When multiple text boxes are selected, they will move together when you drag any one of them. Dragging groups will move everything in the group.
Layout
Hummi automatically position things using a constrained layout. There is a layout options menu in the first position of the toolbar in the top right corner of the diagram. You can choose a different layout strategy such as layered (good for trees) or fixed (if you want to manually position everything).
To re-layout using the current layout settings, double-click on an empty part of the diagram (this only has an effect in constrained layout).
Often the best layout will require some manual dragging of nodes to good locations combined with constrained layout. Move text boxes around, and double-click on an empty space to constrain to the new arrangement.
Save as an image
The toolbar in the top right of the diagram has a download icon. When you move the mouse over it or click on it, there is a dropdown list of formats to select. PNG is a widely used image format which you can use to share on social media, attach to emails, or embed in other documents.
Printing
The toolbar in the top right of the diagram has a print icon. If you are printing in black and white, select the greyscale theme from the toolbar before printing. You also have the option to print to PDF if you’d prefer to save your diagram in that format.
Table view
The data in your diagram can be viewed as a table. In the top right corner toolbar of the diagram is a button to switch view.
In table view, all the text from the diagram is organized in a table. The table view is a fast method for data entry and modification. The table is sorted to help locate the items you wish to update.
You can create links directly in the table view. If you have several links you wish to create it will be faster than clicking to connect them.