Skip to main content

Diagram Examples

This page demonstrates how to create diagrams using Mermaid.

Network Architecture Diagram​

Relay Server Deployment Flow​

Gateway Connection Sequence​

Access Control List (ACL) Structure​

System Components​

Deployment States​

Usage in Markdown​

To create a diagram, use a code block with mermaid as the language:

```mermaid graph LR A[Start] --> B[End] ```

Supported Diagram Types​

  • Flowcharts: graph or flowchart
  • Sequence Diagrams: sequenceDiagram
  • Class Diagrams: classDiagram
  • State Diagrams: stateDiagram-v2
  • Entity Relationship: erDiagram
  • User Journey: journey
  • Gantt Charts: gantt
  • Pie Charts: pie
  • Git Graph: gitGraph

Camouflage Brand Colors​

Use these colors in your diagrams:

  • Lightning Green: #12c79c (primary)
  • Midnight Blue: #1d2f57 (secondary)
  • Success Green: #22c55e
  • Error Red: #ef4444

Example styling:

style NodeName fill:#12c79c,stroke:#0fb185,color:#fff