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

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

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

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

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]

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

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]

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

packet-beta
  0-15: "Source Port"
  16-31: "Destination Port"
  32-63: "Sequence Number"
  64-95: "Acknowledgment Number"
  96-99: "Data Offset"
  100-105: "Reserved"
  106-111: "Flags"
  112-127: "Window Size"

architecture-beta
    group api(cloud)[API]

    service db(database)[Database] in api
    service disk1(disk)[Storage] in api
    service disk2(disk)[Backup] in api
    service server(server)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db

kanban
  Todo
    id1[Design homepage]
    id2[Write tests]
  In Progress
    id3[Implement API]
  Done
    id4[Setup CI/CD]

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 for Internet Banking System
    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")

C4Container
    title Container diagram for Internet Banking System
    Person(customer, "Customer", "A customer of the bank")
    Container_Boundary(c1, "Internet Banking") {
        Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
        Container(spa, "Single-Page App", "JavaScript, Angular", "Provides banking functionality to customers")
        ContainerDb(database, "Database", "SQL Database", "Stores user registration, auth, and access logs")
    }
    Rel(customer, web_app, "Uses", "HTTPS")
    Rel(web_app, spa, "Delivers")
    Rel(spa, database, "Reads from and writes to", "JDBC")

C4Component
    title Component diagram for Internet Banking System - API Application
    Container_Boundary(api, "API Application") {
        Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in")
        Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their accounts")
        Component(security, "Security Component", "Spring Bean", "Provides functionality related to signing in")
    }
    ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration, auth, and access logs")
    Rel(sign, security, "Uses")
    Rel(accounts, db, "Reads from", "JDBC")
    Rel(security, db, "Reads & writes to", "JDBC")

C4Dynamic
    title Dynamic diagram for Internet Banking System
    ContainerDb(c4, "Database", "Relational Database Schema", "Stores user info")
    Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides banking functionality")
    Container_Boundary(b, "API Application") {
        Component(c2, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in")
        Component(c3, "Security Component", "Spring Bean", "Provides sign-in functionality")
    }
    Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
    Rel(c2, c3, "Validates credentials")
    Rel(c3, c4, "Reads from", "JDBC")

C4Deployment
    title Deployment Diagram for Internet Banking System
    Deployment_Node(mob, "Customer's mobile device", "Apple iOS or Android") {
        Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of banking functionality")
    }
    Deployment_Node(comp, "Customer's computer", "Chrome, Firefox, Safari, or Edge") {
        Container(spa, "Single-Page Application", "JavaScript and Angular", "Provides banking functionality")
    }
    Deployment_Node(dc, "Big Bank plc", "Big Bank's data center") {
        Deployment_Node(apache, "bigbank-web***", "Apache Tomcat") {
            Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content")
        }
    }
    Rel(mobile, web, "Makes API calls to", "JSON/HTTPS")
    Rel(spa, web, "Makes API calls to", "JSON/HTTPS")

radar-beta
  title Skills Assessment
  axis f["Frontend"], b["Backend"], d["DevOps"], t["Testing"], u["Design"]
  curve a["Developer A"]{4, 3, 2, 5, 1}
  curve b["Developer B"]{2, 5, 4, 2, 3}
  max 5