Mermaid
v9.1.1
Live Editor
Menu
Change Theme
🌝 light
🌚 dark
🧁 cupcake
🐝 bumblebee
✳️ emerald
🏢 corporate
🌃 synthwave
👴 retro
🤖 cyberpunk
🌸 valentine
🎃 halloween
🌷 garden
🌲 forest
🐟 aqua
👓 lofi
🖍 pastel
🧚♀️ fantasy
📝 wireframe
🏴 black
💎 luxury
🧛♂️ dracula
Documentation
Tutorial
Mermaid
CLI
Mermaid
Code
Config
Auto sync
Docs
1
2
3
4
5
6
7
graph
TD
A
[Christmas]
-->
|Get money|
B
(Go shopping)
B
-->
C
{Let me think}
C
-->
|One|
D
[Laptop]
C
-->
|Two|
E
[iPhone]
C
-->
|Three|
F
[fa:fa-car Car]
graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car]
Enter to Rename, Shift+Enter to Preview
Sample Diagrams
History
Actions
Copy Image to clipboard
PNG
SVG
PNG
SVG
Kroki
PNG size
Auto
Width
Height
Copy Markdown
Load Gist
This site is powered by Netlify
Diagram
View
Get money
One
Two
Three
Christmas
Go shopping
Let me think
Laptop
iPhone
Car
Code editing not supported on mobile. Please use a desktop browser.
Online FlowChart & Diagrams Editor - Mermaid Live Editor