info
    

    C4Context
      title System Context diagram for Internet Banking System
Enterprise_Boundary(b0, "BankBoundary0") {
      Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
      Person(customerB, "Banking Customer B")      
      Person_Ext(customerC, "Banking Customer C", "desc")            

      Person(customerD, "Banking Customer D", "A customer of the bank, 
 with personal bank accounts.")

      System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")  

      Enterprise_Boundary(b1, "BankBoundary") {
       
        SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")      

        System_Boundary(b2, "BankBoundary2") {  
          System(SystemA, "Banking System A")  
          System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")        
        } 

        System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") 
        SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.") 

        Boundary(b3, "BankBoundary3", "boundary") {  
          SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")        
          SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.") 
        }
      }
    }
      
      BiRel(customerA, SystemAA, "Uses")
      BiRel(SystemAA, SystemE, "Uses")
      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
      Rel(SystemC, customerA, "Sends e-mails to")

      UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
      UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
      UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
      UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
      UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
      
      UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
    

    C4Container
    title Container diagram for Internet Banking System

    System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
    Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")

    Container_Boundary(c1, "Internet Banking") {
        Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
        Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
        Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
        ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
        ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")

    }

    System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

    Rel(customer, web_app, "Uses", "HTTPS")
    UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")     
    Rel(customer, spa, "Uses", "HTTPS")
    UpdateRelStyle(customer, spa, $offsetY="-40")    
    Rel(customer, mobile_app, "Uses")
    UpdateRelStyle(customer, mobile_app, $offsetY="-30") 

    Rel(web_app, spa, "Delivers")
    UpdateRelStyle(web_app, spa, $offsetX="130") 
    Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
    Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
    Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")

    Rel(email_system, customer, "Sends e-mails to")
    UpdateRelStyle(email_system, customer, $offsetX="-45")    
    Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
    UpdateRelStyle(backend_api, email_system, $offsetY="-60")    
    Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
    UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
    

    C4Component
    title Component diagram for Internet Banking System - API Application

    Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
    ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
    System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

    Container_Boundary(api, "API Application") {
        Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
        Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
        Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
        Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")

        Rel(sign, security, "Uses")
        Rel(accounts, mbsfacade, "Uses")
        Rel(security, db, "Read & write to", "JDBC")
        Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
    }

    Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
    Rel(spa, accounts, "Uses", "JSON/HTTPS")

    Rel(ma, sign, "Uses", "JSON/HTTPS")
    Rel(ma, accounts, "Uses", "JSON/HTTPS")

    UpdateRelStyle(spa, sign, $offsetY="-40") 
    UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")

    UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
    UpdateRelStyle(ma, accounts, $offsetY="-40")

        UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10")
        UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
        UpdateRelStyle(security, db, $offsetY="-40")
        UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
    

    C4Dynamic
    title Dynamic diagram for Internet Banking System - API Application

    ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
    Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
    Container_Boundary(b, "API Application") {
      Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
      Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
    }
    Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
    Rel(c2, c3, "Calls isAuthenticated() on")
    Rel(c3, c4, "select * from users where username = ?", "JDBC")

    UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
    UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
    UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
    

    C4Deployment
    title Deployment Diagram for Internet Banking System - Live

    Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
        Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
    }

    Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){
        Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,
 Apple Safari or Microsoft Edge"){
            Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
        }
    }

    Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
        Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
            Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
                Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
            }
        }
        Deployment_Node(bb2, "bigbank-web*** x4", "Ubuntu 16.04 LTS"){
            Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){
                Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.")
            }
        }
        Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){
            Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){
                ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
            }
        }
        Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS") {
            Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c") {
                ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
            }
        }
    }

    Rel(mobile, api, "Makes API calls to", "json/HTTPS")
    Rel(spa, api, "Makes API calls to", "json/HTTPS")
    Rel_U(web, spa, "Delivers to the customer's web browser")
    Rel(api, db, "Reads from and writes to", "JDBC")
    Rel(api, db2, "Reads from and writes to", "JDBC")
    Rel_R(db, db2, "Replicates data to")

    UpdateRelStyle(spa, api, $offsetY="-40")
    UpdateRelStyle(web, spa, $offsetY="-40")
    UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
    UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
    UpdateRelStyle(db, db2, $offsetY="-10")
     

    pie
      title Key elements in Product X
      accDescription This is a pie chart showing the key elements in Product X.
      "Calcium" : 42.96
      "Potassium" : 50.05
      "Magnesium" : 10.01
      "Iron" :  5
    

    gantt
      title Airworks roadmap
      dateFormat YYYY-MM-DD
      axisFormat %m-%d %a
      excludes	weekends, 2021-10-01,2021-10-04,2021-10-05,2021-10-06,2021-10-07
      includes 2021-10-09

      section Airworks 3.4.1
      开发	:b, 2021-10-07, 5d
      测试	:after b, 4d
      OK  :milestore
      section Airworks 3.4.2
      开发	:a, 2021-10-09, 4d
      测试	:after a, 4d
    

    gantt
    title Exclusive end dates (Manual date should end on 3d)
    dateFormat YYYY-MM-DD
    axisFormat %d
    section Section1
    2 Days: 1, 2019-01-01,2d
    Manual Date: 2, 2019-01-01,2019-01-03
    

    gantt
    title Inclusive end dates (Manual date should end on 4th)
    dateFormat YYYY-MM-DD
    axisFormat %d
    inclusiveEndDates
    section Section1
    2 Days: 1, 2019-01-01,2d
    Manual Date: 2, 2019-01-01,2019-01-03
    

    gantt
    title Hide today marker (vertical line should not be visible)
    dateFormat YYYY-MM-DD
    axisFormat %d
    todayMarker off
    section Section1
    Today: 1, -1h
    

    gantt
    title Style today marker (vertical line should be 5px wide and half-transparent blue)
    dateFormat YYYY-MM-DD
    axisFormat %d
    todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
    section Section1
    Today: 1, -1h
    

    graph LR
    sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["

    提交申请
    熊大
    "];
    class sid-B3655226-6C29-4D00-B685-3D5C734DC7E1 node-executed;
    sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A["
    负责人审批
    强子
    "];
    class sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A node-executed;
    sid-E27C0367-E6D6-497F-9736-3CDC21FDE221["
    DBA审批
    强子
    "];
    class sid-E27C0367-E6D6-497F-9736-3CDC21FDE221 node-executed;
    sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD["
    SA审批
    阿美
    "];
    class sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD node-executed;
    sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7["
    主管审批
    光头强
    "];
    class sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7 node-executed;
    sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89["
    DBA确认
    强子
    "];
    class sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89 node-executed;
    sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937["
    SA确认
    阿美
    "];
    class sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937 node-executed;
    sid-4FC27B48-A6F9-460A-A675-021F5854FE22["
    结束
    "];
    class sid-4FC27B48-A6F9-460A-A675-021F5854FE22 node-executed;
    sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E["
    SA执行1
    强子
    "];
    class sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E node-executed;
    sid-6C2120F3-D940-4958-A067-0903DCE879C4["
    SA执行2
    强子
    "];
    class sid-6C2120F3-D940-4958-A067-0903DCE879C4 node-executed;
    sid-9180E2A0-5C4B-435F-B42F-0D152470A338["
    DBA执行1
    强子
    "];
    class sid-9180E2A0-5C4B-435F-B42F-0D152470A338 node-executed;
    sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD["
    DBA执行3
    强子
    "];
    class sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD node-executed;
    sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756["
    DBA执行2
    强子
    "];
    class sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756 node-executed;
    sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93["
    DBA执行4
    强子
    "];
    class sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93 node-executed;
    sid-1897B30A-9C5C-4D5B-B80B-76A038785070["
    负责人确认
    梁静茹
    "];
    class sid-1897B30A-9C5C-4D5B-B80B-76A038785070 node-executed;
    sid-B3655226-6C29-4D00-B685-3D5C734DC7E1-->sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7;
    sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A-->sid-1897B30A-9C5C-4D5B-B80B-76A038785070;
    sid-E27C0367-E6D6-497F-9736-3CDC21FDE221-->sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89;
    sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD-->sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937;
    sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
    sid-9180E2A0-5C4B-435F-B42F-0D152470A338-->sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756;
    sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD-->sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93;
    sid-6C2120F3-D940-4958-A067-0903DCE879C4-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
    sid-1897B30A-9C5C-4D5B-B80B-76A038785070-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
    sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E;
    sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-9180E2A0-5C4B-435F-B42F-0D152470A338;
    sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD;
    sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
    sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
    sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD;
    sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-E27C0367-E6D6-497F-9736-3CDC21FDE221;
    sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
    sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
    sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
    

    graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me thinksssssx
sssssssssssssssssssuuu
tttsssssssssssssssssssssss}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]
    

    graph TD
    A[/Christmas\]
    A -->|Get money| B[\Go shopping/]
    B --> C{Let me thinksssss
ssssssssssssssssssssss
sssssssssssssssssssssssssss}
    C -->|One| D[/Laptop/]
    C -->|Two| E[\iPhone\]
    C -->|Three| F[Car]
    

    graph LR
    47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
    37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
    35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary)
    41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary)
    44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary)
    46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary)
    40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary)
    38(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary)
    43(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)
    42(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)
    45(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)
    35(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)
    41(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)
    41(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)
    39(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)
    39(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)
    39(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)
    39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
    35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
    36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
    

    graph TD
    9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
    82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
    db052290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 2")
    4e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 1")
    30122290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 2")
    5e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 1")
    c1112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 2")
    b7042290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SupportDb]")
    8f102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[DevelopmentDb]")
    0e102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[TestDb]")
    07132290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SharedReportingDb]")
    c7072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Business Logic Server")
    ca122290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Report Server")
    68102290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Dedicated Test Business Logic Server")
    f4112290_1ec3_e711_8c5a_005056ad0002("fa:fa-database [DBServer\SharedDbInstance]")
    d6072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server DBServer")
    71082290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:MSSQLSERVER")
    c0102290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLAgent")
    9a072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLBrowser")
    1d0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost1")
    200a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost2")
    1c0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost3")
    9e122290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
    9e122290_1ec3_e711_8c5a_005056ad0002-->db052290_1ec3_e711_8c5a_005056ad0002
    9e122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
    9e122290_1ec3_e711_8c5a_005056ad0002-->30122290_1ec3_e711_8c5a_005056ad0002
    9e122290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
    9e122290_1ec3_e711_8c5a_005056ad0002-->c1112290_1ec3_e711_8c5a_005056ad0002
    82072290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
    82072290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
    82072290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
    82072290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
    db052290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
    db052290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
    4e112290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
    4e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
    4e112290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
    4e112290_1ec3_e711_8c5a_005056ad0002-->07132290_1ec3_e711_8c5a_005056ad0002
    4e112290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
    30122290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
    30122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
    5e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
    5e112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
    c1112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
    c1112290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
    b7042290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
    8f102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
    0e102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
    07132290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
    c7072290_1ec3_e711_8c5a_005056ad0002-->1d0a2290_1ec3_e711_8c5a_005056ad0002
    ca122290_1ec3_e711_8c5a_005056ad0002-->200a2290_1ec3_e711_8c5a_005056ad0002
    68102290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
    f4112290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
    f4112290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
    f4112290_1ec3_e711_8c5a_005056ad0002-->c0102290_1ec3_e711_8c5a_005056ad0002
    f4112290_1ec3_e711_8c5a_005056ad0002-->9a072290_1ec3_e711_8c5a_005056ad0002
    d6072290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
    71082290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
    c0102290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
    c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
    9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
    9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
    

    graph TB
    subgraph One
    a1-->a2
    end
    

    graph TB
    A
    B
    subgraph foo[Foo SubGraph]
    C
    D
    end
    subgraph bar[Bar SubGraph]
    E
    F
    end
    G

    A-->B
    B-->C
    C-->D
    B-->D
    D-->E
    E-->A
    E-->F
    F-->D
    F-->G
    B-->G
    G-->D

    style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
    style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
    

    graph LR
    456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
    f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
    81dc9bdb52d04dc20036dbd8313ed055[1234 CCC fa:fa-check]
    456ac9b0d15a8b7f1e71073221059886 -->|Node| f7f580e11d00a75814d2ded41fe8e8fe
    f7f580e11d00a75814d2ded41fe8e8fe -->|Node| 81dc9bdb52d04dc20036dbd8313ed055
    click 456ac9b0d15a8b7f1e71073221059886 "/admin/user/view?id=1051" "AAA
    6000"
    click f7f580e11d00a75814d2ded41fe8e8fe "/admin/user/view?id=1141" "BBB
    600"
    click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
    3000"
    style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
    

    graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{{Let me think...
Do I want something for work,
something to spend every free second with,
or something to get around?}}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]
    click A "index.html#link-clicked" "link test"
    click B testClick "click test"
    classDef someclass fill:#f96;
    class A someclass;
    class C someclass;
    

    graph TD
    A([stadium shape test])
    A -->|Get money| B([Go shopping])
    B --> C([Let me think...
Do I want something for work,
something to spend every free second with,
or something to get around?])
    C -->|One| D([Laptop])
    C -->|Two| E([iPhone])
    C -->|Three| F([Car
wroom wroom])
    click A "index.html#link-clicked" "link test"
    click B testClick "click test"
    classDef someclass fill:#f96;
    class A someclass;
    class C someclass;
    

    graph LR
    A[[subroutine shape test]]
    A -->|Get money| B[[Go shopping]]
    B --> C[[Let me think...
Do I want something for work,
something to spend every free second with,
or something to get around?]]
    C -->|One| D[[Laptop]]
    C -->|Two| E[[iPhone]]
    C -->|Three| F[[Car
wroom wroom]]
    click A "index.html#link-clicked" "link test"
    click B testClick "click test"
    classDef someclass fill:#f96;
    class A someclass;
    class C someclass;
    

    graph LR
    A[(cylindrical
shape
test)]
    A -->|Get money| B1[(Go shopping 1)]
    A -->|Get money| B2[(Go shopping 2)]
    A -->|Get money| B3[(Go shopping 3)]
    C[(Let me think...
Do I want something for work,
something to spend every free second with,
or something to get around?)]
    B1 --> C
    B2 --> C
    B3 --> C
    C -->|One| D[(Laptop)]
    C -->|Two| E[(iPhone)]
    C -->|Three| F[(Car)]
    click A "index.html#link-clicked" "link test"
    click B testClick "click test"
    classDef someclass fill:#f96;
    class A someclass;
    

    graph LR
    A1[Multi
Line] -->|Multi
Line| B1(Multi
Line)
    C1[Multi
Line] -->|Multi
Line| D1(Multi
Line)
    E1[Multi
Line] -->|Multi
Line| F1(Multi
Line)
    A2[Multi
Line] -->|Multi
Line| B2(Multi
Line)
    C2[Multi
Line] -->|Multi
Line| D2(Multi
Line)
    E2[Multi
Line] -->|Multi
Line| F2(Multi
Line)
    linkStyle 0 stroke:DarkGray,stroke-width:2px
    linkStyle 1 stroke:DarkGray,stroke-width:2px
    linkStyle 2 stroke:DarkGray,stroke-width:2px
    

    graph LR
    A(( )) -->|step 1| B(( ))
    B(( )) -->|step 2| C(( ))
    C(( )) -->|step 3| D(( ))
    linkStyle 1 stroke:greenyellow,stroke-width:2px
    style C fill:greenyellow,stroke:green,stroke-width:4px
    

    graph TB
    TITLE["Link Click Events
(click the nodes below)"]
    A["link test (open in same tab)"]
    B["link test (open in new tab)"]
    C[anchor test]
    D[mailto test]
    E[other protocol test]
    F[script test]
    TITLE --> A & B & C & D & E & F
    click A "https://mermaid-js.github.io/mermaid/#/" "link test (open in same tab)"
    click B "https://mermaid-js.github.io/mermaid/#/" "link test (open in new tab)" _blank
    click C "#link-clicked"
    click D "mailto:user@user.user" "mailto test"
    click E "notes://do-your-thing/id" "other protocol test"
    click F "javascript:alert('test')" "script test"
    

    graph LR
    A[red
text] -->|red
text| B(blue
text)
    C[/red
text/] -->|blue
text| D{blue
text}
    E{{default
style}} -->|default
style| F([default
style])
    linkStyle default color:Sienna;
    linkStyle 0 color:red;
    linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
    style A color:red;
    style B color:blue;
    style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
    style D stroke:#0000ff,fill:#ccccff,color:#0000ff
    click B "index.html#link-clicked" "link test"
    click D testClick "click test"
    

    graph TD
    A[myClass1] --> B[default] & C[default]
    B[default] & C[default] --> D[myClass2]
    classDef default stroke-width:2px,fill:none,stroke:silver
    classDef node color:red
    classDef myClass1 color:#0000ff
    classDef myClass2 stroke:#0000ff,fill:#ccccff
    class A myClass1
    class D myClass2
    

    sequenceDiagram
    accDescription Hello friends
    participant Alice
    participant Bob
    participant John as John
Second Line
    rect rgb(200, 220, 100)
    rect rgb(200, 255, 200)
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    end
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: John thinks a long
long time, so long
that the text does
not fit on a row.
    Bob-->Alice: Checking with John...
    Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
    Bob-x John: Hey John - we're still waiting to know
how you're doing
    Note over John:nowrap: John's trying hard not to break his train of thought.
    Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
    Note over John: After a few more moments, John
finally snaps out of it.
    end
    alt either this
    Alice->>John: Yes
    else or this
    Alice->>John: No
    else or this will happen
    Alice->John: Maybe
    end
    par this happens in parallel
    Alice -->> Bob: Parallel message 1
    and
    Alice -->> John: Parallel message 2
    end
    

    sequenceDiagram
    participant 1 as multiline
using #lt;br#gt;
    participant 2 as multiline
using #lt;br/#gt;
    participant 3 as multiline
using #lt;br /#gt;
    participant 4 as multiline
using #lt;br /#gt;
    1->>2: multiline
using #lt;br#gt;
    note right of 2: multiline
using #lt;br#gt;
    2->>3: multiline
using #lt;br/#gt;
    note right of 3: multiline
using #lt;br/#gt;
    3->>4: multiline
using #lt;br /#gt;
    note right of 4: multiline
using #lt;br /#gt;
    4->>1: multiline
using #lt;br /#gt;
    note right of 1: multiline
using #lt;br /#gt;
    

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

    gantt
    dateFormat YYYY-MM-DD
    axisFormat %d/%m
    title Adding GANTT diagram to mermaid
    excludes weekdays 2014-01-10

    section A section
    Completed task :done, des1, 2014-01-06,2014-01-08
    Active task :active, des2, 2014-01-09, 3d
    Future task : des3, after des2, 5d
    Future task2 : des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison :crit, done, after des1, 2d
    Create tests for parser :crit, active, 3d
    Future task in critical line :crit, 5d
    Create tests for renderer :2d
    Add to mermaid :1d

    section Documentation
    Describe gantt syntax :active, a1, after des1, 3d
    Add gantt diagram to demo page :after a1 , 20h
    Add another diagram to demo page :doc1, after a1 , 48h

    section Clickable
    Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10
    Calling a Callback (look at the console log) :cl2, after cl1, 3d

    click cl1 href "https://mermaidjs.github.io/"
    click cl2 call ganttTestClick("test", test, test)

    section Last section
    Describe gantt syntax :after doc1, 3d
    Add gantt diagram to demo page : 20h
    Add another diagram to demo page : 48h
    

    gantt
    dateFormat YYYY-MM-DD
    axisFormat %d/%m
    title GANTT diagram with multiline section titles
    excludes weekdays 2014-01-10

    section A section
multiline
    Completed task : done, des1, 2014-01-06,2014-01-08
    Active task : active, des2, 2014-01-09, 3d
    Future task : des3, after des2, 5d
    Future task2 : des4, after des3, 5d

    section Critical tasks
multiline
    Completed task in the critical line : crit, done, 2014-01-06, 24h
    Implement parser and jison : crit, done, after des1, 2d
    Create tests for parser : crit, active, 3d
    Future task in critical line : crit, 5d
    Create tests for renderer : 2d
    Add to mermaid : 1d

    section Documentation
multiline
    Describe gantt syntax : active, a1, after des1, 3d
    Add gantt diagram to demo page : after a1, 20h
    Add another diagram to demo page : doc1, after a1, 48h

    section Last section
multiline
    Describe gantt syntax : after doc1, 3d
    Add gantt diagram to demo page : 20h
    Add another diagram to demo page : 48h
    

    gitGraph:
    options
    {
    "nodeSpacing": 50, 
    "nodeRadius": 5
    }
    end
    branch master
    commit
    branch newbranch
    checkout newbranch
    commit
    commit
    checkout master
    commit
    commit
    merge newbranch
    

    classDiagram
    Class01 <|-- AveryLongClass : Cool

    <<interface>> Class01
    Class03 "0" *-- "0..n" Class04
    Class05 "1" o-- "many" Class06
    Class07 .. Class08
    Class09 "many" --> "1" C2 : Where am i?
    Class09 "0" --* "1..n" C3
    Class09 --|> Class07
    Class07 : equals()
    Class07 : Object[] elementData
    Class01 : #size()
    Class01 : -int chimp
    Class01 : +int gorilla
    Class08 <--> C2: Cool label
      class Class10 {
      <<service>>
      int id
      size()
      }
    

    classDiagram
    class Class01~T~
    Class01 : #size()
    Class01 : -int chimp
    Class01 : +int gorilla
    class Class10~T~ {
    <<service>>
    int id
    size()
    }
    

    classDiagram
    Class01~T~ <|-- AveryLongClass : Cool
    <<interface>> Class01
    Class03~T~ "0" *-- "0..n" Class04
    Class05 "1" o-- "many" Class06
    Class07~T~ .. Class08
    Class09 "many" --> "1" C2 : Where am i?
      Class09 "0" --* "1..n" C3
      Class09 --|> Class07
      Class07 : equals()
      Class07 : Object[] elementData
      Class01 : #size()
      Class01 : -int chimp
      Class01 : +int gorilla
      Class08 <--> C2: Cool label
        class Class10 {
        <<service>>
        int id
        size()
        }
    

    classDiagram
    Interface1 ()-- Interface1Impl
    

    classDiagram 
    direction LR
    Animal ()-- Dog
    Dog : bark()
    Dog : species()
    

    classDiagram 
    direction RL
    Fruit ()-- Apple
    Apple : color()
    Apple : -int leafCount()
    Fruit ()-- Pineapple
    Pineapple : color()
    Pineapple : -int leafCount()
    Pineapple : -int spikeCount()
    

    stateDiagram
    accDescription This is a state diagram showing one state
    State1
    

    stateDiagram
    [*] --> First
    state First {
    [*] --> second
    second --> [*]
    }
    

    stateDiagram
    State1: The state with a note
    note right of State1
    Important information! You can write
    notes.
    end note
    State1 --> State2
    note left of State2 : This is the note to the left.
    

    stateDiagram
    State1
    note right of State1
    Line1
Line2
Line3
Line4
Line5
    end note
    

    requirementDiagram

    requirement An Example {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    functionalRequirement Random Name {
    id: 1.1
    text: the second test text.
    risk: low
    verifymethod: inspection
    }

    performanceRequirement Something Else {
    id: 1.2
    text: the third test text.
    risk: medium
    verifymethod: demonstration
    }

    interfaceRequirement test_req4 {
    id: 1.2.1
    text: the fourth test text.
    risk: medium
    verifymethod: analysis
    }

    physicalRequirement test_req5 {
    id: 1.2.2
    text: the fifth test text.
    risk: medium
    verifymethod: analysis
    }

    designConstraint test_req6 {
    id: 1.2.3
    text: really long text to test overflow. really long text to test overflow. really long text to test overflow.
    risk: medium
    verifymethod: analysis
    }

    element test_entity {
    type: simulation
    }

    element test_entity2 {
    type: word doc
    docRef: reqs/test_entity
    }

    element test_entity3 {
    type: "test suite"
    docRef: github.com/all_the_tests
    }


    test_entity - satisfies -> Random Name
    An Example - traces -> Random Name
    An Example - contains -> Something Else
    Something Else - contains -> test_req4
    test_req4 - derives -> test_req5
    test_req5 - refines -> test_req6
    test_entity3 - verifies -> test_req5
    An Example <- copies - test_entity2
    

Anchor for "link-clicked" test