> ## Documentation Index
> Fetch the complete documentation index at: https://docs.zerotwo.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Mermaid Diagram Editor
> Create flowcharts, sequence diagrams, ER diagrams, Gantt charts, and more — rendered live from AI-generated Mermaid.js syntax.
The Mermaid Diagram editor turns natural-language descriptions into technical diagrams. ZeroTwo writes the Mermaid.js syntax; the canvas renders the diagram live. You get a split view: Mermaid code on the left, rendered diagram on the right. No diagramming tool required — just describe what you want and the diagram appears.
## How It Works
The canvas shows two panes side by side:
| Left Pane | Right Pane |
| ------------------- | ---------------------------- |
| Mermaid source code | Rendered diagram |
| Editable directly | Updates live as code changes |
| AI writes here | Scrollable / zoomable output |
You can edit the Mermaid code manually in the left pane. The diagram re-renders automatically as you type, making it easy to fine-tune labels, add nodes, or fix syntax errors.
Describe the entities and their relationships in plain English — ZeroTwo handles the Mermaid syntax. "Create a flowchart with nodes: Start, Validate Input, Check Permissions, Process, Return Response, Error" is all you need.
## Supported Diagram Types
| Type | Use Case | Example Prompt |
| -------------------- | ---------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| **Flowchart** | Process flows, decision trees, system diagrams | "Create a flowchart of the user onboarding process from signup to activated account" |
| **Sequence Diagram** | API flows, authentication, user journeys | "Draw a sequence diagram for the OAuth 2.0 login flow" |
| **ER Diagram** | Database schemas, data models | "Make an ER diagram for a blog with posts, comments, users, and tags" |
| **Gantt Chart** | Project timelines, sprint planning | "Create a Gantt chart for a 3-month product launch with discovery, design, build, and launch phases" |
| **Class Diagram** | OOP structure, inheritance, system design | "Show a class diagram for a payment system with Order, LineItem, Customer, and Payment" |
| **State Diagram** | State machines, lifecycle flows | "Draw a state diagram for an order lifecycle: placed, confirmed, shipped, delivered, returned" |
| **Pie Chart** | Data distributions, percentages | "Show a pie chart of market share: OpenAI 40%, Google 30%, Anthropic 20%, Others 10%" |
| **User Journey** | Experience flows, satisfaction scoring | "Map the user journey for onboarding a new SaaS user from signup to first value" |
## Diagram Type Reference
### Flowchart
Use flowcharts to visualize processes, decisions, and system flows. Supports top-down (`TD`) and left-right (`LR`) orientation.
**Prompts to try:**
* "Create a top-down flowchart of the user signup process from landing page to activated account"
* "Draw a left-to-right flowchart showing how a support ticket moves through our system"
* "Make a decision tree flowchart for qualifying a sales lead"
**Example Mermaid syntax ZeroTwo produces:**
```
flowchart TD
A[User visits signup page] --> B[Fill out form]
B --> C{Email already registered?}
C -- Yes --> D[Show error: email in use]
C -- No --> E[Create account]
E --> F[Send verification email]
F --> G[Account activated]
```
### Sequence Diagram
Use sequence diagrams to show how systems, services, or actors interact in time order.
**Prompts to try:**
* "Draw a sequence diagram for an OAuth 2.0 authorization code flow"
* "Create a sequence diagram showing how a REST API handles a payment request end-to-end"
* "Make a sequence diagram for a microservices checkout flow: frontend, cart service, payment service, order service"
### ER Diagram
Use ER diagrams to document database schemas and entity relationships.
**Prompts to try:**
* "Make an ER diagram for a blog database with users, posts, comments, and tags"
* "Create a database schema diagram for a multi-tenant SaaS app with organizations, users, and subscriptions"
* "Draw an ER diagram for an e-commerce system with products, orders, customers, and line items"
### Gantt Chart
Use Gantt charts for project timelines, roadmaps, and sprint planning.
**Prompts to try:**
* "Create a Gantt chart for a 3-month product launch: discovery, design, development, testing, launch"
* "Make a 6-week sprint plan with tasks for backend, frontend, and QA teams"
* "Build a product roadmap Gantt for Q1 and Q2 with milestones"
### Class Diagram
Use class diagrams for object-oriented design documentation.
**Prompts to try:**
* "Create a class diagram for a user authentication system"
* "Draw a class diagram for an e-commerce order management system"
* "Make a UML class diagram showing inheritance between Vehicle, Car, Truck, and Motorcycle"
### State Diagram
Use state diagrams for state machines, UI flows, and lifecycle documentation.
**Prompts to try:**
* "Draw a state diagram for a subscription lifecycle: trial, active, past due, cancelled, reactivated"
* "Create a state machine for an order: placed, confirmed, shipped, delivered, returned"
* "Make a state diagram for a traffic light system"
### Pie Chart
Use pie charts for simple proportional data and distributions.
**Prompts to try:**
* "Create a pie chart showing market share: Company A 35%, Company B 28%, Company C 20%, Others 17%"
* "Make a pie chart of website traffic sources: organic 45%, paid 30%, referral 15%, direct 10%"
## Manual Editing
You can modify the Mermaid code directly in the left pane:
* Click anywhere in the left pane to position your cursor
* Edit node labels, arrow styles, or diagram structure
* The right pane re-renders live as you type
If you introduce a Mermaid syntax error, the preview shows an error message instead of the diagram. Ask ZeroTwo: "Fix the diagram syntax" — or manually check against the [Mermaid documentation](https://mermaid.js.org).
**Common Mermaid syntax notes:**
* Node labels with spaces must be wrapped in quotes: `A["Label with spaces"]`
* Flowchart arrows: `-->` (directed), `---` (undirected), `-.->` (dotted)
* Sequence diagram arrows: `->>` (solid), `-->>` (dashed)
* Missing `end` keyword closes subgraphs
## Exporting Diagrams
Click the **Export** button in the canvas toolbar.
Exports a scalable vector SVG file. Best for:
* Embedding in documentation or web pages
* Presentations where the diagram needs to scale to any size
* Further editing in Figma, Illustrator, or Inkscape
SVG is the recommended format for most use cases — it stays sharp at any zoom level.
Exports a raster PNG image. Best for:
* Embedding in Word documents, emails, or Notion
* Any context that does not support SVG
* Quick sharing where quality at a fixed size is sufficient
Choose the highest available resolution for print use.
## Tips for Best Results
**Name all entities explicitly before starting.** "A flowchart with nodes: Start, Validate Input, Check Permissions, Process Request, Return Response, Error Handler" gives ZeroTwo a complete picture to work from.
**Describe relationships, not just nodes.** "Users have many Orders; Orders belong to one User; Orders have many LineItems" gives ZeroTwo the relational logic needed for an accurate ER diagram.
**Specify orientation for flowcharts.** Left-to-right (`LR`) works better for wide process flows; top-to-bottom (`TD`) is better for hierarchical or decision-tree structures.
**Name the diagram type explicitly.** "Create a Mermaid sequence diagram showing..." is more reliable than "draw a diagram showing interactions between..." — the AI knows exactly which syntax to use.
**Iterate to add complexity.** Start with the core flow, then add: "Now add error handling paths," "Add a database node," "Show the retry logic for failed payments."
## Related Pages
All 7 canvas editor types and how to activate Canvas Mode.
Export your diagram as SVG or PNG.
Build interactive charts and visualizations with HTML/JS.
Fix diagram rendering and syntax errors.