Everything you need to create, organize, and share diagrams in flowdraft.app.
Getting Started
flowdraft.app helps you turn ideas into clear diagrams without leaving the drawing surface.
Create your first diagram
1
Choose a shape. Select Rectangle, Diamond, Ellipse, Note, or a system node from the left toolbar.
2
Draw on the canvas. Drag to place the shape. Most drawing tools return to Select after one use.
3
Add a name. Double-click the shape, type its label, and press Enter.
4
Connect your ideas. Use Arrow or Line, then drag from one shape to another.
Common shortcuts
VSelect
RRectangle
AArrow
TText
Drawing Tools
Pick a tool from the left rail or use its keyboard shortcut. Shape tools are one-shot; Select and Hand stay active.
Basic shapes
Rectangle, Diamond, and Ellipse create general-purpose diagram nodes. Note creates a longer annotation, while Text places free-standing text.
System nodes
Use Service, Database, Queue, Cache, and External API for architecture diagrams. Open them from the System nodes menu.
Marks and references
Mark creates numbered callouts. Reference creates a numbered note linked to an existing node.
Lines and drawing
Arrow creates directional relationships, Line creates neutral relationships, Free draw adds ink, and Eraser removes elements you touch.
Images
Use Insert image to choose a local image, or paste an image from the system clipboard.
Hand tool
Drag with Hand to pan without moving elements. On touch screens, pinch with two fingers to zoom. You can also hold Space temporarily while another tool is active.
Selecting and Editing
Select elements
Click an element to select it, or drag on empty canvas for a marquee selection. Use Cmd/Ctrl+A for all visible elements. The command palette can select matching types, colors, or connected elements.
Edit and arrange
Drag selected elements to move them; alignment and spacing guides appear automatically.
Drag selection handles to resize. Use Arrow keys for 1px nudges or Shift+Arrow for 10px.
Double-click, press Enter, or press F2 to edit a selected element's name or text.
Use the Inspector to change shape, content, stroke, fill, width, dash, arrowheads, and name styling.
Group related elements, reorder layers, duplicate selections, or copy and paste their styles.
Clean up a diagram
Beautify arranges a selected diagram and refreshes its style. With nothing selected, it updates scene styling without moving nodes. More alignment, distribution, and layout actions are available in the command palette.
Connectors and Relationships
Draw an Arrow or Line from one node to another. Bound connectors follow their nodes when the diagram changes. Two nodes can have multiple independent Arrows with distinct ports, routes, labels, styles, and directions.
Fast relationship gestures
Option/Alt + drag: connect two existing nodes with an auto-routed arrow.
Cmd + drag a node: duplicate the node and create a live routed link to the copy.
Ctrl + drag a node: duplicate the node without a link.
Edit a connector
Select a connector to change arrowheads, stroke, width, or dash in the Inspector. Drag an endpoint to attach it to another side or node. Drag bend points to customize a routed path. Beautify or the command palette can reset routing.
Projects and Canvases
A project groups related canvases. Each canvas keeps its own elements, selection context, pan position, and zoom.
Use the Project and Canvas selectors in the top-left workspace bar to switch context.
Use the adjacent plus buttons to create a project or canvas.
Use the pencil buttons to rename the current project or canvas.
Search for a canvas by name in the command palette for quick switching.
AI Thinking 2.0
Open AI Workspace from the sparkle button. Use the left mode rail to move between Chat, Clarify, Perspectives, Review, Decision, and Memory while keeping one consistent context and action layout. Model-powered actions require the local Node bridge, while semantic editing, Decision Lab, Thinking Memory, checkpoints, and export remain available in static mode.
Give the canvas meaning
Select a shape and use the Inspector to classify it as a question, goal, fact, assumption, opinion, evidence, constraint, risk, option, criterion, conclusion, action, or unknown. Add confidence, source details, availability, and review conditions. Select a connector to classify its semantic relationship.
Choose a thinking mode
Clarify (Thinking Partner): answer one high-value question at a time and edit the problem tree.
Perspectives: compare independent frameworks without forcing disagreements into one answer.
Review: inspect a selection or the whole canvas through a separate logic-review layer.
Decision: confirm criteria, hard constraints, evidence-backed scores, scenarios, sensitivity, and the final record.
Memory: filter events, compare or restore checkpoints, branch earlier thinking, and assess changed evidence.
Control context and changes
Choose Manage in the compact Context scope bar before a request to inspect the exact objects and sources being sent. Uncheck anything sensitive or irrelevant. AI changes appear as suggestion cards; accept, edit, reject, or defer them, then apply selected changes as one undoable operation. Canceling or failing a request preserves your input and current preview.
Chat and generate a diagram
In Chat, type a question for a concise response based on canvas context. MCP servers can provide extra reference material when configured.
Describe the system or flow you want.
Choose Generate diagram to create a ghost preview.
Review, regenerate, or beautify the preview.
Choose Apply to insert it, or Discard to leave the canvas unchanged.
Edit a selection with AI
Select part of a diagram before opening AI Chat. Use Polish for focused improvements or Refactor for structural changes. Boundary connections are preserved when the preview is applied.
Import, Export, and Storage
Images
Insert local images with the image button or paste images from the system clipboard. Large images increase the size of the saved workspace.
Export
Choose Export to download the full scene as PNG. To export only selected elements, open the command palette and run Export selection as PNG. Choose Data to export the canvas and thinking structure as JSON or confirmed decision records as Markdown. Review findings are excluded unless you explicitly include them.
Where work is saved
Node bridge: projects and canvases are saved to the local SQLite workspace and backed up before overwrites.
Static or file mode: work is saved in this browser's localStorage.
Keyboard Shortcuts
Tools
V
Select
H
Hand
R
Rectangle
D
Diamond
O
Ellipse
M
Mark
A
Arrow
L
Line
P
Free draw
T
Text
E
Eraser
Edit
Cmd/Ctrl K
Command palette
Cmd/Ctrl A
Select visible elements
Cmd/Ctrl C
Copy selection
Cmd/Ctrl V
Paste elements or image
Cmd/Ctrl D
Duplicate selection
Cmd/Ctrl Z
Undo
Cmd/Ctrl Shift Z
Redo
Delete
Delete selection
Enter / F2
Edit content
Esc
Cancel or clear selection
Arrange and view
Cmd/Ctrl G
Group
Cmd/Ctrl Shift G
Ungroup
Cmd/Ctrl ]
Bring forward
Cmd/Ctrl [
Send backward
Arrow keys
Nudge 1px
Shift + Arrow
Nudge 10px
Cmd/Ctrl +
Zoom in
Cmd/Ctrl -
Zoom out
Cmd/Ctrl 0
Reset zoom
Space
Temporary hand tool
Troubleshooting
AI request buttons are unavailable
Start the local Node bridge with pnpm start, then open http://127.0.0.1:4173/app.html. In standalone static mode, model requests are disabled but local semantic editing, decisions, memory, checkpoints, drawing, saving, and export continue to work.
My work did not appear in another browser
Static mode uses browser-local storage, which is isolated by browser profile and origin. Use the same browser and URL, or run the Node bridge for a shared local SQLite workspace.
The browser says storage is full
Large inserted images can exceed browser storage limits. Export what you need, then remove or reduce large images. Running the Node bridge avoids the browser-local workspace limit.
A connector route looks wrong
Select the connector and use Beautify or the relevant reset action in the command palette. You can also drag endpoints and bend points manually.
I cannot find an action
Press Cmd/Ctrl+K and search the command palette. It contains drawing tools, selection actions, layout commands, exports, and canvas switching.
Inspector
Thinking
Classify this element to make its meaning available to AI Thinking.
Thinking relation
Export thinking data
Take the semantic structure and decision rationale with you.
Review findings are excluded by default because they may be provisional or hidden.
AI Workspace
Current canvas · 0 objects
Chat with your canvas
Explore ideas, generate diagrams, and refine selected work.
Included contextUncheck sensitive items before sending.
Diagram preview
What outcome are you trying to improve?
Why this matters: the target changes which causes and evidence are relevant.
PerspectivesCompare independent ways of seeing the same problem.
Logic ReviewFind specific weaknesses without changing the canvas.
Decision LabMake options, evidence, weights, and uncertainty explicit.
Thinking MemoryUnderstand what changed, why, and what needs review.