Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Info

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

Confluence mermaid macro
downloadtrue
searchTextC4Context title System Context diagram for Internet Banking System Enterprise_Boundary b0 Bank Boundary Person customerA Banking Customer customer of the bank with personal bank accounts Enterprise_Boundary b1 Bank Boundary System SystemA Internet Banking System Allows customers to view information about their bank accounts and make payments Enterprise_Boundary c1 BankBoundary 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 offsetY 30 UpdateRelStyle SystemA SystemB textColor blue lineColor blue offsetX offsetY 30
downloadtrue
fullscreentrue
panZoomtrue
zoom
themedefault
disableUseMaxWidth
copytrue
exportWidth
height
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")

...