Fast, distraction-free editor where you can
write, visualize, and experiment with Mermaid.js diagrams in real time.
Just modify the diagram below and see real-time updates.
Loading diagram...
How to Create Diagrams
Mermaid uses a simple, text-based syntax. Here are examples:
All Different Diagram Types
Use %% for comments – helpful for documentation.
graph LR %% Left-to-right graph (alternative syntax for flowchart)
graph RL %% Right-to-left graph
graph TD %% Top-down graph
flowchart TD %% Standard flowchart (top-down)
flowchart LR %% Left-to-right flowchart
sequenceDiagram %% Interaction between system components
pie %% Pie chart visualization
gantt %% Project timeline representation
stateDiagram %% State machine diagrams
stateDiagram-v2 %% Improved state diagram with better syntax
classDiagram %% UML-style class relationships
erDiagram %% Entity-relationship diagrams for databases
journey %% User journey or experience mapping
quadrantChart %% Risk and priority matrices
Grouping Elements (Subgraphs & VLANs)
Use subgraph to create VLANs or logical groups.
flowchart TD
subgraph VLAN1 [VLAN 1]
A[Server 1] -->|Ethernet| B[Switch]
C[Server 2] -->|Ethernet| B
end
subgraph VLAN2 [VLAN 2]
D[Server 3] -->|Ethernet| E[Switch]
end
B -->|Router| E
Best Practices (What to Do)
Break complex diagrams into multiple smaller ones
Use descriptive labels (User, App, DB) instead of A, B, C
Use subgraph for logical grouping
Define custom styles with classDef
Apply styles using class nodeName className
Use color coding for threats, servers, and databases
The Easiest Way to Learn Mermaid.js Diagrams
If you've ever struggled with creating flowcharts, sequence diagrams, or Gantt charts,
you're not alone. Many diagramming tools come with unnecessary features, cluttered interfaces,
and frustrating learning curves. But what if you just need a quick and simple tool
to test Mermaid.js without distractions?
📚 What is Mermaid.js?
Mermaid.js is a powerful, text-based diagramming tool that makes it easy to create
flowcharts, sequence diagrams, Gantt charts, pie charts, entity-relationship diagrams,
and more—all using simple, intuitive Markdown-like syntax.
Unlike traditional drag-and-drop diagramming tools, Mermaid.js lets you define
complex diagrams using plain text, making it perfect for
developers, technical writers, project managers, and students.
With its lightweight, JavaScript-based engine, Mermaid.js seamlessly integrates into
websites, documentation, and wikis, allowing users to generate, modify, and update diagrams effortlessly
without needing any graphical software.
🚀 Why Use SimpleMermaid?
No Setup Needed – Just open the page and start diagramming.
Instant Preview – Type Mermaid.js syntax and see your diagram update live.
Distraction-Free UI – No pop-ups, no ads, just you and your diagram.
Works on Any Device – Use it on desktop, tablet, or mobile.
Dark Mode & Themes – Switch between light, dark, and gray themes.
Preloaded Examples – Click a button to load flowcharts, sequence diagrams, or Gantt charts instantly.
🛠️ How to Use SimpleMermaid
Open SimpleMermaid – No installation required.
Write Mermaid.js Code – Use the editor to type diagrams.
See Instant Updates – The diagram refreshes as you type.
Switch Themes – Light, Dark, or Gray mode.
Load Examples – Click buttons to insert ready-made diagrams.
🌍 Who is SimpleMermaid for?
Students & Beginners – Learn Mermaid.js without distractions.
Developers & Engineers – Quickly test flowcharts & architecture diagrams.