Every diagram type.

zombie-mermaid renders 10 Mermaid diagram types, each with a live picker across every one of its 15 built-in themes.

View all diagrams
01 / 10

Flowchart

Flowcharts map a process as boxes and arrows and are the most commonly used Mermaid diagram — CI pipelines, decision trees, onboarding steps. zombie-mermaid supports the full shape set (rounded, diamond, stadium, subroutine, cylinder, hexagon, and more), subgraphs, and both straight and curved edges.

View examples54 examples
02 / 10

State diagram

State diagrams show every state a system can be in and the events that move it between them — useful for anything with a lifecycle: a connection, an order, a UI component. zombie-mermaid supports nested composite states, start/end pseudostates, and animated edge transitions.

View examples7 examples
03 / 10

Sequence diagram

Sequence diagrams show the order messages pass between participants over time — the standard way to document an API call, an auth handshake, or a distributed-systems trace. zombie-mermaid supports actors, activation boxes, and every Mermaid arrow type.

View examples24 examples
04 / 10

Class diagram

Class diagrams document a type’s attributes, methods, and visibility in a compact, 3-compartment box — the standard UML notation for object-oriented design docs and API references. zombie-mermaid renders all four visibility markers and inheritance/composition relationships.

View examples29 examples
05 / 10

ER diagram

Entity-relationship diagrams describe a database schema: entities, their attributes, and the cardinality of the relationships between them. zombie-mermaid renders the full crow’s-foot notation along with PK/FK/UK key badges on typed attributes.

View examples20 examples
06 / 10

XY chart

XY charts plot bar and line series against a shared axis — the one Mermaid diagram type that’s a data chart rather than a graph of nodes and edges. zombie-mermaid renders both bar and line series, mixed on one chart if needed.

View examples10 examples
07 / 10

C4 diagram

C4 diagrams describe software architecture as people, systems, containers, and components, zoomed in one level at a time. zombie-mermaid renders the Context, Container, Component, and Dynamic variants with boundaries and labelled relationships.

View examples3 examples
08 / 10

Architecture diagram

Architecture diagrams place services in groups and connect them from a chosen side of each, which suits cloud and infrastructure layouts. zombie-mermaid renders groups, services, junctions, and edges between any of them.

View examples3 examples
09 / 10

Pie chart

Pie charts show how a whole divides into labelled parts. zombie-mermaid renders SVG wedges with a legend and, in ASCII, a proportional bar chart, with optional raw values via showData.

View examples26 examples
10 / 10

Quadrant chart

Quadrant charts place labelled points on two axes split into four named quadrants, the classic prioritisation matrix. zombie-mermaid renders the quadrants, axis labels and point styles in SVG and as a character grid in ASCII.

View examples7 examples