Use the Visual Editor
The Visual Editor lets you build and edit flowcharts by clicking — shapes, connections, colors, labels — without writing syntax. The code updates automatically as you work.
It’s designed for two kinds of situations: when you’re starting a diagram and want to sketch structure before committing to syntax, and when you want to make visual changes without editing the code directly.
When to use the Visual Editor vs. the text editor
Both are always available and stay in sync — changes in either are reflected in the other. The choice is about what’s faster for the task at hand.
| Use the Visual Editor when… | Use the text editor when… |
|---|---|
| Sketching initial structure | Making precise syntax edits |
| Changing node shapes or colors | Adjusting labels or connection logic |
| Connecting nodes quickly by dragging | Working with subgraphs or complex flows |
| You prefer clicking to typing | You want full control over the output |
Add shapes
Click the shapes icon in the center toolbar to browse and add shapes. Three categories are available:
- Basic shapes — rectangles, circles, diamonds, and other standard flowchart shapes
- Process shapes — shapes with specific meanings in process and system diagrams (cylinders, documents, parallelograms)
- Technical shapes — shapes for architecture and technical diagrams
Click any shape to add it to the canvas. Once added, click it to open the node toolbar.
Note on code formatting: Using the Visual Editor will prettify your code — it restructures the syntax to keep it clean as changes are generated. If you want to preserve your exact code formatting, use the text editor only.
Edit a node
Click any node to open the node menu. From there you can edit:
- Shape — rectangle, rounded rectangle, diamond, circle, cylinder, and more. Shape signals meaning — use diamonds for decisions, cylinders for databases, circles for events.
- Border — solid, dashed, or thick. Use border style to emphasize key nodes or indicate optional steps.
- Border color — set independently from background color. Useful for color-coding by category without changing fill.
- Background color — the fill color of the node. Use consistently across node types — all decision nodes the same color, all endpoints the same color.
- Text color — set to contrast with the background. If you’re using a dark fill, use a light text color.
All color and style changes generate classDef entries in the code automatically.
Add subgraphs
Click the subgraph icon in the center toolbar to add a labeled group to the canvas. Drag nodes inside the subgraph boundary to group them.
Add icons and images
- Icons: Click the icon in the center toolbar. Search for an icon and click to add it. Set the icon size, background shape, background color, icon color, and label after adding.
- Images: Click the image icon in the center toolbar. Enter an image URL to add it to the canvas. Set the display size and add a title if needed.
Rearrange the layout
Click the rearrange icon in the center toolbar to auto-arrange the diagram. Two options:
- Hierarchical layout — top-down tree structure, useful for org charts and decision trees
- Adaptive layout — arranges based on connections, useful for complex flows
Apply themes and looks
Click the design icon in the center toolbar to change the visual style. Themes control colors and typography:
| Theme | Best for |
|---|---|
| Mermaid | Default — clean and professional |
| Neo | Modern, higher contrast |
| Neo dark | Dark mode version of Neo |
| Default | Classic Mermaid style |
| Forest | Green palette |
| Base | Minimal, easy to customize |
| Dark | Dark background |
| Neutral | Muted, grayscale palette |
Looks control the rendering style:
| Look | What it does |
|---|---|
| Neo | Clean, precise edges and shapes |
| Hand drawn | Sketch-like rendering — good for drafts and presentations |
| Classic | Traditional Mermaid rendering |
Delete nodes and connections
Right-click any node or connection and select Delete. Or select multiple elements by dragging a selection box across the canvas, then delete the selection.
Supported diagram types
The Visual Editor currently supports flowcharts, class diagrams, sequence diagrams, state diagrams, mindmaps, entity relationship (ER) diagrams, and requirement diagrams. Additional diagram types will be added in future releases.
Collaborate, share, and export
Click Share to invite teammates by email, set permissions, or generate a shareable link. Multiple people can edit the same diagram simultaneously — changes are reflected in real time.
Click Comments to add comments. Comments are visible in both the Visual Editor and the text editor.
Click the export icon in the left toolbar to export as PNG, SVG, PDF, or MMD directly.
What’s next?
- Go deeper on the syntax behind what you’re building | Write diagram syntax →
- Define reusable styles across your diagram | Create custom styles →