View Source

The demo shown below was taken from the official Mermaid documentation.

C4Context
  title System Context diagram for Internet Banking System
  Enterprise_Boundary(b0, "Bank Boundary 0") {
    Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
    Enterprise_Boundary(b1, "Bank Boundary 1") {
      System(SystemA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
      Enterprise_Boundary(c1, "BankBoundary 2") {
        SystemDb_Ext(SystemB, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
      }
    }
  }

  BiRel(customerA, SystemA, "Uses")
  BiRel(SystemA, SystemB, "Uses")

  UpdateRelStyle(customerA, SystemA, $textColor="blue", $lineColor="blue", $offsetX="0" $offsetY="-30")
  UpdateRelStyle(SystemA, SystemB, $textColor="blue", $lineColor="blue", $offsetX="0" $offsetY="-30")

Textual representation

C4Context
  title System Context diagram for Internet Banking System
  Enterprise_Boundary(b0, "Bank Boundary 0") {
    Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
    Enterprise_Boundary(b1, "Bank Boundary 1") {
      System(SystemA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
      Enterprise_Boundary(c1, "BankBoundary 2") {
        SystemDb_Ext(SystemB, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
      }
    }
  }

  BiRel(customerA, SystemA, "Uses")
  BiRel(SystemA, SystemB, "Uses")

  UpdateRelStyle(customerA, SystemA, $textColor="blue", $lineColor="blue", $offsetX="0" $offsetY="-30")
  UpdateRelStyle(SystemA, SystemB, $textColor="blue", $lineColor="blue", $offsetX="0" $offsetY="-30")

^{The code above is rendered by "}^{Prism Syntax Highlighter for Confluence}^{" which supports highlighting Mermaid syntax.}

👉 Check out the official Mermaid documentation here https://mermaid.js.org/syntax/c4c.html.