Skip to main content
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 PaneRight Pane
Mermaid source codeRendered diagram
Editable directlyUpdates live as code changes
AI writes hereScrollable / 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

TypeUse CaseExample Prompt
FlowchartProcess flows, decision trees, system diagrams”Create a flowchart of the user onboarding process from signup to activated account”
Sequence DiagramAPI flows, authentication, user journeys”Draw a sequence diagram for the OAuth 2.0 login flow”
ER DiagramDatabase schemas, data models”Make an ER diagram for a blog with posts, comments, users, and tags”
Gantt ChartProject timelines, sprint planning”Create a Gantt chart for a 3-month product launch with discovery, design, build, and launch phases”
Class DiagramOOP structure, inheritance, system design”Show a class diagram for a payment system with Order, LineItem, Customer, and Payment”
State DiagramState machines, lifecycle flows”Draw a state diagram for an order lifecycle: placed, confirmed, shipped, delivered, returned”
Pie ChartData distributions, percentages”Show a pie chart of market share: OpenAI 40%, Google 30%, Anthropic 20%, Others 10%“
User JourneyExperience 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.
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.

​
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

Canvas Overview

All 7 canvas editor types and how to activate Canvas Mode.

Export Canvas

Export your diagram as SVG or PNG.

HTML Preview

Build interactive charts and visualizations with HTML/JS.

Troubleshooting

Fix diagram rendering and syntax errors.