Mermaid学习教程,Mermaid画流程图,Mermaid语法讲解,Mermaid使用方法介绍,Mermaid中文参考文档,Mermaid绘图步骤

C4 图表

C4 图:这是目前的实验图。语法和属性在未来的版本中可能会发生变化。当语法稳定时,将提供适当的文档。

Code Chart 的 c4 图表语法与 plantUML 兼容。请参见下面的示例:

    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, <br/> 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")


<<person>>Banking Customer AA customer of the bank, with personal bank accounts.<<person>>Banking Customer B<<external_person>>Banking Customer Cdesc<<person>>Banking Customer DA customer of the bank, with personal bank accounts.<<system>>Internet Banking SystemAllows customers to view information about their bank accounts, and make payments.<<external_system_db>>Mainframe Banking SystemStores all of the core banking information about customers, accounts, transactions, etc.<<external_system>>E-mail systemThe internal Microsoft Exchange e-mail system.<<system_db>>Banking System D DatabaseA system of the bank, with personal bank accounts.<<system>>Banking System A<<system>>Banking System BA system of the bank, with personal bank accounts. next line.BankBoundary2[ENTERPRISE]<<system_queue>>Banking System F QueueA system of the bank.<<external_system_queue>>Banking System G QueueA system of the bank, with personal bank accounts.BankBoundary3[boundary]BankBoundary[ENTERPRISE]BankBoundary0[ENTERPRISE]UsesUsesSends e-mails[SMTP]Sends e-mails toSystem Context diagram for Internet Banking System

示例见源代码 demos/index.html

支持 5 种类型的 C4 图表。

  • System Context (C4Context)
  • Container diagram (C4Container)
  • Component diagram (C4Component)
  • Dynamic diagram (C4Dynamic)
  • Deployment diagram (C4Deployment)

C4图是固定样式,比如css颜色,所以不同皮肤下不提供不同的css。updateElementStyle 和 UpdateElementStyle 写在图的最后一部分。updateElementStyle 与原始定义不一致,更新关系的样式,包括文本标签相对于原始位置的偏移量。

布局不使用全自动布局算法。形状的位置是通过改变语句的书写顺序来调整的。所以没有计划支持以下 Layout 语句。可以使用 UpdateLayoutConfig 调整每行的形状数和边界数。

  • Layout
    • Lay_U, Lay_Up
    • Lay_D, Lay_Down
    • Lay_L, Lay_Left
    • Lay_R, Lay_Right

短期内不支持以下未完成的功能。

  • sprite

  • tags

  • link

  • Legend

  • System Context

  • Container diagram

  • Component diagram

  • Dynamic diagram

  • Deployment diagram

  • Relationship Types

有两种方法可以用问号分配参数。一种是按参数顺序使用非命名参数赋值方法,另一种是命名参数赋值方法,其中名称必须以$符号开头。

示例:UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY)

UpdateRelStyle(customerA, bankA, "red", "blue", "-40", "60")
UpdateRelStyle(customerA, bankA, $offsetX="-40", $offsetY="60", $lineColor="blue", $textColor="red")
UpdateRelStyle(customerA, bankA, $offsetY="60")

C4系统上下文图(C4Context)

    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, <br/> 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")

<<person>>Banking Customer AA customer of the bank, with personal bank accounts.<<person>>Banking Customer B<<external_person>>Banking Customer Cdesc<<person>>Banking Customer DA customer of the bank, with personal bank accounts.<<system>>Internet Banking SystemAllows customers to view information about their bank accounts, and make payments.<<external_system_db>>Mainframe Banking SystemStores all of the core banking information about customers, accounts, transactions, etc.<<external_system>>E-mail systemThe internal Microsoft Exchange e-mail system.<<system_db>>Banking System D DatabaseA system of the bank, with personal bank accounts.<<system>>Banking System A<<system>>Banking System BA system of the bank, with personal bank accounts. next line.BankBoundary2[ENTERPRISE]<<system_queue>>Banking System F QueueA system of the bank.<<external_system_queue>>Banking System G QueueA system of the bank, with personal bank accounts.BankBoundary3[boundary]BankBoundary[ENTERPRISE]BankBoundary0[ENTERPRISE]UsesUsesSends e-mails[SMTP]Sends e-mails toSystem Context diagram for Internet Banking System

