Diagram Gallery

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Process]
    B -->|No| D[End]
    C --> D

sequenceDiagram
    Alice->>Bob: Hello Bob!
    Bob-->>Alice: Hi Alice!
    Alice->>Bob: How are you?
    Bob-->>Alice: Great!

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Duck: +swim()
    Fish: +canEat()

stateDiagram-v2
    [*] --> Idle
    Idle --> Processing : Start
    Processing --> Done : Complete
    Processing --> Error : Fail
    Error --> Idle : Reset
    Done --> [*]

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

gantt
    title Project Plan
    dateFormat YYYY-MM-DD
    section Design
      Wireframes :a1, 2024-01-01, 7d
      Mockups    :a2, after a1, 5d
    section Dev
      Frontend   :b1, after a2, 10d
      Backend    :b2, after a2, 12d

pie title Favorite Languages
    "JavaScript" : 35
    "Python" : 30
    "TypeScript" : 20
    "Go" : 15

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

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: 5: Me

mindmap
  root((Project))
    Planning
      Goals
      Timeline
    Development
      Frontend
      Backend
    Testing

timeline
    title History of Social Media
    2002 : LinkedIn
    2004 : Facebook : Google
    2005 : YouTube
    2006 : Twitter

sankey-beta
Agricultural waste,Bio-conversion,124.729
Bio-conversion,Liquid,0.597
Bio-conversion,Losses,26.862
Bio-conversion,Solid,280.322
Bio-conversion,Gas,81.144

xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may]
    y-axis "Revenue (k$)" 0 --> 150
    bar [52, 78, 65, 120, 95]
    line [52, 78, 65, 120, 95]

block-beta
  columns 3
  a["Frontend"]:2 b["Backend"]
  c["Database"] d["Cache"] e["Queue"]

quadrantChart
    title Reach and engagement
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]

requirementDiagram
    requirement test_req {
      id: 1
      text: the test text
      risk: high
      verifymethod: test
    }
    element test_entity {
      type: simulation
    }
    test_entity - satisfies -> test_req

C4Context
    title System Context diagram
    Person(customerA, "Banking Customer A", "A customer of the bank")
    System(systemAA, "Internet Banking System", "Allows customers to view information about their bank accounts.")
    System_Ext(systemC, "E-mail system", "The internal e-mail system.")
    Rel(customerA, systemAA, "Uses")
    Rel(systemAA, systemC, "Sends e-mails", "SMTP")