Mermaid glossary

Short, plain-English definitions of the terms you meet when working with Mermaid diagrams.

C4 Model

The C4 model is an abstraction framework for describing software architecture at four levels of zoom: Context, Containers, Components, and Code. Mermaid supports C4 diagrams, so systems, containers, and their relationships can be declared as text and kept in version control. Because it introduces concepts beyond the basics, most teams learn flowcharts and sequence diagrams first. Starting with the [flowchart guide](/diagrams/flowchart) builds the foundation C4 assumes.

Class Diagram

A class diagram shows classes with their attributes and methods, plus the relationships between them such as inheritance, composition, and association. Mermaid's `classDiagram` follows UML conventions, including visibility markers like `+` for public and `-` for private members. Developers use it to sketch object models before or alongside implementation. The [class diagram guide](/diagrams/class) explains the notation.

Diagrams as Code

Diagrams as code is the practice of authoring diagrams in plain text instead of dragging shapes on a canvas. Written this way, a diagram lives in version control, goes through code review, and can be updated in the same pull request as the change it documents. Mermaid is one of the most widely adopted syntaxes for this style of working. The [flowchart guide](/diagrams/flowchart) is the usual starting point.

Edge

An edge is the line or arrow that connects two nodes and carries the direction or meaning of their relationship. Mermaid flowchart edges range from a plain `-->` arrow to labeled links like `-- Yes -->`, plus dotted and thick variants for emphasis. Edge syntax is one of the first things to master when writing flowcharts. The [flowchart guide](/diagrams/flowchart) shows the edge forms in everyday use.

ELK Renderer

The ELK renderer is an alternative layout engine for Mermaid flowcharts, based on the Eclipse Layout Kernel. Compared with the default dagre-d3 layout, it generally untangles dense graphs better, with cleaner edge routing and fewer crossings on wide diagrams. The underlying diagram stays the same — only the automatic arrangement changes. See the [flowchart guide](/diagrams/flowchart) for where layout choices matter most.

ER Diagram

An ER diagram, short for entity-relationship diagram, models the entities in a data domain and the relationships between them, including cardinality such as one-to-many. Mermaid's `erDiagram` declares entities with typed attributes and draws crow's-foot notation for the relationships. Database designers use it to sketch and document schemas before writing migrations. The [ER diagram guide](/diagrams/er) walks through the notation.

Flowchart

A flowchart represents a process as nodes connected by arrows, showing decisions, actions, and outcomes in the order they happen. In Mermaid you declare one with `flowchart TD` or `flowchart LR` and combine rectangles, diamonds, rounded nodes, and labeled edges to describe the logic. It is the most used Mermaid diagram type and the first one most people learn. The full syntax is covered in the [flowchart guide](/diagrams/flowchart).

Frontmatter

Frontmatter is a YAML metadata block at the top of a Markdown file, set off by triple dashes. Mermaid 11 reads frontmatter too, so a `title` or config keys placed between `---` lines above the diagram declaration apply to the rendered output. The same convention is how static sites attach titles, dates, and slugs to content files. The [cheat sheet](/cheatsheet) includes frontmatter examples alongside the core syntax.

Gantt Chart

A Gantt chart lays project tasks out on a horizontal time axis, making start dates, durations, and dependencies visible at a glance. Mermaid's `gantt` diagram builds one from sections, task lines, and a date format, with dependencies expressed through `after` keywords. It is a lightweight way to keep a schedule inside the same Markdown file as the plan it describes. The [Gantt chart guide](/diagrams/gantt) shows how to structure tasks.

Gitgraph

A gitgraph visualizes a repository's history as commits, branches, and merges flowing left to right. Mermaid's `gitGraph` diagram lets you script commits, branch and checkout, merge, and tag, which makes it handy for documenting branching strategies such as release flows and hotfix paths. Reviewers can see the intended history without opening a real repository. The [gitgraph guide](/diagrams/gitgraph) details the commands.

Live Editor

A live editor is a web app where you type Mermaid code in one pane and watch the diagram render instantly in another. It removes setup friction — no installs and no build step — and makes it easy to test syntax, fix errors, and export the finished image. This site's [free Mermaid editor](/) works exactly that way in the browser.

Mermaid

Mermaid is a JavaScript-based diagramming and charting tool that renders plain-text definitions into SVG diagrams. It is MIT-licensed open source and is embedded in platforms such as GitHub, GitLab, Notion, and Obsidian, which is why Mermaid snippets render in so many places developers already write. Because a diagram is just text, it can be versioned, diffed, and reviewed like any other code. For a broader tour of the syntax and ecosystem, read [What is Mermaid?](/blog/what-is-mermaid).

Mindmap

A mindmap radiates ideas outward from a central root, with indentation expressing the hierarchy instead of arrows. Mermaid's `mindmap` diagram needs no edge syntax at all — nesting lines under one another builds the tree, and node shapes add variety. It suits brainstorming, roadmaps, and study notes. The [mindmap guide](/diagrams/mindmap) covers shapes and structure.

Node

A node is a single shape in a diagram — a rectangle, diamond, circle, or stadium — representing one step, entity, or state. In Mermaid flowcharts you create a node by writing an id plus a shape wrapper, such as `A[Step]` or `B{Decision?}`, and the wrapper decides how it is drawn. Ids must be unique within a diagram even when labels repeat. The [cheat sheet](/cheatsheet) lists the common node shapes.

Renderer

A renderer is the engine that takes a parsed Mermaid definition and turns it into positioned shapes and drawn arrows. For flowcharts, Mermaid has historically offered dagre-d3 as the default and ELK as an alternative layout option, each with different trade-offs in edge routing and compactness. Switching renderers changes how the same code looks, never what it means. Related terms are collected in the [glossary](/glossary).

Sequence Diagram

A sequence diagram shows how participants such as users, services, and databases exchange messages over time, read from top to bottom. Mermaid's `sequenceDiagram` supports actors, participants, solid and dashed arrows, activation bars, loops, and notes. It is the standard choice for documenting API calls and request-response flows. See the [sequence diagram guide](/diagrams/sequence) for syntax and examples.

State Diagram

A state diagram models the states a system or object can occupy and the transitions between them, usually triggered by events. Mermaid's `stateDiagram-v2` provides start and end markers, transition labels, and composite states for grouping. It fits lifecycles such as order status, job queues, and authentication sessions. The [state diagram guide](/diagrams/state) covers the syntax.

Subgraph

A subgraph groups related nodes inside a labeled container, drawn as a box around them in the rendered diagram. In Mermaid flowcharts a `subgraph Title` block ends with `end`, can nest other subgraphs, and can be connected to other nodes or groups by edges. It is the standard way to show swimlanes, system boundaries, or team ownership. The [swimlane process template](/templates/flowchart-swimlane-process) puts subgraphs to work.