C4容器图(C4Container)

    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 cutomers 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") 

<<external_system>>E-Mail SystemThe internal Microsoft Exchange system<<person>>CustomerA customer of the bank, with personal bank accounts<<external_system>>Mainframe Banking SystemStores all of the core banking information about customers, accounts, transactions, etc.<<container>>Single-Page AppProvides all the Internet banking functionality to cutomers via their web browser<<external_container>>Mobile AppProvides a limited subset of the Internet banking functionality to customers via their mobile device<<container>>Web ApplicationDelivers the static content and the Internet banking SPA<<container_db>>DatabaseStores user registration information, hashed auth credentials, access logs, etc.<<external_container_db>>API ApplicationProvides Internet banking functionality via APIInternet Banking[CONTAINER]Uses[HTTPS]Uses[HTTPS]UsesDeliversUses[async, JSON/HTTPS]Uses[async, JSON/HTTPS]Reads from and writes to[sync, JDBC]Sends e-mails toSends e-mails using[sync, SMTP]Uses[sync/async, XML/HTTPS]Container diagram for Internet Banking System

C4组件图(C4Component)

    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")

<<container>>Single Page ApplicationProvides all the internet banking functionality to customers via their web browser.<<container>>Mobile AppProvides a limited subset ot the internet banking functionality to customers via their mobile mobile device.<<container_db>>DatabaseStores user registration information, hashed authentication credentials, access logs, etc.<<external_system>>Mainframe Banking SystemStores all of the core banking information about customers, accounts, transactions, etc.<<component>>Sign In ControllerAllows users to sign in to the internet banking system<<component>>Accounts Summary ControllerProvides customers with a summary of their bank accounts<<component>>Security ComponentProvides functionality related to singing in, changing passwords, etc.<<component>>Mainframe Banking System FacadeA facade onto the mainframe banking system.API Application[CONTAINER]UsesUsesRead & write to[JDBC]Uses[XML/HTTPS]Uses[JSON/HTTPS]Uses[JSON/HTTPS]Uses[JSON/HTTPS]Uses[JSON/HTTPS]Component diagram for Internet Banking System - API Application

C4动态图(C4Dynamic)

    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")

<<container_db>>DatabaseStores user registration information, hashed authentication credentials, access logs, etc.<<container>>Single-Page ApplicationProvides all of the Internet banking functionality to customers via their web browser.<<component>>Security ComponentProvides functionality Related to signing in, changing passwords, etc.<<component>>Sign In ControllerAllows users to sign in to the Internet Banking System.API Application[CONTAINER]1: Submits credentials to[JSON/HTTPS]2: Calls isAuthenticated() on3: select * from users where username = ?[JDBC]Dynamic diagram for Internet Banking System - API Application

C4部署图(C4Deployment)

    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,<br/> 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")

<<container>>Mobile AppProvides a limited subset of the Internet Banking functionality to customers via their mobile device.Customer's mobile device[Apple IOS or Android]<<container>>Single Page ApplicationProvides all of the Internet Banking functionality to customers via their web browser.Web Browser[Google Chrome, Mozilla Firefox, Apple Safari or Microsoft Edge]Customer's computer[Mircosoft Windows or Apple macOS]<<container>>API ApplicationProvides Internet Banking functionality via a JSON/HTTPS API.Apache Tomcat[Apache Tomcat 8.x]bigbank-api*** x8[Ubuntu 16.04 LTS]<<container>>Web ApplicationDelivers the static content and the Internet Banking single page application.Apache Tomcat[Apache Tomcat 8.x]bigbank-web*** x4[Ubuntu 16.04 LTS]<<container_db>>DatabaseStores user registration information, hashed authentication credentials, access logs, etc.Oracle - Primary[Oracle 12c]bigbank-db01[Ubuntu 16.04 LTS]<<container_db>>DatabaseStores user registration information, hashed authentication credentials, access logs, etc.Oracle - Secondary[Oracle 12c]bigbank-db02[Ubuntu 16.04 LTS]Big Bank plc[Big Bank plc data center]Makes API calls to[json/HTTPS]Makes API calls to[json/HTTPS]Delivers to the customer's web browserReads from and writes to[JDBC]Reads from and writes to[JDBC]Replicates data toDeployment Diagram for Internet Banking System - Live