/mermaid-diagrams

mermaid-diagrams

Examples from https://mermaid.live/

Flowchart

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

flowchart TD
   A[Christmas] -->|Get money| B(Go shopping)
   B --> C{Let me think}
   C -->|One| D[Laptop]
   C -->|Two| E[iPhone]
   C -->|Three| F[fa:fa-car Car]
Loading

Sequence diagram

sequenceDiagram
   Alice->>+John: Hello John, how are you?
   Alice->>+John: John, can you hear me?
   John-->>-Alice: Hi Alice, I can hear you!
   John-->>-Alice: I feel great!

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!
Loading

Class diagram

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
      +String beakColor
      +swim()
      +quack()
    }
    class Fish{
      -int sizeInFeet
      -canEat()
    }
    class Zebra{
      +bool is_wild
      +run()
    }

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
      +String beakColor
      +swim()
      +quack()
    }
    class Fish{
      -int sizeInFeet
      -canEat()
    }
    class Zebra{
      +bool is_wild
      +run()
    }
Loading

State diagram

stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
Loading

ER diagram

erDiagram
    CUSTOMER }|..|{ DELIVERY-ADDRESS : has
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER ||--o{ INVOICE : "liable for"
    DELIVERY-ADDRESS ||--o{ ORDER : receives
    INVOICE ||--|{ ORDER : covers
    ORDER ||--|{ ORDER-ITEM : includes
    PRODUCT-CATEGORY ||--|{ PRODUCT : contains
    PRODUCT ||--o{ ORDER-ITEM : "ordered in"

erDiagram
    CUSTOMER }|..|{ DELIVERY-ADDRESS : has
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER ||--o{ INVOICE : "liable for"
    DELIVERY-ADDRESS ||--o{ ORDER : receives
    INVOICE ||--|{ ORDER : covers
    ORDER ||--|{ ORDER-ITEM : includes
    PRODUCT-CATEGORY ||--|{ PRODUCT : contains
    PRODUCT ||--o{ ORDER-ITEM : "ordered in"
Loading

Gantt chart

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d
Loading

User journey map

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 3: Me

journey
   title My working day
   section Go to work
     Make tea: 5: Me
     Go upstairs: 3: Me
     Do work: 1: Me, Cat
   section Go home
     Go downstairs: 5: Me
     Sit down: 3: Me
Loading

Git graph

gitGraph
   commit
   commit
   branch develop
   checkout develop
   commit
   commit
   checkout main
   merge develop
   commit
   commit

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    commit
Loading

Pie chart

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
Loading

Mindmap

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectivness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectivness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid
Loading 
graph TB
    A[Playwright] --> B[BrowserType]
    B --> C1{Browser}
    C1 --> D1[BrowserContext]
    D1 --> E1[Page]
    E1 --> F1[Frame]
    F1 --> G1[ElementHandle]
    E1 --> H1[Network]
    
    C1 --> D2[BrowserContext]
    D2 --> E2[Page]
    E2 --> F2[Frame]
    F2 --> G2[ElementHandle]
    E2 --> H2[Network]
Loading 
graph TD

    subgraph "Data Ingestion & Streaming"
        EH[Azure Event Hubs]
        ADO[Azure DevOps] --> EH
        SN[ServiceNow] --> EH
    end

    subgraph "Data Processing & Transformation"
        Databricks[Azure Databricks]
        EH --> Databricks
        Databricks --> SQL[Azure SQL Database]
    end

    subgraph "Data Storage & Semantic Layer"
        AAS[Azure Analysis Services]
        SQL --> AAS
    end

    subgraph "Presentation Layer"
        Tableau[Tableau]
        SQL --> Tableau
        AAS --> Tableau
    end

    subgraph "Automation & Monitoring"
        LA[Azure Logic Apps]
        Monitor[Azure Monitor]
        EH --> Monitor
        SQL --> Monitor
        Databricks --> Monitor
        AAS --> Monitor
        Tableau --> Monitor
        Databricks --> LA
    end

    subgraph "Security"
        AAD[Azure Active Directory]
        SQL --> AAD
        AAS --> AAD
        Tableau --> AAD
        EH --> AAD
    end

    subgraph "Backup & Recovery"
        Backup[Azure Backup]
        SQL --> Backup
    end
Loading