Skip to main content

Start from a snippet

Pick one of 35 ready-made diagrams in the editor and adapt it, instead of writing Mermaid code from scratch.

Before you begin​

Insert a snippet​

  1. In an empty diagram, select Start from a snippet. To add a snippet as a new diagram next to the ones you have, select Add diagram > From a snippet… instead.

  2. Browse the gallery, or type in Search... to filter by name or description, for example gantt or process. Select List to see names only.

  3. Select a snippet to see its description, code and preview.

    The snippet gallery with Gantt Diagram: Release Plan selected, showing its code, Insert and Copy buttons, and a preview

  4. Select Insert.

Result: The snippet's code is in the editor, and the diagram's tab is named after its type. Change the labels and steps to your own.

note

Insert appears only for an empty diagram, so a snippet never replaces your work. When the diagram already has code, select Copy and paste the parts you need.

KindSnippets
ProcessesFlowchart, Flowchart: Subgraphs and Styles, Swimlane Process, State Diagram, User Journey, Agent Flow
SoftwareSequence Diagram, Sequence Diagram: API Flow, Class Diagram, Entity Relationship Diagram, Entity Relationship Diagram: Data Model, Use Case Diagram, Requirement Diagram, Git Graph Diagram, Packet Diagram, Folder Tree
ArchitectureArchitecture with Icons, C4 Context Diagram, Block Diagram
PlanningGantt Diagram, Gantt Diagram: Release Plan, Timeline Diagram, Kanban
Ideas and analysisMind Map, Fishbone (Ishikawa) Diagram, Quadrant Chart, Venn Diagram
ChartsPie Chart, XY Chart, Radar Chart, Treemap, Sankey Diagram
AppearanceThemes, Looks and Layouts, Flowchart: Custom Theme, Sequence Diagram: Custom Theme