Documentation
How to use FlowIcon: the two editor modes, diagram-as-code, the icon library, collaboration, sharing, and export.
Basics
Getting started
Sign in with an email address: no password, and no separate sign-up — the account is created on your first sign-in, along with one personal workspace.
Documents are created from the workspace page. Each document has one mode and does not switch: choose it when you create it.
Two document modes
Free canvas for thinking: boxes, arrows, handwriting, images. Right while the shape is still unclear.
Diagram-as-code for what must stay tidy every time it changes: you write the source, the layout is computed. The source panel opens beside the canvas on wide screens, and follows the screen width on phones.
Writing
Writing a diagram
One node per line. Attributes go in square brackets: `icon` picks an icon from the available packs, `label` changes the visible text without changing the name used as its identifier.
Relations use `>` for an arrow, `-` for a plain line, and `<>` for both directions. A relation label goes after the colon, and is kept exactly as you typed it.
`group` puts nodes inside one box. Nested groups are deliberately not allowed: two levels of boxes make the layout hard to read, and there is almost always a clearer way.
Tables with columns produce an ERD. The `pk` and `fk` markers determine the shape of the relationship, and `?` marks a nullable column.
The animation below shows what a sentence cannot: each source line is a cause, and what appears in the drawing is its effect. Press Replay to watch it once more.
direction right Browser [icon: generic/browser]Api [icon: generic/api, label: "API Server"] group Inti [label: "Layanan inti"] { Db [icon: stack/postgresql] Cache [icon: stack/redis]} Browser > Api: HTTPApi > Db: queryApi - Cache
users {
id uuid pk
email text
deleted_at timestamp?
}
memberships {
id uuid pk
user_id uuid fk
role text
}
users.id < memberships.user_idDiagrams from a sentence
Write what you want drawn, and the source is composed for you — then you edit it. The result is always shown as source, never written straight into the document.
There is a daily quota per account. The box does not appear at all if this installation has no AI provider configured.
In and out
Importing
From Mermaid: paste a `flowchart` or `graph`, and the result is shown first along with everything that could not be carried — flattened node shapes, dropped styling, nested subgraphs.
From project files: drop a `docker-compose.yml`, a `package.json`, or source files. Services with their `depends_on`, workspace packages with their dependencies, and relationships between directories from `import` statements. Files are read in your browser and never uploaded.
Canvas documents can take `.excalidraw` files.
Exporting
SVG and PNG for images, PDF for printing or dropping into a document. All three are built in the browser — document contents are not sent anywhere to be rendered.
Diagram-as-code documents can also be exported as Mermaid, as a `.mmd` file or copied to paste into a README. Anything with no Mermaid equivalent — icons, colours — is named, not silently dropped.
Working together
Sharing and embedding
Share links have three scopes: view, comment, and edit. A link can carry a password and an expiry, and can be revoked at any time.
View links can be embedded in other pages with an embed snippet. Edit links cannot: an embed publishes its token into the page source, and an edit token grants the right to change the document.
Comments
Comments are threaded and attach to an element. Mentioning another member with `@` sends an email notification; notifications can be muted per thread.
Link guests can comment too, when the link was published for it.
Administration
Workspaces, roles, and recovery
Four roles: owner, admin, editor, viewer. Invitations are sent by email and can be revoked before they are accepted.
Deleted documents go to Trash and can be restored; projects can be archived without losing their contents. The audit log records who did what in that workspace.
Settings → General holds the workspace name and logo, ownership transfer, leaving the workspace, and deleting it. A deleted workspace disappears immediately for every member and is released permanently after 30 days; the last owner must transfer ownership before they can leave.
Signing in with your own identity provider
Workspaces on the Team plan can route their members through their own OIDC provider — Entra ID, Okta, Google Workspace, Keycloak, and the like.
The domain must be proven yours first, with one DNS record. Until it is proven, no address is routed to your provider. One workspace uses one domain.
Your account and data
Settings → Account holds your display name, photo, language, and account deletion. The name may be left empty — you then appear as the first part of your email address — while the address itself cannot be changed: it is how you sign in, not how you appear.
Deleting an account requires a confirmation code sent to your email address — retyping an address already printed on screen proves nothing. Once the code is accepted, deletion takes effect immediately: every session ends, you disappear from every workspace's member list, and your address can no longer sign in. The row is released permanently after 30 days, along with the comments you wrote. Workspaces containing only you are deleted too; those with other members must be handed over or deleted first.
Docs
Tools, shortcuts, and limits
Everything listed below applies to the editor running today. More general questions are answered on the FAQ page.
Canvas tools press the number
- Select1
- Rectangle2
- Ellipse3
- Diamond4
- Arrow5
- Line6
- Pen7
- Text8
After a shape is finished, the tool returns to Select on its own. Images can be pasted straight from the clipboard or dropped onto the canvas as files.
Shortcuts
- ⌘/CtrlZ
- Undo
- ⇧⌘/CtrlZ
- Redo
- Del⌫
- Delete the selection
- Esc
- Clear the selection
- ⇧click
- Add or remove one element
- ⇧drag handle
- Resize with a fixed ratio
- ⇧rotate
- Snap the angle to fixed steps
- double-click
- Write text at that point
- wheel
- Pan the canvas
- ⌘/Ctrlwheel
- Zoom in and out
- middle-drag
- Pan without switching tools
Style and limits
- Saving
- Automatic, 0.8 seconds after the last change
- Elements per document
- 5.000
- Size of one document
- 8 MB
- Zoom
- 2% to 3,000%
- Workspace roles
- owner, admin, editor, viewer
- Free plan
- 3 documents
The style panel offers six stroke colors and six background colors, three widths, three fonts, and 10–100% opacity. Fill and sloppiness apply to canvas mode only, because that is the only place lines are drawn like hand strokes.