Plan a project as text: dateFormat YYYY-MM-DD, then tasks like Design :des1, 2026-03-02, 10d and Build :after des1, 3w. Sections group work, milestone marks a date, crit highlights the critical path and excludes weekends skips non-working days. Export SVG or PNG for status reports and slides.
How to use
- Pick a diagram type to load an example, or type Mermaid code. The preview updates shortly after you stop typing.
- Errors show the line and the parser message; tap the error to select that line. The last good diagram stays visible, grayed out.
- Zoom with the buttons or Ctrl + mouse wheel. Colors follow light or dark mode.
- Copy or download SVG, or download PNG at twice the size. Turn on Transparent for exports without a background.
- Copy a share link: the code is compressed into the link after #.
- Diagrams are drawn by Mermaid inside your browser; your text is never uploaded. The editor remembers your last diagram.
- You can open .mmd files or Markdown files; the first ```mermaid block is used.
- Mermaid runs in strict security mode, so click handlers and raw HTML in labels are disabled.
Why diagrams as code
Mermaid describes a diagram in a few readable lines instead of boxes dragged by hand. flowchart LR then A[Start] --> B{OK?} and B -->|yes| C[Ship] already draws a decision. Because it is text, a diagram can live next to the code in Git, be reviewed in a pull request and be updated with a one-line change; the layout is computed for you.
GitHub, GitLab, Notion, Obsidian and many documentation tools render ```mermaid code blocks directly, so a diagram written here can be pasted into a README unchanged. Use this editor to get the syntax right with instant feedback, then export SVG or PNG for places that only accept images.
Choosing a diagram type
Flowcharts show processes and decisions; sequence diagrams show messages between services or people over time; class diagrams model types and their relationships; state diagrams show how something moves between states; ER diagrams model database tables with crow’s foot cardinality; Gantt charts plan tasks with dates and dependencies; pie charts show shares of a whole; mind maps branch from one idea; timelines list events by period.
Tips
Keep node IDs short and put the readable text in brackets: A[Customer places order]. Quote labels that contain special characters. Group parts with subgraph in flowcharts and with alt or loop blocks in sequence diagrams. If the layout gets crowded, switch direction from TD to LR or split the diagram in two.
Frequently asked questions
What is Mermaid?
Mermaid is an open-source JavaScript library that renders diagrams from a Markdown-like text syntax. It is supported natively by GitHub, GitLab and many wikis and note apps.
Can I use the diagram in a GitHub README?
Yes. Copy the code into a fenced block that starts with ```mermaid and GitHub renders it. If a platform does not support Mermaid, export SVG or PNG and insert the image instead.
Why does my diagram show a syntax error?
The message names the line and what the parser expected. Common causes are a missing arrow, an unclosed bracket or quote, or a reserved word such as end used as a node ID; write it as End or put it in quotes.
How do I export a high-resolution image?
Download PNG to get an image at twice the on-screen size, which stays sharp on high-density displays and in slides. For print or further editing, download SVG, which scales without loss. Turn on Transparent for no background.
Can I share a diagram without uploading it?
Yes. Copy the share link: the Mermaid code is compressed into the part of the URL after #, which browsers do not send to servers. Opening the link restores the diagram.
Do click handlers and HTML labels work?
No. Mermaid runs in strict security mode here, so click callbacks, links and raw HTML in labels are disabled. Everything else in the syntax is drawn normally.