Diagrams

Rhizome supports Mermaid diagrams for creating flowcharts, sequence diagrams, class diagrams, and more. Diagrams render in both light and dark modes.

Usage

Use the Mermaid component with a code prop:

<Mermaid code={`
graph LR
    A --> B
`} />

Flowcharts

Left to Right

Top to Bottom

System Architecture

Sequence Diagrams

Perfect for visualizing API interactions and processes:

Authentication Flow

Class Diagrams

Useful for object-oriented design documentation:

State Diagrams

Model state machines and workflows:

Entity Relationship Diagrams

Document database schemas:

Pie Charts

Show proportional data:

Diagram Syntax Reference

Diagram Type	Keyword
Flowchart	graph or flowchart
Sequence	sequenceDiagram
Class	classDiagram
State	stateDiagram-v2
ER	erDiagram
Pie	pie