Don’t start from a blank editor. mermaid.design ships a built-in gallery of ready-made diagram templates — open one, tweak the code, and make it your own.
Opening the gallery
Click Templates in the navbar to open the gallery for the current render mode:
/templates— templates rendered with the Official (SVG) engine and your active theme/ascii/templates— the same templates rendered as ASCII art
Each gallery card renders live with your current theme, so what you see is exactly what you get back in the editor.
Finding a template
The gallery includes flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, pie charts, Git graphs, mind maps, user journeys, and more.
Use the filter chips at the top to narrow the list by diagram type. If a template isn’t supported by the current render mode (for example, some diagram types can’t be rendered as ASCII yet), it’s hidden automatically and a notice shows how many templates were filtered out.
Applying a template
- Click a template card.
- Confirm the overwrite dialog — applying a template replaces the code currently in the editor. This cannot be undone.
- You’re taken back to the editor with the template code loaded and rendered.
From the gallery, click Editor in the navbar to return to the editor without applying anything.
Tips
- Apply a template first, then switch the theme — the template picks up your theme variables instantly.
- Templates are a great way to learn Mermaid syntax: open one, then edit the code and watch the preview change.