Hummi.app is a webapp for creating diagrams. This guide shows how to sketch out an idea, style diagrams, and make diagrams from data.
In the left hand bar, click the blue (+Diagram) button to create a new diagram.
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.
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.
To connect two text boxes:
While you have a text box or a link selected, you can use the keyboard to delete them with the
delete key or the
Alternatively you can click on the (Remove) button next to the selected item.
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.
When multiple text boxes are selected, a group button will be available to form a group around the selection.
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.
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.
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.
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.
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.