mermaid-diagramslisted

# Mermaid Diagrams Create diagrams and visualizations using Mermaid markdown syntax. ## Quick Reference Mermaid diagrams are written in markdown code blocks with `mermaid` as the language identifier. ## Flowchart ```mermaid flowchart TD A[Start] --> B{Is it valid?} B -->|Yes| C[Process data] B -->|No| D[Show error] C --> E[Save to database] D --> F[Return to input] E --> G[End] F --> A ``` ### Flowchart Syntax ``` flowchart TD %% TD = top-down, LR = left-right, RL, BT A[Rectangle] %% Square brackets = rectangle B(Rounded) %% Parentheses = rounded rectangle C{Diamond} %% Curly braces = diamond/decision D[[Subroutine]] %% Double brackets = subroutine E[(Database)] %% Cylinder shape F((Circle)) %% Double parentheses = circle G>Asymmetric] %% Flag shape A --> B %% Arrow B --- C %% Line without arrow C -.-> D %% Dotted arrow D ==> E %% Thick arrow E --text--> F %% Arrow with label F -->|label| G %% Alternative label syntax ``` ### Subgraphs ```mermaid flowchart TB subgraph Frontend A[React App] --> B[Components] B --> C[Hooks] end subgraph Backend D[API Server] --> E[Database] end A -->|HTTP| D ``` ## Sequence Diagram ```mermaid sequenceDiagram participant U as User participant C as Client participant S as Server participant D as Datab