GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Remove "Edit this page"

Browse Source
This commit is contained in:
Sidharth Vinod 2022-09-03 12:21:42 +05:30
parent 0a3042322f
commit 42a2cabc7b
No known key found for this signature in database
GPG Key ID: FB5CCD378D3907CD
20 changed files with 881 additions and 879 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
docs/README.md
View File

@ -9,8 +9,6 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins
<img src="img/header.png" alt="" />
<!-- **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/README.md) -->
[![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat\&color=9cf\&logo=slack\&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
<!-- Mermaid book banner -->
@ -19,7 +17,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins
<!-- <Main description> -->
Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.
Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.
> Doc-Rot is a Catch-22 that Mermaid helps to solve.
@ -204,7 +202,8 @@ To Deploy Mermaid:
```html
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});
<script>
mermaid.initialize({ startOnLoad: true });
</script>
```
@ -293,7 +292,7 @@ Detailed information about how to contribute can be found in the [contribution g
For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitise the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing JavaScript in the code from being executed. This is a great step forward for better security.
As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing JavaScript in the code from being executed. This is a great step forward for better security.
*Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code.*
@ -305,9 +304,7 @@ To report a vulnerability, please e-mail security@mermaid.live with a descriptio
A quick note from Knut Sveidqvist:
> *Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!*
> *Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering.*
> *Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017.*
> *Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!* >*Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering.* >*Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017.*
>
> *Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!*

9
docs/accessibility.md
View File

@ -1,8 +1,6 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Accessibility Options
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/accessibility.md)
## Accessibility
Now with Mermaid library in much wider use, we have started to work towards more accessible features, based on the feedback from the community.
@ -20,7 +18,7 @@ The diagram authors can now add the accessibility options in the diagram definit
* `accTitle: "Your Accessibility Title"` or
* `accDescr: "Your Accessibility Description"`
**When these two options are defined, they will add a coressponding `<title>` and `<desc>` tag in the SVG.**
**When these two options are defined, they will add a coressponding `<title>` and `<desc>` tag in the SVG.**
Let us take a look at the following example with a flowchart diagram:
@ -56,10 +54,7 @@ You can also define the accessibility options in a multi-line format, where the
vs
`accDescr: {
My multi-line description
of the diagram
}` (***multi-line format***)
`accDescr: { My multi-line description of the diagram }` (***multi-line format***)
Let us look at it in the following example, with same flowchart:

254
docs/c4c.md
View File

@ -1,8 +1,6 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# C4 Diagrams
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/gitgraph.md)
> C4 Diagram: This is an experimental diagram for now. The syntax and properties can change in future releases. Proper documentation will be provided when the syntax is stable.
Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
@ -12,32 +10,32 @@ Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
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(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.")
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.")
}
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
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.")
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.")
}
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.")
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")
@ -48,7 +46,7 @@ Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
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")
@ -59,32 +57,32 @@ Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
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(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.")
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.")
}
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
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.")
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.")
}
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.")
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")
@ -95,7 +93,7 @@ Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
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")
@ -135,91 +133,91 @@ The following unfinished features are not supported in the short term.
* \[ ] Legend
* \[X] System Context
* \[x] System Context
* * \[X] Person(alias, label, ?descr, ?sprite, ?tags, $link)
* * \[x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
* * \[X] Person\_Ext
* * \[x] Person\_Ext
* * \[X] System(alias, label, ?descr, ?sprite, ?tags, $link)
* * \[x] System(alias, label, ?descr, ?sprite, ?tags, $link)
* * \[X] SystemDb
* * \[x] SystemDb
* * \[X] SystemQueue
* * \[x] SystemQueue
* * \[X] System\_Ext
* * \[x] System\_Ext
* * \[X] SystemDb\_Ext
* * \[x] SystemDb\_Ext
* * \[X] SystemQueue\_Ext
* * \[x] SystemQueue\_Ext
* * \[X] Boundary(alias, label, ?type, ?tags, $link)
* * \[x] Boundary(alias, label, ?type, ?tags, $link)
* * \[X] Enterprise\_Boundary(alias, label, ?tags, $link)
* * \[x] Enterprise\_Boundary(alias, label, ?tags, $link)
* * \[X] System\_Boundary
* * \[x] System\_Boundary
* \[X] Container diagram
* \[x] Container diagram
* * \[X] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
* * \[x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
* * \[X] ContainerDb
* * \[x] ContainerDb
* * \[X] ContainerQueue
* * \[x] ContainerQueue
* * \[X] Container\_Ext
* * \[x] Container\_Ext
* * \[X] ContainerDb\_Ext
* * \[x] ContainerDb\_Ext
* * \[X] ContainerQueue\_Ext
* * \[x] ContainerQueue\_Ext
* * \[X] Container\_Boundary(alias, label, ?tags, $link)
* * \[x] Container\_Boundary(alias, label, ?tags, $link)
* \[X] Component diagram
* \[x] Component diagram
* * \[X] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
* * \[x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
* * \[X] ComponentDb
* * \[x] ComponentDb
* * \[X] ComponentQueue
* * \[x] ComponentQueue
* * \[X] Component\_Ext
* * \[x] Component\_Ext
* * \[X] ComponentDb\_Ext
* * \[x] ComponentDb\_Ext
* * \[X] ComponentQueue\_Ext
* * \[x] ComponentQueue\_Ext
* \[X] Dynamic diagram
* \[x] Dynamic diagram
* * \[X] RelIndex(index, from, to, label, ?tags, $link)
* * \[x] RelIndex(index, from, to, label, ?tags, $link)
* \[X] Deployment diagram
* \[x] Deployment diagram
* * \[X] Deployment\_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
* * \[x] Deployment\_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
* * \[X] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment\_Node()
* * \[x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment\_Node()
* * \[X] Node\_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
* * \[x] Node\_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
* * \[X] Node\_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
* * \[x] Node\_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
* \[X] Relationship Types
* \[x] Relationship Types
* * \[X] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
* * \[x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
* * \[X] BiRel (bidirectional relationship)
* * \[x] BiRel (bidirectional relationship)
* * \[X] Rel\_U, Rel\_Up
* * \[x] Rel\_U, Rel\_Up
* * \[X] Rel\_D, Rel\_Down
* * \[x] Rel\_D, Rel\_Down
* * \[X] Rel\_L, Rel\_Left
* * \[x] Rel\_L, Rel\_Left
* * \[X] Rel\_R, Rel\_Right
* * \[x] Rel\_R, Rel\_Right
* * \[X] Rel\_Back
* * \[x] Rel\_Back
* * \[X] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
* * \[x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
* \[ ] Custom tags/stereotypes support and skinparam updates
@ -227,9 +225,9 @@ The following unfinished features are not supported in the short term.
* * \[ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
* * \[X] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
* * \[x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
* * \[X] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
* * \[x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
* * \[ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
@ -241,7 +239,7 @@ The following unfinished features are not supported in the short term.
* * \[ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
* * \[X] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2).
* * \[x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2).
There are two ways to assign parameters with question marks. One uses the non-named parameter assignment method in the order of the parameters, and the other uses the named parameter assignment method, where the name must start with a $ symbol.
@ -261,32 +259,32 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
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(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.")
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.")
}
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
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.")
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.")
}
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.")
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")
@ -297,7 +295,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
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")
```
@ -307,32 +305,32 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
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(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.")
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.")
}
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
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.")
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.")
}
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.")
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")
@ -343,7 +341,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
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")
```
@ -369,24 +367,24 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
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")
UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")
Rel(customer, spa, "Uses", "HTTPS")
UpdateRelStyle(customer, spa, $offsetY="-40")
UpdateRelStyle(customer, spa, $offsetY="-40")
Rel(customer, mobile_app, "Uses")
UpdateRelStyle(customer, mobile_app, $offsetY="-30")
UpdateRelStyle(customer, mobile_app, $offsetY="-30")
Rel(web_app, spa, "Delivers")
UpdateRelStyle(web_app, spa, $offsetX="130")
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")
UpdateRelStyle(email_system, customer, $offsetX="-45")
Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
UpdateRelStyle(backend_api, email_system, $offsetY="-60")
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")
UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
```
@ -409,24 +407,24 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
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")
UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")
Rel(customer, spa, "Uses", "HTTPS")
UpdateRelStyle(customer, spa, $offsetY="-40")
UpdateRelStyle(customer, spa, $offsetY="-40")
Rel(customer, mobile_app, "Uses")
UpdateRelStyle(customer, mobile_app, $offsetY="-30")
UpdateRelStyle(customer, mobile_app, $offsetY="-30")
Rel(web_app, spa, "Delivers")
UpdateRelStyle(web_app, spa, $offsetX="130")
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")
UpdateRelStyle(email_system, customer, $offsetX="-45")
Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
UpdateRelStyle(backend_api, email_system, $offsetY="-60")
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")
UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
```
@ -459,7 +457,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
Rel(ma, sign, "Uses", "JSON/HTTPS")
Rel(ma, accounts, "Uses", "JSON/HTTPS")
UpdateRelStyle(spa, sign, $offsetY="-40")
UpdateRelStyle(spa, sign, $offsetY="-40")
UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
@ -499,7 +497,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
Rel(ma, sign, "Uses", "JSON/HTTPS")
Rel(ma, accounts, "Uses", "JSON/HTTPS")
UpdateRelStyle(spa, sign, $offsetY="-40")
UpdateRelStyle(spa, sign, $offsetY="-40")
UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")

2
docs/directives.md
View File

@ -1,8 +1,6 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Directives
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/directives.md)
## Directives
Directives gives a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.

40
docs/entityRelationshipDiagram.md
View File

@ -1,11 +1,9 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Entity Relationship Diagrams
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/entityRelationshipDiagram.md)
> An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types). Wikipedia.
Note that practitioners of ER modelling almost always refer to *entity types* simply as *entities*. For example the `CUSTOMER` entity *type* would be referred to simply as the `CUSTOMER` entity. This is so common it would be inadvisable to do anything else, but technically an entity is an abstract *instance* of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them. This is why entities are always named using singular nouns.
Note that practitioners of ER modelling almost always refer to *entity types* simply as *entities*. For example the `CUSTOMER` entity *type* would be referred to simply as the `CUSTOMER` entity. This is so common it would be inadvisable to do anything else, but technically an entity is an abstract *instance* of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them. This is why entities are always named using singular nouns.
Mermaid can render ER diagrams
@ -25,9 +23,9 @@ erDiagram
Entity names are often capitalised, although there is no accepted standard on this, and it is not required in Mermaid.
Relationships between entities are represented by lines with end markers representing cardinality. Mermaid uses the most popular crow's foot notation. The crow's foot intuitively conveys the possibility of many instances of the entity that it connects to.
Relationships between entities are represented by lines with end markers representing cardinality. Mermaid uses the most popular crow's foot notation. The crow's foot intuitively conveys the possibility of many instances of the entity that it connects to.
ER diagrams can be used for various purposes, ranging from abstract logical models devoid of any implementation details, through to physical models of relational database tables. It can be useful to include attribute definitions on ER diagrams to aid comprehension of the purpose and meaning of entities. These do not necessarily need to be exhaustive; often a small subset of attributes is enough. Mermaid allows them to be defined in terms of their *type* and *name*.
ER diagrams can be used for various purposes, ranging from abstract logical models devoid of any implementation details, through to physical models of relational database tables. It can be useful to include attribute definitions on ER diagrams to aid comprehension of the purpose and meaning of entities. These do not necessarily need to be exhaustive; often a small subset of attributes is enough. Mermaid allows them to be defined in terms of their *type* and *name*.
```mermaid-example
erDiagram
@ -69,20 +67,20 @@ erDiagram
}
```
When including attributes on ER diagrams, you must decide whether to include foreign keys as attributes. This probably depends on how closely you are trying to represent relational table structures. If your diagram is a *logical* model which is not meant to imply a relational implementation, then it is better to leave these out because the associative relationships already convey the way that entities are associated. For example, a JSON data structure can implement a one-to-many relationship without the need for foreign key properties, using arrays. Similarly an object-oriented programming language may use pointers or references to collections. Even for models that are intended for relational implementation, you might decide that inclusion of foreign key attributes duplicates information already portrayed by the relationships, and does not add meaning to entities. Ultimately, it's your choice.
When including attributes on ER diagrams, you must decide whether to include foreign keys as attributes. This probably depends on how closely you are trying to represent relational table structures. If your diagram is a *logical* model which is not meant to imply a relational implementation, then it is better to leave these out because the associative relationships already convey the way that entities are associated. For example, a JSON data structure can implement a one-to-many relationship without the need for foreign key properties, using arrays. Similarly an object-oriented programming language may use pointers or references to collections. Even for models that are intended for relational implementation, you might decide that inclusion of foreign key attributes duplicates information already portrayed by the relationships, and does not add meaning to entities. Ultimately, it's your choice.
## Syntax
### Entities and Relationships
Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to label the relationship. Each statement consists of the following parts:
Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to label the relationship. Each statement consists of the following parts:
<first-entity> [<relationship> <second-entity> : <relationship-label>]
Where:
* `first-entity` is the name of an entity. Names must begin with an alphabetic character and may also contain digits, hyphens, and underscores.
* `relationship` describes the way that both entities inter-relate. See below.
* `first-entity` is the name of an entity. Names must begin with an alphabetic character and may also contain digits, hyphens, and underscores.
* `relationship` describes the way that both entities inter-relate. See below.
* `second-entity` is the name of the other entity.
* `relationship-label` describes the relationship from the perspective of the first entity.
@ -90,9 +88,9 @@ For example:
PROPERTY ||--|{ ROOM : contains
This statement can be read as *a property contains one or more rooms, and a room is part of one and only one property*. You can see that the label here is from the first entity's perspective: a property contains a room, but a room does not contain a property. When considered from the perspective of the second entity, the equivalent label is usually very easy to infer. (Some ER diagrams label relationships from both perspectives, but this is not supported here, and is usually superfluous).
This statement can be read as *a property contains one or more rooms, and a room is part of one and only one property*. You can see that the label here is from the first entity's perspective: a property contains a room, but a room does not contain a property. When considered from the perspective of the second entity, the equivalent label is usually very easy to infer. (Some ER diagrams label relationships from both perspectives, but this is not supported here, and is usually superfluous).
Only the `first-entity` part of a statement is mandatory. This makes it possible to show an entity with no relationships, which can be useful during iterative construction of diagrams. If any other parts of a statement are specified, then all parts are mandatory.
Only the `first-entity` part of a statement is mandatory. This makes it possible to show an entity with no relationships, which can be useful during iterative construction of diagrams. If any other parts of a statement are specified, then all parts are mandatory.
### Relationship Syntax
@ -102,18 +100,18 @@ The `relationship` part of each statement can be broken down into three sub-comp
* whether the relationship confers identity on a 'child' entity
* the cardinality of the second entity with respect to the first
Cardinality is a property that describes how many elements of another entity can be related to the entity in question. In the above example a `PROPERTY` can have one or more `ROOM` instances associated to it, whereas a `ROOM` can only be associated with one `PROPERTY`. In each cardinality marker there are two characters. The outermost character represents a maximum value, and the innermost character represents a minimum value. The table below summarises possible cardinalities.
Cardinality is a property that describes how many elements of another entity can be related to the entity in question. In the above example a `PROPERTY` can have one or more `ROOM` instances associated to it, whereas a `ROOM` can only be associated with one `PROPERTY`. In each cardinality marker there are two characters. The outermost character represents a maximum value, and the innermost character represents a minimum value. The table below summarises possible cardinalities.
| Value (left) | Value (right) | Meaning |
|:------------:|:-------------:|--------------------------------------------------------|
| `\|o` | `o\|` | Zero or one |
| `\|\|` | `\|\|` | Exactly one |
| `}o` | `o{` | Zero or more (no upper limit) |
| `}\|` | `\|{` | One or more (no upper limit) |
| Value (left) | Value (right) | Meaning |
| :----------: | :-----------: | ----------------------------- |
| `\|o` | `o\|` | Zero or one |
| `\|\|` | `\|\|` | Exactly one |
| `}o` | `o{` | Zero or more (no upper limit) |
| `}\|` | `\|{` | One or more (no upper limit) |
### Identification
Relationships may be classified as either *identifying* or *non-identifying* and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:
Relationships may be classified as either *identifying* or *non-identifying* and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:
```mmd
erDiagram
@ -123,7 +121,7 @@ erDiagram
### Attributes
Attributes can be defined for entities by specifying the entity name followed by a block containing multiple `type name` pairs, where a block is delimited by an opening `{` and a closing `}`. For example:
Attributes can be defined for entities by specifying the entity name followed by a block containing multiple `type name` pairs, where a block is delimited by an opening `{` and a closing `}`. For example:
```mermaid-example
erDiagram
@ -191,7 +189,7 @@ erDiagram
}
```
The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens or underscores. Other than that, there are no restrictions, and there is no implicit set of valid data types.
The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens or underscores. Other than that, there are no restrictions, and there is no implicit set of valid data types.
#### Attribute Keys and Comments

67
docs/flowchart.md
View File

@ -1,8 +1,6 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Flowcharts - Basic Syntax
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/flowchart.md)
All Flowcharts are composed of **nodes**, the geometric shapes and **edges**, the arrows or lines. The mermaid code defines the way that these **nodes** and **edges** are made and interact.
It can also accommodate different arrow types, multi directional arrows, and linking to and from subgraphs.
@ -503,12 +501,12 @@ flowchart TD
For dotted or thick links, the characters to add are equals signs or dots,
as summed up in the following table:
| Length | 1 | 2 | 3 |
|-------------------|:------:|:-------:|:--------:|
| Normal | `---` | `----` | `-----` |
| Normal with arrow | `-->` | `--->` | `---->` |
| Thick | `===` | `====` | `=====` |
| Thick with arrow | `==>` | `===>` | `====>` |
| Length | 1 | 2 | 3 |
| ----------------- | :----: | :-----: | :------: |
| Normal | `---` | `----` | `-----` |
| Normal with arrow | `-->` | `--->` | `---->` |
| Thick | `===` | `====` | `=====` |
| Thick with arrow | `==>` | `===>` | `====>` |
| Dotted | `-.-` | `-..-` | `-...-` |
| Dotted with arrow | `-.->` | `-..->` | `-...->` |
@ -686,9 +684,9 @@ Examples of tooltip usage below:
```html
<script>
var callback = function () {
alert('A callback was triggered');
};
var callback = function () {
alert('A callback was triggered');
};
</script>
```
@ -750,34 +748,29 @@ Beginner's tip—a full example using interactive links in a html context:
```html
<body>
<div class="mermaid">
flowchart LR
A-->B
B-->C
C-->D
click A callback "Tooltip"
click B "https://www.github.com" "This is a link"
click C call callback() "Tooltip"
click D href "https://www.github.com" "This is a link"
</div>
<div class="mermaid">
flowchart LR A-->B B-->C C-->D click A callback "Tooltip" click B "https://www.github.com"
"This is a link" click C call callback() "Tooltip" click D href "https://www.github.com"
"This is a link"
</div>
<script>
var callback = function () {
alert('A callback was triggered');
};
var config = {
startOnLoad: true,
flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
securityLevel:'loose'
};
mermaid.initialize(config);
</script>
<script>
var callback = function () {
alert('A callback was triggered');
};
var config = {
startOnLoad: true,
flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
securityLevel: 'loose',
};
mermaid.initialize(config);
</script>
</body>
```
### Comments
Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax
Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax
```mmd
flowchart LR
@ -869,10 +862,10 @@ below:
```html
<style>
.cssClass > rect{
fill:#FF0000;
stroke:#FFFF00;
stroke-width:4px;
.cssClass > rect {
fill: #ff0000;
stroke: #ffff00;
stroke-width: 4px;
}
</style>
```

16
docs/gitgraph.md
View File

@ -1,8 +1,6 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Gitgraph Diagrams
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/gitgraph.md)
> A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches.
These kind of diagram are particularly helpful to developers and devops teams to share their Git branching strategies. For example, it makes it easier to visualize how git flow works.
@ -168,7 +166,7 @@ In this example, we have given custom tags to the commits. Also, see how we have
In Mermaid, in-order to create a new branch, you make use of the `branch` keyword. You also need to provide a name of the new branch. The name has to be unique and cannot be that of an existing branch. Usage example: `branch develop`
When Mermaid, reads the `branch` keyword, it creates a new branch and sets it as the current branch. Equivalent to you creating a new branch and checking it out in Git world.
When Mermaid, reads the `branch` keyword, it creates a new branch and sets it as the current branch. Equivalent to you creating a new branch and checking it out in Git world.
Let see this in an example:
@ -235,7 +233,7 @@ After this we made use of the `checkout` keyword to set the current branch as `m
### Merging two branches
In Mermaid, in order to merge or join to an existing branch, you make use of the `merge` keyword. You also need to provide the name of an existing branch to merge from. If no branch is found with the given name, it will result in console error. Also, you can only merge two separate branches, and cannot merge a branch with itself. In such case an error is throw.
In Mermaid, in order to merge or join to an existing branch, you make use of the `merge` keyword. You also need to provide the name of an existing branch to merge from. If no branch is found with the given name, it will result in console error. Also, you can only merge two separate branches, and cannot merge a branch with itself. In such case an error is throw.
Usage example: `merge develop`
@ -346,7 +344,7 @@ Let us see how this works with the help of the following diagram:
Similar to how 'git' allows you to cherry-pick a commit from **another branch** onto the **current** branch, Mermaid also supports this functionality. You can also cherry-pick a commit from another branch using the `cherry-pick` keyword.
To use the `cherry-pick` keyword, you must specify the id using the `id` attribute, followed by `:` and your desired commit id within a `""` quote. For example:
To use the `cherry-pick` keyword, you must specify the id using the `id` attribute, followed by `:` and your desired commit id within a `""` quote. For example:
`cherry-pick id: "your_custom_id"`
@ -1343,7 +1341,7 @@ See how the default theme is used to set the colors for the branches:
> #### IMPORTANT:
>
> Mermaid supports the theme variables to override the default values for **up to 8 branches**, i.e., you can set the color/styling of up to 8 branches using theme variables. After this threshold of 8 branches, the theme variables are reused in the cyclic manner, i.e. the 9th branch will use the color/styling of the 1st branch, or the branch at index position '8' will use the color/styling of the branch at index position '0'.
> Mermaid supports the theme variables to override the default values for **up to 8 branches**, i.e., you can set the color/styling of up to 8 branches using theme variables. After this threshold of 8 branches, the theme variables are reused in the cyclic manner, i.e. the 9th branch will use the color/styling of the 1st branch, or the branch at index position '8' will use the color/styling of the branch at index position '0'.
> *More on this in the next section. See examples on **Customizing branch label colors** below*
### Customizing branch colors
@ -1527,7 +1525,7 @@ See how the commit label color and background color are changed to the values sp
### Customizing Commit Label Font Size
You can customize commit using the `commitLabelFontSize` theme variables for changing in the font soze of the commit label .
You can customize commit using the `commitLabelFontSize` theme variables for changing in the font soze of the commit label .
Example:
Now let's override the default values for the `commitLabelFontSize` variable:
@ -1578,7 +1576,7 @@ See how the commit label font size changed.
### Customizing Tag Label Font Size
You can customize commit using the `tagLabelFontSize` theme variables for changing in the font soze of the tag label .
You can customize commit using the `tagLabelFontSize` theme variables for changing in the font soze of the tag label .
Example:
Now let's override the default values for the `tagLabelFontSize` variable:
@ -1629,7 +1627,7 @@ See how the tag label font size changed.
### Customizing Tag colors
You can customize tag using the `tagLabelColor`,`tagLabelBackground` and `tagLabelBorder` theme variables for changes in the tag label color,tag label background color and tag label border respectively.
You can customize tag using the `tagLabelColor`,`tagLabelBackground` and `tagLabelBorder` theme variables for changes in the tag label color,tag label background color and tag label border respectively.
Example:
Now let's override the default values for the `tagLabelColor`, `tagLabelBackground` and to `tagLabelBorder` variables:

36
docs/sequenceDiagram.md
View File

@ -1,8 +1,6 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Sequence diagrams
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/sequenceDiagram.md)
> A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
Mermaid can render sequence diagrams.
@ -100,15 +98,15 @@ Messages can be of two displayed either solid or with a dotted line.
There are six types of arrows currently supported:
| Type | Description |
| ---- | ------------------------------------------- |
| -> | Solid line without arrow |
| --> | Dotted line without arrow |
| ->> | Solid line with arrowhead |
| -->> | Dotted line with arrowhead |
| -x | Solid line with a cross at the end |
| --x | Dotted line with a cross at the end. |
| -) | Solid line with an open arrow at the end (async) |
| Type | Description |
| ---- | ------------------------------------------------ |
| -> | Solid line without arrow |
| --> | Dotted line without arrow |
| ->> | Solid line with arrowhead |
| -->> | Dotted line with arrowhead |
| -x | Solid line with a cross at the end |
| --x | Dotted line with a cross at the end. |
| -) | Solid line with an open arrow at the end (async) |
| --) | Dotted line with a open arrow at the end (async) |
## Activations
@ -480,7 +478,7 @@ sequenceDiagram
## Comments
Comments can be entered within a sequence diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
Comments can be entered within a sequence diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
```mmd
sequenceDiagram
@ -514,9 +512,9 @@ Because semicolons can be used instead of line breaks to define the markup, you
It is possible to get a sequence number attached to each arrow in a sequence diagram. This can be configured when adding mermaid to the website as shown below:
```html
<script>
mermaid.initialize({ sequence: { showSequenceNumbers: true }, });
</script>
<script>
mermaid.initialize({ sequence: { showSequenceNumbers: true } });
</script>
```
It can also be be turned on via the diagram code as in the diagram:
@ -549,7 +547,7 @@ sequenceDiagram
## Actor Menus
Actors can have popup-menus containing individualized links to external pages. For example, if an actor represented a web service, useful links might include a link to the service health dashboard, repo containing the code for the service, or a wiki page describing the service.
Actors can have popup-menus containing individualized links to external pages. For example, if an actor represented a web service, useful links might include a link to the service health dashboard, repo containing the code for the service, or a wiki page describing the service.
This can be configured by adding one or more link lines with the format:
@ -718,7 +716,7 @@ mermaid.sequenceConfig = {
boxTextMargin: 5,
noteMargin: 10,
messageMargin: 35,
mirrorActors: true
mirrorActors: true,
};
```
@ -729,8 +727,8 @@ mermaid.sequenceConfig = {
| mirrorActors | Turns on/off the rendering of actors below the diagram as well as above it | false |
| bottomMarginAdj | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1 |
| actorFontSize | Sets the font size for the actor's description | 14 |
| actorFontFamily | Sets the font family for the actor's description | "Open Sans", sans-serif |
| actorFontWeight | Sets the font weight for the actor's description | "Open Sans", sans-serif |
| actorFontFamily | Sets the font family for the actor's description | "Open Sans", sans-serif |
| actorFontWeight | Sets the font weight for the actor's description | "Open Sans", sans-serif |
| noteFontSize | Sets the font size for actor-attached notes | 14 |
| noteFontFamily | Sets the font family for actor-attached notes | "trebuchet ms", verdana, arial |
| noteFontWeight | Sets the font weight for actor-attached notes | "trebuchet ms", verdana, arial |

131
docs/theming.md
View File

@ -1,8 +1,6 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Theme Configuration
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/theming.md)
With Version 8.7.0 Mermaid comes out with a system for dynamic and integrated configuration of themes. The intent is to increase the customizability and ease of styling for mermaid diagrams.
The theme can be altered by changing the root level variable `theme` variable in the configuration. To change it for the whole site you must use the `initialize` call. To do it for just for a single diagram you can use the `%%init%%` directive
@ -30,9 +28,10 @@ Site-wide themes are declared via `initialize` by site owners.
Example of `Initialize` call setting `theme` to `base`:
```javascript
mermaidAPI.initialize({
'securityLevel': 'loose', 'theme': 'base'
});
mermaidAPI.initialize({
securityLevel: 'loose',
theme: 'base',
});
```
**Notes**: Only site owners can use the `mermaidAPI.initialize` call, to set values. Site-Users will have to use `%%init%%` to modify or create the theme for their diagrams.
@ -91,7 +90,7 @@ Here is an example of how `%%init%%` can set the theme to 'base', this assumes t
The easiest way to make a custom theme is to start with the base theme, and just modify theme variables through `themeVariables`, via `%%init%%`.
| Parameter | Description | Type | Required | Objects contained |
| Parameter | Description | Type | Required | Objects contained |
| -------------- | ------------------------------------------------------------------ | ----- | -------- | ---------------------------------- |
| themeVariables | Array containing objects, modifiable with the `%%init%%` directive | Array | Required | primaryColor, lineColor, textColor |
@ -150,29 +149,29 @@ You can create your own themes, by changing any of the given variables below. If
Variables that are unique to some diagrams can be affected by changes in Theme Variables
```
| Variable | Default/Base/Factor value | Calc | Description |
| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- |
| darkMode | false | | Boolean Value that dictates how to calculate colors. "true" will activate darkmode. |
| Variable | Default/Base/Factor value | Calc | Description |
| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- | --- | --- |
| darkMode | false | | Boolean Value that dictates how to calculate colors. "true" will activate darkmode. |
| background | #f4f4f4 | | Used to calculate color for items that should either be background colored or contrasting to the background. |
| fontFamily | "trebuchet ms", verdana, arial | | |
| fontSize | 16px | | Font Size, in pixels |
| fontSize | 16px | | Font Size, in pixels |
| primaryColor | #fff4dd | | Color to be used as background in nodes, other colors will be derived from this |
| primaryBorderColor | based on primaryColor | \* | Color to be used as border in nodes using primaryColor |
| primaryTextColor | based on darkMode #ddd/#333 | \* | Color to be used as text color in nodes using primaryColor\
| secondaryColor | based on primaryColor | \* | |
| secondaryBorderColor | based on secondaryColor | \* | Color to be used as border in nodes using secondaryColor |
| secondaryTextColor | based on secondaryColor | \* | Color to be used as text color in nodes using secondaryColor\
| tertiaryColor | based on primaryColor | \* | | | |
| tertiaryBorderColor | based on tertiaryColor | \* | Color to be used as border in nodes using tertiaryColor |
| tertiaryTextColor | based on tertiaryColor | \* | Color to be used as text color in nodes using tertiaryColor |
| primaryBorderColor | based on primaryColor | \* | Color to be used as border in nodes using primaryColor |
| primaryTextColor | based on darkMode #ddd/#333 | \* | Color to be used as text color in nodes using primaryColor |
| secondaryColor | based on primaryColor | \* | |
| secondaryBorderColor | based on secondaryColor | \* | Color to be used as border in nodes using secondaryColor |
| secondaryTextColor | based on secondaryColor | \* | Color to be used as text color in nodes using secondaryColor |
| tertiaryColor | based on primaryColor | \* | | | |
| tertiaryBorderColor | based on tertiaryColor | \* | Color to be used as border in nodes using tertiaryColor |
| tertiaryTextColor | based on tertiaryColor | \* | Color to be used as text color in nodes using tertiaryColor |
| noteBkgColor | #fff5ad | | Color used as background in notes |
| noteTextColor | #333 | | Text color in note rectangles. |
| noteBorderColor | based on noteBkgColor | \* | Border color in note rectangles. |
| lineColor | based on background | \* | |
| textColor | based on primaryTextColor | \* | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in gantt diagram |
| mainBkg | based on primaryColor | \* | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc |
| errorBkgColor | tertiaryColor | \* | Color for syntax error message |
| errorTextColor | tertiaryTextColor | \* | Color for syntax error message |
| noteTextColor | #333 | | Text color in note rectangles. |
| noteBorderColor | based on noteBkgColor | \* | Border color in note rectangles. |
| lineColor | based on background | \* | |
| textColor | based on primaryTextColor | \* | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in gantt diagram |
| mainBkg | based on primaryColor | \* | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc |
| errorBkgColor | tertiaryColor | \* | Color for syntax error message |
| errorTextColor | tertiaryTextColor | \* | Color for syntax error message |
# What follows are Variables, specific to different diagrams and charts.
@ -180,59 +179,59 @@ Variables that are unique to some diagrams can be affected by changes in Theme V
## Flowchart
| Variable | Default/ Associated Value | Calc | Description |
| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- |
| nodeBorder | primaryBorderColor | \* | Node Border Color |
| clusterBkg | tertiaryColor | \* | Background in subgraphs |
| clusterBorder | tertiaryBorderColor | \* | Cluster Border Color |
| defaultLinkColor | lineColor | \* | Link Color |
| titleColor | tertiaryTextColor | \* | Title Color |
| edgeLabelBackground | based on secondaryColor | \* | |
| nodeTextColor | primaryTextColor | \* | Color for text inside Nodes. |
| Variable | Default/ Associated Value | Calc | Description |
| ------------------- | ------------------------- | ---- | ---------------------------- |
| nodeBorder | primaryBorderColor | \* | Node Border Color |
| clusterBkg | tertiaryColor | \* | Background in subgraphs |
| clusterBorder | tertiaryBorderColor | \* | Cluster Border Color |
| defaultLinkColor | lineColor | \* | Link Color |
| titleColor | tertiaryTextColor | \* | Title Color |
| edgeLabelBackground | based on secondaryColor | \* | |
| nodeTextColor | primaryTextColor | \* | Color for text inside Nodes. |
# sequence diagram
| name | Default value | Calc | Description |
| --------------------- | ----------------------- | ---- | ----------- |
| actorBorder | primaryBorderColor | \* | Actor Border Color |
| actorBkg | mainBkg | \* | Actor Background Color |
| actorTextColor | primaryTextColor | \* | Actor Text Color |
| actorLineColor | grey | \* | Actor Line Color |
| signalColor | textColor | \* | Signal Color |
| signalTextColor | textColor | \* | Signal Text Color |
| labelBoxBkgColor | actorBkg | \* | Label Box Background Color |
| labelBoxBorderColor | actorBorder | \* | Label Box Border Color |
| labelTextColor | actorTextColor | \* | Label Text Color |
| loopTextColor | actorTextColor | \* | Loop ext Color |
| activationBorderColor | based on secondaryColor | \* | Activation Border Color |
| activationBkgColor | secondaryColor | \* | Activation Background Color |
| sequenceNumberColor | based on lineColor | \* | Sequence Number Color |
| name | Default value | Calc | Description |
| --------------------- | ----------------------- | ---- | --------------------------- |
| actorBorder | primaryBorderColor | \* | Actor Border Color |
| actorBkg | mainBkg | \* | Actor Background Color |
| actorTextColor | primaryTextColor | \* | Actor Text Color |
| actorLineColor | grey | \* | Actor Line Color |
| signalColor | textColor | \* | Signal Color |
| signalTextColor | textColor | \* | Signal Text Color |
| labelBoxBkgColor | actorBkg | \* | Label Box Background Color |
| labelBoxBorderColor | actorBorder | \* | Label Box Border Color |
| labelTextColor | actorTextColor | \* | Label Text Color |
| loopTextColor | actorTextColor | \* | Loop ext Color |
| activationBorderColor | based on secondaryColor | \* | Activation Border Color |
| activationBkgColor | secondaryColor | \* | Activation Background Color |
| sequenceNumberColor | based on lineColor | \* | Sequence Number Color |
# state colors
| name | Default value | Calc | Description |
| ------------- | ---------------- | ---- | ------------------------------------------- |
| labelColor | primaryTextColor | \* | |
| altBackground | tertiaryColor | \* | Used for background in deep composite states |
| name | Default value | Calc | Description |
| ------------- | ---------------- | ---- | -------------------------------------------- |
| labelColor | primaryTextColor | \* | |
| altBackground | tertiaryColor | \* | Used for background in deep composite states |
# class colors
| name | Default value | Calc | Description |
| --------- | ------------- | ---- | ---------------------- |
| classText | textColor | \* | Color of Text in class diagrams |
| name | Default value | Calc | Description |
| --------- | ------------- | ---- | ------------------------------- |
| classText | textColor | \* | Color of Text in class diagrams |
# User journey colors
| name | Default value | Calc | Description |
| --------- | ------------------------ | ---- | --------------------------------------- |
| fillType0 | primaryColor | \* | Fill for 1st section in journey diagram |
| fillType1 | secondaryColor | \* | Fill for 2nd section in journey diagram |
| fillType2 | based on primaryColor | \* | Fill for 3rd section in journey diagram |
| fillType3 | based on secondaryColor | \* | Fill for 4th section in journey diagram |
| fillType4 | based on primaryColor | \* | Fill for 5th section in journey diagram |
| fillType5 | based on secondaryColor | \* | Fill for 6th section in journey diagram |
| fillType6 | based on primaryColor | \* | Fill for 7th section in journey diagram |
| fillType7 | based on secondaryColor | \* | Fill for 8th section in journey diagram |
| name | Default value | Calc | Description |
| --------- | ----------------------- | ---- | --------------------------------------- |
| fillType0 | primaryColor | \* | Fill for 1st section in journey diagram |
| fillType1 | secondaryColor | \* | Fill for 2nd section in journey diagram |
| fillType2 | based on primaryColor | \* | Fill for 3rd section in journey diagram |
| fillType3 | based on secondaryColor | \* | Fill for 4th section in journey diagram |
| fillType4 | based on primaryColor | \* | Fill for 5th section in journey diagram |
| fillType5 | based on secondaryColor | \* | Fill for 6th section in journey diagram |
| fillType6 | based on primaryColor | \* | Fill for 7th section in journey diagram |
| fillType7 | based on secondaryColor | \* | Fill for 8th section in journey diagram |
\*\*Notes: Values are meant to create an alternating look.

94
docs/usage.md
View File

@ -1,8 +1,6 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Usage
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/usage.md)
Mermaid is a JavaScript tool that makes use of a Markdown based syntax to render customizable diagrams, charts and visualizations.
Diagrams can be re-rendered/modified by modifying their descriptions.
@ -43,24 +41,22 @@ We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermai
The easiest way to integrate mermaid on a web page requires three elements:
1. Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example:
```html
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
```
2. The `mermaidAPI` call, in a separate `script` tag. Example:
```html
<script>mermaid.initialize({startOnLoad:true});
<script>
mermaid.initialize({ startOnLoad: true });
</script>
```
3. A graph definition, inside `<div>` tags labeled `class=mermaid`. Example:
```html
<div class="mermaid">
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</div>
<div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div>
```
**Following these directions, mermaid starts at page load and (when the page has loaded) it will
@ -71,20 +67,16 @@ locate the graph definitions inside the `div` tags with `class="mermaid"` and re
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div class="mermaid">
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</div>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});
</script>
</body>
<head>
<meta charset="utf-8" />
</head>
<body>
<div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({ startOnLoad: true });
</script>
</body>
</html>
```
@ -104,8 +96,8 @@ A `securityLevel` configuration has to first be cleared, `securityLevel` sets th
## securityLevel
| Parameter | Description | Type | Required | Values |
| ------------- | --------------------------------- | ------ | -------- | ------------------------- |
| Parameter | Description | Type | Required | Values |
| ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ |
| securityLevel | Level of trust for parsed diagram | String | Required | 'sandbox', 'strict', 'loose', 'antiscript' |
Values:
@ -117,7 +109,7 @@ Values:
```note
This changes the default behaviour of mermaid so that after upgrade to 8.2, unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled.
**sandbox** security level is still in the beta version.
**sandbox** security level is still in the beta version.
```
**If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing . This allows clicks and tags are allowed.**
@ -126,7 +118,7 @@ This changes the default behaviour of mermaid so that after upgrade to 8.2, unle
```javascript
mermaidAPI.initialize({
securityLevel: 'loose'
securityLevel: 'loose',
});
```
@ -136,7 +128,7 @@ If you use dynamically loaded fonts that are loaded through CSS, such as Google
whole page to load (dom + assets, particularly the fonts file).
```javascript
$(document).load(function() {
$(document).load(function () {
mermaid.initialize();
});
```
@ -144,7 +136,7 @@ $(document).load(function() {
or
```javascript
$(document).ready(function() {
$(document).ready(function () {
mermaid.initialize();
});
```
@ -174,13 +166,13 @@ finer-grained control of this behavior, you can call `init` yourself with:
Example:
```javascript
mermaid.init({noteMargin: 10}, ".someOtherClass");
mermaid.init({ noteMargin: 10 }, '.someOtherClass');
```
Or with no config object, and a jQuery selection:
```javascript
mermaid.init(undefined, $("#someId .yetAnotherClass"));
mermaid.init(undefined, $('#someId .yetAnotherClass'));
```
```warning
@ -203,10 +195,16 @@ The example below show an outline of how this could be used. The example just lo
<script src="mermaid.js"></script>
<script>
mermaid.mermaidAPI.initialize({ startOnLoad:false }); $(function(){ // Example of using the API var
element = document.querySelector("#graphDiv"); var insertSvg = function(svgCode, bindFunctions){
element.innerHTML = svgCode; }; var graphDefinition = 'graph TB\na-->b'; var graph =
mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg); });
mermaid.mermaidAPI.initialize({ startOnLoad: false });
$(function () {
// Example of using the API var
element = document.querySelector('#graphDiv');
var insertSvg = function (svgCode, bindFunctions) {
element.innerHTML = svgCode;
};
var graphDefinition = 'graph TB\na-->b';
var graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
});
</script>
```
@ -219,9 +217,9 @@ The example code below is an extract of what mermaid does when using the API. Th
bind events to an SVG when using the API for rendering.
```javascript
var insertSvg = function(svgCode, bindFunctions) {
var insertSvg = function (svgCode, bindFunctions) {
element.innerHTML = svgCode;
if(typeof callback !== 'undefined'){
if (typeof callback !== 'undefined') {
callback(id);
}
bindFunctions(element);
@ -229,8 +227,7 @@ var insertSvg = function(svgCode, bindFunctions) {
var id = 'theGraph';
mermaidAPI.render(id,txt,insertSvg, element);
mermaidAPI.render(id, txt, insertSvg, element);
```
1. The graph is generated using the render call.
@ -246,11 +243,10 @@ This is the renderer used for transforming the documentation from Markdown to ht
```javascript
var renderer = new marked.Renderer();
renderer.code = function (code, language) {
if(code.match(/^sequenceDiagram/)||code.match(/^graph/)){
return '<div class="mermaid">'+code+'</div>';
}
else{
return '<pre><code>'+code+'</code></pre>';
if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) {
return '<div class="mermaid">' + code + '</div>';
} else {
return '<pre><code>' + code + '</code></pre>';
}
};
```
@ -292,15 +288,15 @@ function in order to handle the error in an application-specific way.
The code-example below in meta code illustrates how this could work:
```javascript
mermaid.parseError = function(err,hash){
mermaid.parseError = function (err, hash) {
displayErrorInGui(err);
};
var textFieldUpdated = function(){
var textFieldUpdated = function () {
var textStr = getTextFromFormField('code');
if(mermaid.parse(textStr)){
reRender(textStr)
if (mermaid.parse(textStr)) {
reRender(textStr);
}
};
@ -331,7 +327,7 @@ on what kind of integration you use.
```html
<script src="../dist/mermaid.js"></script>
<script>
var config = { startOnLoad:true, flowchart:{ useMaxWidth:false, htmlLabels:true } };
var config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
mermaid.initialize(config);
</script>
```

58
src/docs/README.md
View File

@ -4,33 +4,30 @@
It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
>If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](./n00b-syntaxReference.md).
> If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](./n00b-syntaxReference.md).
<img src="img/header.png" alt="" />
<!-- **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/README.md) -->
[![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
<!-- Mermaid book banner -->
[![Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!](img/book-banner-post-release.jpg)](https://mermaid-js.github.io/mermaid/landing/)
<!-- <Main description> -->
Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.
Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.
> Doc-Rot is a Catch-22 that Mermaid helps to solve.
Diagramming and documentation costs precious developer time and gets outdated quickly.
But not having diagrams or docs ruins productivity and hurts organizational learning.<br/>
Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).<br/>
<br/>
<br/>
Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
[Tutorials](./Tutorials.md) has video tutorials.
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./integrations.md).
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./n00b-overview.md) and [Usage](./usage.md).
🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md) | 📜 [Version Log](./CHANGELOG.md) | 🔌 [Plug-Ins](./integrations.md)
@ -43,7 +40,6 @@ For a more detailed introduction to Mermaid and some of its more basic uses, loo
In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
<a href="https://applitools.com/">
<svg width="170" height="32" viewBox="0 0 170 32" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" maskUnits="userSpaceOnUse" x="27" y="0" width="143" height="32"><path fill-rule="evenodd" clip-rule="evenodd" d="M27.732.227h141.391v31.19H27.733V.227z" fill="#fff"></path></mask><g mask="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M153.851 22.562l1.971-3.298c1.291 1.219 3.837 2.402 5.988 2.402 1.971 0 2.903-.753 2.903-1.829 0-2.832-10.253-.502-10.253-7.313 0-2.904 2.51-5.45 7.099-5.45 2.904 0 5.234 1.004 6.955 2.367l-1.829 3.226c-1.039-1.075-3.011-2.008-5.126-2.008-1.65 0-2.725.717-2.725 1.685 0 2.546 10.289.395 10.289 7.386 0 3.19-2.724 5.52-7.528 5.52-3.012 0-5.916-1.003-7.744-2.688zm-5.7 2.259h4.553V.908h-4.553v23.913zm-6.273-8.676c0-2.689-1.578-5.02-4.446-5.02-2.832 0-4.409 2.331-4.409 5.02 0 2.724 1.577 5.055 4.409 5.055 2.868 0 4.446-2.33 4.446-5.055zm-13.588 0c0-4.912 3.442-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.7 0-9.142-4.195-9.142-9.106zm-5.628 0c0-2.689-1.577-5.02-4.445-5.02-2.832 0-4.41 2.331-4.41 5.02 0 2.724 1.578 5.055 4.41 5.055 2.868 0 4.445-2.33 4.445-5.055zm-13.587 0c0-4.912 3.441-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.701 0-9.142-4.195-9.142-9.106zm-8.425 4.338v-8.999h-2.868v-3.98h2.868V2.773h4.553v4.733h3.514v3.979h-3.514v7.78c0 1.111.574 1.936 1.578 1.936.681 0 1.326-.251 1.577-.538l.968 3.478c-.681.609-1.9 1.11-3.8 1.11-3.191 0-4.876-1.648-4.876-4.767zm-8.962 4.338h4.553V7.505h-4.553V24.82zm-.43-21.905a2.685 2.685 0 012.688-2.69c1.506 0 2.725 1.184 2.725 2.69a2.724 2.724 0 01-2.725 2.724c-1.47 0-2.688-1.219-2.688-2.724zM84.482 24.82h4.553V.908h-4.553v23.913zm-6.165-8.676c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82h-4.553V7.504H70v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.907-.86-5.342-2.653zm-10.718-6.453c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82H46.41V7.504h4.553v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.908-.86-5.342-2.653zm-11.758-1.936V18.51c-.753-1.004-2.187-1.542-3.657-1.542-1.793 0-3.263.968-3.263 2.617 0 1.65 1.47 2.582 3.263 2.582 1.47 0 2.904-.502 3.657-1.506zm0 4.159v-1.829c-1.183 1.434-3.227 2.259-5.485 2.259-2.761 0-5.988-1.864-5.988-5.736 0-4.087 3.227-5.593 5.988-5.593 2.33 0 4.337.753 5.485 2.115V13.85c0-1.756-1.506-2.904-3.8-2.904-1.829 0-3.55.717-4.984 2.044L28.63 9.8c2.115-1.901 4.84-2.726 7.564-2.726 3.98 0 7.6 1.578 7.6 6.561v11.186h-4.588z" fill="#00A298"></path></g><path fill-rule="evenodd" clip-rule="evenodd" d="M14.934 16.177c0 1.287-.136 2.541-.391 3.752-1.666-1.039-3.87-2.288-6.777-3.752 2.907-1.465 5.11-2.714 6.777-3.753.255 1.211.39 2.466.39 3.753m4.6-7.666V4.486a78.064 78.064 0 01-4.336 3.567c-1.551-2.367-3.533-4.038-6.14-5.207C11.1 4.658 12.504 6.7 13.564 9.262 5.35 15.155 0 16.177 0 16.177s5.35 1.021 13.564 6.915c-1.06 2.563-2.463 4.603-4.507 6.415 2.607-1.169 4.589-2.84 6.14-5.207a77.978 77.978 0 014.336 3.568v-4.025s-.492-.82-2.846-2.492c.6-1.611.93-3.354.93-5.174a14.8 14.8 0 00-.93-5.174c2.354-1.673 2.846-2.492 2.846-2.492" fill="#00A298"></path></svg>
</a>
@ -158,6 +154,7 @@ journey
Go downstairs: 5: Me
Sit down: 5: Me
```
![Journey diagram](img/user-journey.png)
## Installation
@ -179,13 +176,14 @@ Replace `<version>` with the desired version number.
Latest Version: [https://unpkg.com/browse/mermaid@8.8.0/](https://unpkg.com/browse/mermaid@8.8.0/)
## Deploying Mermaid
To Deploy Mermaid:
1. You will need to install node v16, which would have npm
2. Download yarn using npm
3. Enter the following command: `yarn add mermaid`
4. You can then add mermaid as a dev dependency using this command:
`yarn add --dev mermaid`
`yarn add --dev mermaid`
### [Mermaid API](./Setup.md):
@ -193,19 +191,21 @@ To Deploy Mermaid:
```html
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});
<script>
mermaid.initialize({ startOnLoad: true });
</script>
```
**Doing so will command the mermaid parser to look for the `<div>` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.**
**Examples can be found at** [Other examples](/examples)
**Examples can be found at** [Other examples](/examples)
## Sibling projects
- [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
- [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli)
- [Mermaid Webpack Demo](https://github.com/mermaidjs/mermaid-webpack-demo)
- [Mermaid Parcel Demo](https://github.com/mermaidjs/mermaid-parcel-demo)
- [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
- [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli)
- [Mermaid Webpack Demo](https://github.com/mermaidjs/mermaid-webpack-demo)
- [Mermaid Parcel Demo](https://github.com/mermaidjs/mermaid-parcel-demo)
## Request for Assistance
@ -217,8 +217,8 @@ represent the project when answering questions and issues.
Together we could continue the work with things like:
- Adding more types of diagrams like mindmaps, ert diagrams, etc.
- Improving existing diagrams
- Adding more types of diagrams like mindmaps, ert diagrams, etc.
- Improving existing diagrams
Don't hesitate to contact me if you want to get involved!
@ -250,6 +250,7 @@ We recommend you to install [editor plugins](https://eslint.org/docs/user-guide/
```sh
yarn test
```
Manual test in browser: open `dist/index.html`
### Release
@ -266,9 +267,9 @@ The above command generates files into the `dist` folder and publishes them to n
## Related projects
- [Command Line Interface](https://github.com/mermaid-js/mermaid-cli)
- [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
- [HTTP Server](https://github.com/TomWright/mermaid-server)
- [Command Line Interface](https://github.com/mermaid-js/mermaid-cli)
- [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
- [HTTP Server](https://github.com/TomWright/mermaid-server)
## Contributors [![Good first issue](https://img.shields.io/github/labels/mermaid-js/mermaid/Good%20first%20issue%21)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%21%22) [![Contributors](https://img.shields.io/github/contributors/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) [![Commits](https://img.shields.io/github/commit-activity/m/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors)
@ -280,21 +281,22 @@ Detailed information about how to contribute can be found in the [contribution g
For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitise the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing JavaScript in the code from being executed. This is a great step forward for better security.
As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing JavaScript in the code from being executed. This is a great step forward for better security.
*Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code.*
_Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._
## Reporting vulnerabilities
To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.
## Appreciation
A quick note from Knut Sveidqvist:
>*Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!*
>*Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering.*
>*Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017.*
> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_ >_Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._ >_Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
>
>*Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!*
> _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_
---
*Mermaid was created by Knut Sveidqvist for easier documentation.*
_Mermaid was created by Knut Sveidqvist for easier documentation._

120
src/docs/accessibility.md
View File

@ -1,23 +1,23 @@
# Accessibility Options
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/accessibility.md)
## Accessibility
Now with Mermaid library in much wider use, we have started to work towards more accessible features, based on the feedback from the community.
To begin with, we have added a new feature to Mermaid library, which is to support accessibility options, **Accessibility Title** and **Accessibility Description**.
This support for accessibility options is available for all the diagrams/chart types. Also, we have tired to keep the same format for the accessibility options, so that it is easy to understand and maintain.
## Defining Accessibility Options
### Single line accessibility values
The diagram authors can now add the accessibility options in the diagram definition, using the `accTitle` and `accDescr` keywords, where each keyword is followed by `:` and the string value for title and description like:
- `accTitle: "Your Accessibility Title"` or
- `accDescr: "Your Accessibility Description"`
**When these two options are defined, they will add a coressponding `<title>` and `<desc>` tag in the SVG.**
The diagram authors can now add the accessibility options in the diagram definition, using the `accTitle` and `accDescr` keywords, where each keyword is followed by `:` and the string value for title and description like:
- `accTitle: "Your Accessibility Title"` or
- `accDescr: "Your Accessibility Description"`
**When these two options are defined, they will add a coressponding `<title>` and `<desc>` tag in the SVG.**
Let us take a look at the following example with a flowchart diagram:
@ -30,24 +30,23 @@ Let us take a look at the following example with a flowchart diagram:
C -->|One| D[Result 1]
```
See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
![Accessibility options rendered inside SVG](img/accessibility-div-example.png)
### Multi-line Accessibility title/description
You can also define the accessibility options in a multi-line format, where the keyword is followed by opening curly bracket `{` and then multiple lines, followed by a closing `}`.
`accTitle: My single line title value` (***single line format***)
`accTitle: My single line title value` (**_single line format_**)
vs
`accDescr: {
My multi-line description
of the diagram
}` (***multi-line format***)
`accDescr: { My multi-line description of the diagram }` (**_multi-line format_**)
Let us look at it in the following example, with same flowchart:
```mermaid-example
graph LR
accTitle: Big decisions
@ -62,6 +61,7 @@ Let us look at it in the following example, with same flowchart:
C -->|One| D[Result 1]
```
See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
![Accessibility options rendered inside SVG](img/accessibility-div-example-2.png)
@ -116,21 +116,21 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
#### User Journey Diagram
```mermaid-example
journey
accTitle: My User Journey Diagram
accDescr: My User Journey Diagram Description
```mermaid-example
journey
accTitle: My User Journey Diagram
accDescr: My User Journey Diagram Description
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
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
```
```
#### Gantt Chart
@ -164,51 +164,45 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
"Iron" : 5
```
#### Requirement Diagram
```mermaid-example
requirementDiagram
accTitle: My Requirement Diagram
accDescr: My Requirement Diagram Description
```mermaid-example
requirementDiagram
accTitle: My Requirement Diagram
accDescr: My Requirement Diagram Description
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
element test_entity {
type: simulation
}
element test_entity {
type: simulation
}
test_entity - satisfies -> test_req
test_entity - satisfies -> test_req
```
```
#### Gitgraph
```mermaid-example
gitGraph
accTitle: My Gitgraph Accessibility Title
accDescr: My Gitgraph Accessibility Description
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
```
```mermaid-example
gitGraph
accTitle: My Gitgraph Accessibility Title
accDescr: My Gitgraph Accessibility Description
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
```

226
src/docs/c4c.md
View File

@ -1,10 +1,7 @@
# C4 Diagrams
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/gitgraph.md)
> C4 Diagram: This is an experimental diagram for now. The syntax and properties can change in future releases. Proper documentation will be provided when the syntax is stable.
Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
```mermaid-example
@ -12,32 +9,32 @@ Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
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(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.")
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.")
}
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
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.")
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.")
}
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.")
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")
@ -48,7 +45,7 @@ Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
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")
@ -58,11 +55,11 @@ For an example, see the source code demos/index.html
5 types of C4 charts are supported.
- System Context (C4Context)
- Container diagram (C4Container)
- Component diagram (C4Component)
- Dynamic diagram (C4Dynamic)
- Deployment diagram (C4Deployment)
- System Context (C4Context)
- Container diagram (C4Container)
- Component diagram (C4Component)
- Dynamic diagram (C4Dynamic)
- Deployment diagram (C4Deployment)
Please refer to the linked document [C4-PlantUML syntax](https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/README.md) for how to write the c4 diagram.
@ -72,86 +69,84 @@ updateElementStyle and UpdateElementStyle are written in the diagram last part.
The layout does not use a fully automated layout algorithm. The position of shapes is adjusted by changing the order in which statements are written. So there is no plan to support the following Layout statements.
The number of shapes per row and the number of boundaries can be adjusted using UpdateLayoutConfig.
- Layout
- - Lay_U, Lay_Up
- - Lay_D, Lay_Down
- - Lay_L, Lay_Left
- - Lay_R, Lay_Right
- Layout
- - Lay_U, Lay_Up
- - Lay_D, Lay_Down
- - Lay_L, Lay_Left
- - Lay_R, Lay_Right
The following unfinished features are not supported in the short term.
- [ ] sprite
- [ ] tags
- [ ] link
- [ ] Legend
- [ ] sprite
- [ ] tags
- [ ] link
- [ ] Legend
- [X] System Context
- - [X] Person(alias, label, ?descr, ?sprite, ?tags, $link)
- - [X] Person_Ext
- - [X] System(alias, label, ?descr, ?sprite, ?tags, $link)
- - [X] SystemDb
- - [X] SystemQueue
- - [X] System_Ext
- - [X] SystemDb_Ext
- - [X] SystemQueue_Ext
- - [X] Boundary(alias, label, ?type, ?tags, $link)
- - [X] Enterprise_Boundary(alias, label, ?tags, $link)
- - [X] System_Boundary
- [x] System Context
- - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
- - [x] Person_Ext
- - [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
- - [x] SystemDb
- - [x] SystemQueue
- - [x] System_Ext
- - [x] SystemDb_Ext
- - [x] SystemQueue_Ext
- - [x] Boundary(alias, label, ?type, ?tags, $link)
- - [x] Enterprise_Boundary(alias, label, ?tags, $link)
- - [x] System_Boundary
- [X] Container diagram
- - [X] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - [X] ContainerDb
- - [X] ContainerQueue
- - [X] Container_Ext
- - [X] ContainerDb_Ext
- - [X] ContainerQueue_Ext
- - [X] Container_Boundary(alias, label, ?tags, $link)
- [x] Container diagram
- - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - [x] ContainerDb
- - [x] ContainerQueue
- - [x] Container_Ext
- - [x] ContainerDb_Ext
- - [x] ContainerQueue_Ext
- - [x] Container_Boundary(alias, label, ?tags, $link)
- [X] Component diagram
- - [X] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - [X] ComponentDb
- - [X] ComponentQueue
- - [X] Component_Ext
- - [X] ComponentDb_Ext
- - [X] ComponentQueue_Ext
- [x] Component diagram
- - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - [x] ComponentDb
- - [x] ComponentQueue
- - [x] Component_Ext
- - [x] ComponentDb_Ext
- - [x] ComponentQueue_Ext
- [X] Dynamic diagram
- - [X] RelIndex(index, from, to, label, ?tags, $link)
- [x] Dynamic diagram
- - [x] RelIndex(index, from, to, label, ?tags, $link)
- [X] Deployment diagram
- - [X] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
- - [X] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
- - [X] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
- - [X] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
- [x] Deployment diagram
- - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
- - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
- - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
- - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
- [X] Relationship Types
- - [X] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - [X] BiRel (bidirectional relationship)
- - [X] Rel_U, Rel_Up
- - [X] Rel_D, Rel_Down
- - [X] Rel_L, Rel_Left
- - [X] Rel_R, Rel_Right
- - [X] Rel_Back
- - [X] RelIndex * Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
- [x] Relationship Types
- - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - [x] BiRel (bidirectional relationship)
- - [x] Rel_U, Rel_Up
- - [x] Rel_D, Rel_Down
- - [x] Rel_L, Rel_Left
- - [x] Rel_R, Rel_Right
- - [x] Rel_Back
- - [x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
- [ ] Custom tags/stereotypes support and skinparam updates
- - [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
- - [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
- - [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
- - [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
- - [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
- - [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.
- - [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.
- - [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.
- - [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
- - [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2).
- [ ] Custom tags/stereotypes support and skinparam updates
- - [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
- - [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
- - [X] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
- - [X] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
- - [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
- - [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.
- - [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.
- - [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.
- - [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
- - [X] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2).
There are two ways to assign parameters with question marks. One uses the non-named parameter assignment method in the order of the parameters, and the other uses the named parameter assignment method, where the name must start with a $ symbol.
There are two ways to assign parameters with question marks. One uses the non-named parameter assignment method in the order of the parameters, and the other uses the named parameter assignment method, where the name must start with a $ symbol.
Example: 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")
@ -166,32 +161,32 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
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(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.")
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.")
}
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
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.")
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.")
}
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.")
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")
@ -202,7 +197,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
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")
```
@ -228,28 +223,29 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
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")
UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")
Rel(customer, spa, "Uses", "HTTPS")
UpdateRelStyle(customer, spa, $offsetY="-40")
UpdateRelStyle(customer, spa, $offsetY="-40")
Rel(customer, mobile_app, "Uses")
UpdateRelStyle(customer, mobile_app, $offsetY="-30")
UpdateRelStyle(customer, mobile_app, $offsetY="-30")
Rel(web_app, spa, "Delivers")
UpdateRelStyle(web_app, spa, $offsetX="130")
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")
UpdateRelStyle(email_system, customer, $offsetX="-45")
Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
UpdateRelStyle(backend_api, email_system, $offsetY="-60")
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")
UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
```
## C4 Component diagram (C4Component)
```mermaid-example
C4Component
title Component diagram for Internet Banking System - API Application
@ -277,7 +273,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
Rel(ma, sign, "Uses", "JSON/HTTPS")
Rel(ma, accounts, "Uses", "JSON/HTTPS")
UpdateRelStyle(spa, sign, $offsetY="-40")
UpdateRelStyle(spa, sign, $offsetY="-40")
UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")

2
src/docs/directives.md
View File

@ -1,7 +1,5 @@
# Directives
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/directives.md)
## Directives
Directives gives a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.

54
src/docs/entityRelationshipDiagram.md
View File

@ -1,9 +1,8 @@
# Entity Relationship Diagrams
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/entityRelationshipDiagram.md)
> An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types). Wikipedia.
Note that practitioners of ER modelling almost always refer to *entity types* simply as *entities*. For example the `CUSTOMER` entity *type* would be referred to simply as the `CUSTOMER` entity. This is so common it would be inadvisable to do anything else, but technically an entity is an abstract *instance* of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them. This is why entities are always named using singular nouns.
Note that practitioners of ER modelling almost always refer to _entity types_ simply as _entities_. For example the `CUSTOMER` entity _type_ would be referred to simply as the `CUSTOMER` entity. This is so common it would be inadvisable to do anything else, but technically an entity is an abstract _instance_ of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them. This is why entities are always named using singular nouns.
Mermaid can render ER diagrams
@ -16,9 +15,9 @@ erDiagram
Entity names are often capitalised, although there is no accepted standard on this, and it is not required in Mermaid.
Relationships between entities are represented by lines with end markers representing cardinality. Mermaid uses the most popular crow's foot notation. The crow's foot intuitively conveys the possibility of many instances of the entity that it connects to.
Relationships between entities are represented by lines with end markers representing cardinality. Mermaid uses the most popular crow's foot notation. The crow's foot intuitively conveys the possibility of many instances of the entity that it connects to.
ER diagrams can be used for various purposes, ranging from abstract logical models devoid of any implementation details, through to physical models of relational database tables. It can be useful to include attribute definitions on ER diagrams to aid comprehension of the purpose and meaning of entities. These do not necessarily need to be exhaustive; often a small subset of attributes is enough. Mermaid allows them to be defined in terms of their *type* and *name*.
ER diagrams can be used for various purposes, ranging from abstract logical models devoid of any implementation details, through to physical models of relational database tables. It can be useful to include attribute definitions on ER diagrams to aid comprehension of the purpose and meaning of entities. These do not necessarily need to be exhaustive; often a small subset of attributes is enough. Mermaid allows them to be defined in terms of their _type_ and _name_.
```mermaid-example
erDiagram
@ -40,13 +39,13 @@ erDiagram
}
```
When including attributes on ER diagrams, you must decide whether to include foreign keys as attributes. This probably depends on how closely you are trying to represent relational table structures. If your diagram is a *logical* model which is not meant to imply a relational implementation, then it is better to leave these out because the associative relationships already convey the way that entities are associated. For example, a JSON data structure can implement a one-to-many relationship without the need for foreign key properties, using arrays. Similarly an object-oriented programming language may use pointers or references to collections. Even for models that are intended for relational implementation, you might decide that inclusion of foreign key attributes duplicates information already portrayed by the relationships, and does not add meaning to entities. Ultimately, it's your choice.
When including attributes on ER diagrams, you must decide whether to include foreign keys as attributes. This probably depends on how closely you are trying to represent relational table structures. If your diagram is a _logical_ model which is not meant to imply a relational implementation, then it is better to leave these out because the associative relationships already convey the way that entities are associated. For example, a JSON data structure can implement a one-to-many relationship without the need for foreign key properties, using arrays. Similarly an object-oriented programming language may use pointers or references to collections. Even for models that are intended for relational implementation, you might decide that inclusion of foreign key attributes duplicates information already portrayed by the relationships, and does not add meaning to entities. Ultimately, it's your choice.
## Syntax
### Entities and Relationships
Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to label the relationship. Each statement consists of the following parts:
Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to label the relationship. Each statement consists of the following parts:
```
<first-entity> [<relationship> <second-entity> : <relationship-label>]
@ -54,10 +53,10 @@ Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to
Where:
- `first-entity` is the name of an entity. Names must begin with an alphabetic character and may also contain digits, hyphens, and underscores.
- `relationship` describes the way that both entities inter-relate. See below.
- `second-entity` is the name of the other entity.
- `relationship-label` describes the relationship from the perspective of the first entity.
- `first-entity` is the name of an entity. Names must begin with an alphabetic character and may also contain digits, hyphens, and underscores.
- `relationship` describes the way that both entities inter-relate. See below.
- `second-entity` is the name of the other entity.
- `relationship-label` describes the relationship from the perspective of the first entity.
For example:
@ -65,30 +64,30 @@ For example:
PROPERTY ||--|{ ROOM : contains
```
This statement can be read as *a property contains one or more rooms, and a room is part of one and only one property*. You can see that the label here is from the first entity's perspective: a property contains a room, but a room does not contain a property. When considered from the perspective of the second entity, the equivalent label is usually very easy to infer. (Some ER diagrams label relationships from both perspectives, but this is not supported here, and is usually superfluous).
This statement can be read as _a property contains one or more rooms, and a room is part of one and only one property_. You can see that the label here is from the first entity's perspective: a property contains a room, but a room does not contain a property. When considered from the perspective of the second entity, the equivalent label is usually very easy to infer. (Some ER diagrams label relationships from both perspectives, but this is not supported here, and is usually superfluous).
Only the `first-entity` part of a statement is mandatory. This makes it possible to show an entity with no relationships, which can be useful during iterative construction of diagrams. If any other parts of a statement are specified, then all parts are mandatory.
Only the `first-entity` part of a statement is mandatory. This makes it possible to show an entity with no relationships, which can be useful during iterative construction of diagrams. If any other parts of a statement are specified, then all parts are mandatory.
### Relationship Syntax
The `relationship` part of each statement can be broken down into three sub-components:
- the cardinality of the first entity with respect to the second,
- whether the relationship confers identity on a 'child' entity
- the cardinality of the second entity with respect to the first
- the cardinality of the first entity with respect to the second,
- whether the relationship confers identity on a 'child' entity
- the cardinality of the second entity with respect to the first
Cardinality is a property that describes how many elements of another entity can be related to the entity in question. In the above example a `PROPERTY` can have one or more `ROOM` instances associated to it, whereas a `ROOM` can only be associated with one `PROPERTY`. In each cardinality marker there are two characters. The outermost character represents a maximum value, and the innermost character represents a minimum value. The table below summarises possible cardinalities.
Cardinality is a property that describes how many elements of another entity can be related to the entity in question. In the above example a `PROPERTY` can have one or more `ROOM` instances associated to it, whereas a `ROOM` can only be associated with one `PROPERTY`. In each cardinality marker there are two characters. The outermost character represents a maximum value, and the innermost character represents a minimum value. The table below summarises possible cardinalities.
| Value (left) | Value (right) | Meaning |
|:------------:|:-------------:|--------------------------------------------------------|
| `\|o` | `o\|` | Zero or one |
| `\|\|` | `\|\|` | Exactly one |
| `}o` | `o{` | Zero or more (no upper limit) |
| `}\|` | `\|{` | One or more (no upper limit) |
| Value (left) | Value (right) | Meaning |
| :----------: | :-----------: | ----------------------------- |
| `\|o` | `o\|` | Zero or one |
| `\|\|` | `\|\|` | Exactly one |
| `}o` | `o{` | Zero or more (no upper limit) |
| `}\|` | `\|{` | One or more (no upper limit) |
### Identification
Relationships may be classified as either *identifying* or *non-identifying* and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:
Relationships may be classified as either _identifying_ or _non-identifying_ and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:
```mmd
erDiagram
@ -98,7 +97,7 @@ erDiagram
### Attributes
Attributes can be defined for entities by specifying the entity name followed by a block containing multiple `type name` pairs, where a block is delimited by an opening `{` and a closing `}`. For example:
Attributes can be defined for entities by specifying the entity name followed by a block containing multiple `type name` pairs, where a block is delimited by an opening `{` and a closing `}`. For example:
```mermaid-example
erDiagram
@ -115,6 +114,7 @@ erDiagram
int age
}
```
The attributes are rendered inside the entity boxes:
```mermaid-example
@ -133,7 +133,7 @@ erDiagram
}
```
The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens or underscores. Other than that, there are no restrictions, and there is no implicit set of valid data types.
The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens or underscores. Other than that, there are no restrictions, and there is no implicit set of valid data types.
#### Attribute Keys and Comments
@ -159,8 +159,8 @@ erDiagram
### Other Things
- If you want the relationship label to be more than one word, you must use double quotes around the phrase
- If you don't want a label at all on a relationship, you must use an empty double-quoted string
- If you want the relationship label to be more than one word, you must use double quotes around the phrase
- If you don't want a label at all on a relationship, you must use an empty double-quoted string
## Styling

119
src/docs/flowchart.md
View File

@ -1,12 +1,10 @@
# Flowcharts - Basic Syntax
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/flowchart.md)
All Flowcharts are composed of **nodes**, the geometric shapes and **edges**, the arrows or lines. The mermaid code defines the way that these **nodes** and **edges** are made and interact.
It can also accommodate different arrow types, multi directional arrows, and linking to and from subgraphs.
> **Important note**: Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).**
> **Important note**: Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).\*\*
### A node (default)
@ -50,11 +48,11 @@ flowchart LR
Possible FlowChart orientations are:
* TB - top to bottom
* TD - top-down/ same as top to bottom
* BT - bottom to top
* RL - right to left
* LR - left to right
- TB - top to bottom
- TD - top-down/ same as top to bottom
- BT - bottom to top
- RL - right to left
- LR - left to right
## Node shapes
@ -99,7 +97,8 @@ flowchart LR
flowchart LR
id1>This is the text in the box]
```
Currently only the shape above is possible and not its mirror. *This might change with future releases.*
Currently only the shape above is possible and not its mirror. _This might change with future releases._
### A node (rhombus)
@ -109,6 +108,7 @@ flowchart LR
```
### A hexagon node
```mermaid-example
flowchart LR
id1{{This is the text in the box}}
@ -134,6 +134,7 @@ flowchart TD
flowchart TD
A[/Christmas\]
```
### Trapezoid alt
```mermaid-example
@ -225,26 +226,31 @@ flowchart LR
### Chaining of links
It is possible declare many links in the same line as per below:
```mermaid-example
flowchart LR
A -- text --> B -- text2 --> C
```
It is also possible to declare multiple nodes links in the same line as per below:
```mermaid-example
flowchart LR
a --> b & c--> d
```
You can then describe dependencies in a very expressive way. Like the one-liner below:
```mermaid-example
flowchart TB
A & B--> C & D
```
If you describe the same diagram using the the basic syntax, it will take four lines. A
word of warning, one could go overboard with this making the flowchart harder to read in
markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
This goes for expressive syntaxes as well.
```mmd
flowchart TB
A --> C
@ -263,7 +269,6 @@ flowchart LR
B --x C
```
### Multi directional arrows
There is the possibility to use multidirectional arrows.
@ -314,12 +319,12 @@ flowchart TD
For dotted or thick links, the characters to add are equals signs or dots,
as summed up in the following table:
| Length | 1 | 2 | 3 |
|-------------------|:------:|:-------:|:--------:|
| Normal | `---` | `----` | `-----` |
| Normal with arrow | `-->` | `--->` | `---->` |
| Thick | `===` | `====` | `=====` |
| Thick with arrow | `==>` | `===>` | `====>` |
| Length | 1 | 2 | 3 |
| ----------------- | :----: | :-----: | :------: |
| Normal | `---` | `----` | `-----` |
| Normal with arrow | `-->` | `--->` | `---->` |
| Thick | `===` | `====` | `=====` |
| Thick with arrow | `==>` | `===>` | `====>` |
| Dotted | `-.-` | `-..-` | `-...-` |
| Dotted with arrow | `-.->` | `-..->` | `-...->` |
@ -365,9 +370,9 @@ flowchart TB
subgraph three
c1-->c2
end
```
```
You can also set an explicit id for the subgraph.
You can also set an explicit id for the subgraph.
```mermaid-example
flowchart TB
@ -375,7 +380,7 @@ flowchart TB
subgraph ide1 [one]
a1-->a2
end
```
```
## flowcharts
@ -396,9 +401,9 @@ flowchart TB
one --> two
three --> two
two --> c2
```
```
## Direction in subgraphs
## Direction in subgraphs
With the graphtype flowcharts you can use the direction statement to set the direction which the subgraph will render like in this example.
@ -417,7 +422,7 @@ flowchart LR
end
A --> TOP --> B
B1 --> B2
```
```
## Interaction
@ -428,16 +433,16 @@ click nodeId callback
click nodeId call callback()
```
* nodeId is the id of the node
* callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.
- nodeId is the id of the node
- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.
Examples of tooltip usage below:
```html
<script>
var callback = function () {
alert('A callback was triggered');
};
var callback = function () {
alert('A callback was triggered');
};
</script>
```
@ -459,6 +464,7 @@ flowchart LR
?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/s37cjoau/3/).
Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
```mermaid-example
flowchart LR
A-->B
@ -472,36 +478,32 @@ flowchart LR
```
Beginner's tip—a full example using interactive links in a html context:
```html
<body>
<div class="mermaid">
flowchart LR
A-->B
B-->C
C-->D
click A callback "Tooltip"
click B "https://www.github.com" "This is a link"
click C call callback() "Tooltip"
click D href "https://www.github.com" "This is a link"
</div>
<div class="mermaid">
flowchart LR A-->B B-->C C-->D click A callback "Tooltip" click B "https://www.github.com"
"This is a link" click C call callback() "Tooltip" click D href "https://www.github.com"
"This is a link"
</div>
<script>
var callback = function () {
alert('A callback was triggered');
};
var config = {
startOnLoad: true,
flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
securityLevel:'loose'
};
mermaid.initialize(config);
</script>
<script>
var callback = function () {
alert('A callback was triggered');
};
var config = {
startOnLoad: true,
flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
securityLevel: 'loose',
};
mermaid.initialize(config);
</script>
</body>
```
### Comments
Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax
Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax
```mmd
flowchart LR
@ -550,7 +552,6 @@ flowchart LR
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```
#### Classes
More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that
@ -558,7 +559,6 @@ should have a different look.
a class definition looks like the example below:
```
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
```
@ -583,7 +583,6 @@ flowchart LR
classDef someclass fill:#f96;
```
### Css classes
It is also possible to predefine classes in css styles that can be applied from the graph definition as in the example
@ -593,10 +592,10 @@ below:
```html
<style>
.cssClass > rect{
fill:#FF0000;
stroke:#FFFF00;
stroke-width:4px;
.cssClass > rect {
fill: #ff0000;
stroke: #ffff00;
stroke-width: 4px;
}
</style>
```
@ -610,7 +609,6 @@ flowchart LR;
class A cssClass
```
### Default class
If a class is named default it will be assigned to all classes without specific class definitions.
@ -619,7 +617,6 @@ If a class is named default it will be assigned to all classes without specific
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
```
## Basic support for fontawesome
It is possible to add icons from fontawesome.
@ -636,12 +633,11 @@ flowchart TD
?> Mermaid is now only compatible with Font Awesome versions 4 and 5. Check that you are using the correct version of Font Awesome.
## Graph declarations with spaces between vertices and link and without semicolon
* In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.
- In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.
* A single space is allowed between vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduced to improve readability.
- A single space is allowed between vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduced to improve readability.
Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.
@ -653,7 +649,6 @@ flowchart LR
C -->|Two| E[Result two]
```
## Configuration...
Is it possible to adjust the width of the rendered flowchart.

168
src/docs/gitgraph.md
View File

@ -1,6 +1,5 @@
# Gitgraph Diagrams
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/gitgraph.md)
> A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches.
These kind of diagram are particularly helpful to developers and devops teams to share their Git branching strategies. For example, it makes it easier to visualize how git flow works.
@ -22,32 +21,34 @@ Mermaid can render Git diagrams
```
In Mermaid, we support the basic git operations like:
- *commit* : Representing a new commit on the current branch.
- *branch* : To create & switch to a new branch, setting it as the current branch.
- *checkout* : To checking out an existing branch and setting it as the current branch.
- *merge* : To merge an existing branch onto the current branch.
- _commit_ : Representing a new commit on the current branch.
- _branch_ : To create & switch to a new branch, setting it as the current branch.
- _checkout_ : To checking out an existing branch and setting it as the current branch.
- _merge_ : To merge an existing branch onto the current branch.
With the help of these key git commands, you will be able to draw a gitgraph in Mermaid very easily and quickly.
Entity names are often capitalized, although there is no accepted standard on this, and it is not required in Mermaid.
## Syntax
Mermaid syntax for a gitgraph is very straight-forward and simple. It follows a declarative-approach, where each commit is drawn on the timeline in the diagram, in order of its occurrences/presence in code. Basically, it follows the insertion order for each command.
First thing you do is to declare your diagram type using the **gitgraph** keyword. This `gitgraph` keyword, tells Mermaid that you wish to draw a gitgraph, and parse the diagram code accordingly.
Each gitgraph, is initialized with ***main*** branch. So unless you create a different branch, by-default the commits will go to the main branch. This is driven with how git works, where in the beginning you always start with the main branch (formerly called as ***master*** branch). And by-default, `main` branch is set as your ***current branch***.
Each gitgraph, is initialized with **_main_** branch. So unless you create a different branch, by-default the commits will go to the main branch. This is driven with how git works, where in the beginning you always start with the main branch (formerly called as **_master_** branch). And by-default, `main` branch is set as your **_current branch_**.
You make use of **_commit_** keyword to register a commit on the current branch. Let see how this works:
You make use of ***commit*** keyword to register a commit on the current branch. Let see how this works:
A simple gitgraph showing three commits on the default (**_main_**) branch:
A simple gitgraph showing three commits on the default (***main***) branch:
```mermaid-example
gitGraph
commit
commit
commit
```
If you look closely at the previous example, you can see the default branch `main` along with three commits. Also, notice that by default each commit has been given a unique & random ID. What if you wanted to give your own custom ID to a commit? Yes, it is possible to do that with Mermaid.
### Adding custom commit id
@ -68,9 +69,10 @@ In this example, we have given our custom IDs to the commits.
### Modifying commit type
In Mermaid, a commit can be of three type, which render a bit different in the diagram. These types are:
- `NORMAL` : Default commit type. Represented by a solid circle in the diagram
- `REVERSE` : To emphasize a commit as a reverse commit. Represented by a crossed solid circle in the diagram.
- `HIGHLIGHT` : To highlight a particular commit in the diagram. Represented by a filled rectangle in the diagram.
- `NORMAL` : Default commit type. Represented by a solid circle in the diagram
- `REVERSE` : To emphasize a commit as a reverse commit. Represented by a crossed solid circle in the diagram.
- `HIGHLIGHT` : To highlight a particular commit in the diagram. Represented by a filled rectangle in the diagram.
For a given commit you may specify its type at the time of declaring it using the `type` attribute, followed by `:` and the required type option discussed above. For example: `commit type: HIGHLIGHT`
@ -111,9 +113,10 @@ Let us see how this works with the help of the following diagram:
In this example, we have given custom tags to the commits. Also, see how we have combined all these attributes in a single commit declaration. You can mix-match these attributes as you like.
### Create a new branch
In Mermaid, in-order to create a new branch, you make use of the `branch` keyword. You also need to provide a name of the new branch. The name has to be unique and cannot be that of an existing branch. Usage example: `branch develop`
When Mermaid, reads the `branch` keyword, it creates a new branch and sets it as the current branch. Equivalent to you creating a new branch and checking it out in Git world.
When Mermaid, reads the `branch` keyword, it creates a new branch and sets it as the current branch. Equivalent to you creating a new branch and checking it out in Git world.
Let see this in an example:
@ -126,10 +129,12 @@ Let see this in an example:
commit
commit
```
In this example, see how we started with default `main` branch, and pushed two commits on that.
Then we created the `develop` branch, and all commits afterwards are put on the `develop` branch as it became the current branch.
### Checking out an existing branch
In Mermaid, in order to switch to an existing branch, you make use of the `checkout` keyword. You also need to provide a name of an existing branch. If no branch is found with the given name, it will result in console error. Usage example: `checkout develop`
When Mermaid, reads the `checkout` keyword, it finds the given branch and sets it as the current branch. Equivalent to checking out a branch in the Git world.
@ -148,16 +153,18 @@ Let see modify our previous example:
commit
commit
```
In this example, see how we started with default `main` branch, and pushed two commits on that.
Then we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch.
After this we made use of the `checkout` keyword to set the current branch as `main`, and all commit that follow are registered against the current branch, i.e. `main`.
### Merging two branches
In Mermaid, in order to merge or join to an existing branch, you make use of the `merge` keyword. You also need to provide the name of an existing branch to merge from. If no branch is found with the given name, it will result in console error. Also, you can only merge two separate branches, and cannot merge a branch with itself. In such case an error is throw.
In Mermaid, in order to merge or join to an existing branch, you make use of the `merge` keyword. You also need to provide the name of an existing branch to merge from. If no branch is found with the given name, it will result in console error. Also, you can only merge two separate branches, and cannot merge a branch with itself. In such case an error is throw.
Usage example: `merge develop`
When Mermaid, reads the `merge` keyword, it finds the given branch and its head commit (the last commit on that branch), and joins it with the head commit on the **current branch**. Each merge results in a ***merge commit***, represented in the diagram with **filled double circle**.
When Mermaid, reads the `merge` keyword, it finds the given branch and its head commit (the last commit on that branch), and joins it with the head commit on the **current branch**. Each merge results in a **_merge commit_**, represented in the diagram with **filled double circle**.
Let us modify our previous example to merge our two branches:
@ -176,6 +183,7 @@ Let us modify our previous example to merge our two branches:
commit
commit
```
In this example, see how we started with default `main` branch, and pushed two commits on that.
Then we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch.
After this we made use of the `checkout` keyword to set the current branch as `main`, and all commits that follow are registered against the current branch, i.e. `main`.
@ -183,9 +191,10 @@ After this we merge the `develop` branch onto the current branch `main`, resulti
Since the current branch at this point is still `main`, the last two commits are registered against that.
You can also decorate your merge with similar attributes as you did for the commit using:
- `id`--> To override the default ID with custom ID
- `tag`--> To add a custom tag to your merge commit
- `type`--> To override the default shape of merge commit. Here you can use other commit type mentioned earlier.
- `id`--> To override the default ID with custom ID
- `tag`--> To add a custom tag to your merge commit
- `type`--> To override the default shape of merge commit. Here you can use other commit type mentioned earlier.
And you can choose to use none, some or all of these attributes together.
For example: `merge develop id: "my_custom_id" tag: "my_custom_tag" type: REVERSE`
@ -218,20 +227,23 @@ Let us see how this works with the help of the following diagram:
```
### Cherry Pick commit from another branch
Similar to how 'git' allows you to cherry-pick a commit from **another branch** onto the **current** branch, Mermaid also supports this functionality. You can also cherry-pick a commit from another branch using the `cherry-pick` keyword.
To use the `cherry-pick` keyword, you must specify the id using the `id` attribute, followed by `:` and your desired commit id within a `""` quote. For example:
To use the `cherry-pick` keyword, you must specify the id using the `id` attribute, followed by `:` and your desired commit id within a `""` quote. For example:
`cherry-pick id: "your_custom_id"`
`cherry-pick id: "your_custom_id"`
Here, a new commit representing the cherry-pick is created on the current branch, and is visually highlighted in the diagram with a **cherry** and a tag depicting the commit id from which it is cherry-picked from.
A few important rules to note here are:
1. You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above.
2. The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch.
3. Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw.
Let see an example:
```mermaid-example
gitGraph
commit id: "ZERO"
@ -248,18 +260,24 @@ Let see an example:
checkout develop
commit id:"C"
```
## Gitgraph specific configuration options
In Mermaid, you have the option to configure the gitgraph diagram. You can configure the following options:
- `showBranches` : Boolean, default is `true`. If set to `false`, the branches are not shown in the diagram.
- `showCommitLabel` : Boolean, default is `true`. If set to `false`, the commit labels are not shown in the diagram.
- `mainBranchName` : String, default is `main`. The name of the default/root branch.
- `mainBranchOrder` : Position of the main branch in the list of branches. default is `0`, meaning, by default `main` branch is the first in the order.
- `showBranches` : Boolean, default is `true`. If set to `false`, the branches are not shown in the diagram.
- `showCommitLabel` : Boolean, default is `true`. If set to `false`, the commit labels are not shown in the diagram.
- `mainBranchName` : String, default is `main`. The name of the default/root branch.
- `mainBranchOrder` : Position of the main branch in the list of branches. default is `0`, meaning, by default `main` branch is the first in the order.
Let's look at them one by one.
## Hiding Branch names and lines
Sometimes you may want to hide the branch names and lines from the diagram. You can do this by using the `showBranches` keyword. By default its value is `true`. You can set it to `false` using directives.
Usage example:
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false}} }%%
gitGraph
@ -304,9 +322,10 @@ Usage example:
merge main
checkout develop
merge release
```
```
## Commit labels Layout: Rotated or Horizontal
Mermaid supports two types of commit labels layout. The default layout is **rotated**, which means the labels are placed below the commit circle, rotated at 45 degrees for better readability. This is particularly useful for commits with long labels.
The other option is **horizontal**, which means the labels are placed below the commit circle centred horizontally, and are not rotated. This is particularly useful for commits with short labels.
@ -332,7 +351,7 @@ gitGraph
commit
branch b2
commit
```
```
Usage example: Horizontal commit labels
@ -353,13 +372,14 @@ gitGraph
commit
branch b2
commit
```
```
## Hiding commit labels
Sometimes you may want to hide the commit labels from the diagram. You can do this by using the `showCommitLabel` keyword. By default its value is `true`. You can set it to `false` using directives.
Usage example:
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false,'showCommitLabel': false}} }%%
gitGraph
@ -404,12 +424,14 @@ Usage example:
merge main
checkout develop
merge release
```
```
## Customizing main branch name
Sometimes you may want to customize the name of the main/default branch. You can do this by using the `mainBranchName` keyword. By default its value is `main`. You can set it to any string using directives.
Usage example:
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchName': 'MetroLine1'}} }%%
gitGraph
@ -432,22 +454,26 @@ Usage example:
commit id:"Boston"
commit id:"Detroit"
commit type:REVERSE id:"SanFrancisco"
```
```
Look at the imaginary railroad map created using Mermaid. Here, we have changed the default main branch name to `MetroLine1`.
## Customizing branch ordering
In Mermaid, by default the branches are shown in the order of their definition or appearance in the diagram code.
Sometimes you may want to customize the order of the branches. You can do this by using the `order` keyword next the branch definition. You can set it to a positive number.
Mermaid follows the given precedence order of the `order` keyword.
- Main branch is always shown first as it has default order value of `0`. (unless its order is modified and changed from `0` using the `mainBranchOrder` keyword in the config)
- Next, All branches without an `order` are shown in the order of their appearance in the diagram code.
- Next, All branches with an `order` are shown in the order of their `order` value.
- Main branch is always shown first as it has default order value of `0`. (unless its order is modified and changed from `0` using the `mainBranchOrder` keyword in the config)
- Next, All branches without an `order` are shown in the order of their appearance in the diagram code.
- Next, All branches with an `order` are shown in the order of their `order` value.
To fully control the order of all the branches, you must define `order` for all the branches.
Usage example:
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true}} }%%
gitGraph
@ -456,11 +482,12 @@ Usage example:
branch test2 order: 2
branch test3 order: 1
```
```
Look at the diagram, all the branches are following the order defined.
Usage example:
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchOrder': 2}} }%%
gitGraph
@ -470,7 +497,8 @@ Usage example:
branch test3
branch test4 order: 1
```
```
Look at the diagram, here, all the branches without a specified order are drawn in their order of definition.
Then, `test4` branch is drawn because the order of `1`.
Then, `main` branch is drawn because the order of `2`.
@ -478,21 +506,21 @@ And, lastly `test1`is drawn because the order of `3`.
NOTE: Because we have overridden the `mainBranchOrder` to `2`, the `main` branch is not drawn in the beginning, instead follows the ordering.
Here, we have changed the default main branch name to `MetroLine1`.
## Themes
Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](./theming.md).
The following are the different pre-defined theme options:
- `base`
- `forest`
- `dark`
- `default`
- `neutral`
**NOTE**: To change theme you can either use the `initialize` call or *directives*. Learn more about [directives](./directives.md)
- `base`
- `forest`
- `dark`
- `default`
- `neutral`
**NOTE**: To change theme you can either use the `initialize` call or _directives_. Learn more about [directives](./directives.md)
Let's put them to use, and see how our sample diagram looks in different themes:
### Base Theme
@ -541,9 +569,9 @@ Let's put them to use, and see how our sample diagram looks in different themes:
merge main
checkout develop
merge release
```
```
### Forest Theme
### Forest Theme
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
@ -589,7 +617,8 @@ Let's put them to use, and see how our sample diagram looks in different themes:
merge main
checkout develop
merge release
```
```
### Default Theme
```mermaid-example
@ -636,7 +665,8 @@ Let's put them to use, and see how our sample diagram looks in different themes:
merge main
checkout develop
merge release
```
```
### Dark Theme
```mermaid-example
@ -683,9 +713,9 @@ Let's put them to use, and see how our sample diagram looks in different themes:
merge main
checkout develop
merge release
```
```
### Neutral Theme
### Neutral Theme
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
@ -731,9 +761,10 @@ Let's put them to use, and see how our sample diagram looks in different themes:
merge main
checkout develop
merge release
```
```
## Customize using Theme Variables
Mermaid allows you to customize your diagram using theme variables which govern the look and feel of various elements of the diagram.
For understanding let us take a sample diagram with theme `default`, the default values of the theme variables is picked automatically from the theme. Later on we will see how to override the default values of the theme variables.
@ -755,10 +786,14 @@ See how the default theme is used to set the colors for the branches:
branch featureA
commit
```
> #### IMPORTANT:
> Mermaid supports the theme variables to override the default values for **up to 8 branches**, i.e., you can set the color/styling of up to 8 branches using theme variables. After this threshold of 8 branches, the theme variables are reused in the cyclic manner, i.e. the 9th branch will use the color/styling of the 1st branch, or the branch at index position '8' will use the color/styling of the branch at index position '0'.
*More on this in the next section. See examples on **Customizing branch label colors** below*
>
> Mermaid supports the theme variables to override the default values for **up to 8 branches**, i.e., you can set the color/styling of up to 8 branches using theme variables. After this threshold of 8 branches, the theme variables are reused in the cyclic manner, i.e. the 9th branch will use the color/styling of the 1st branch, or the branch at index position '8' will use the color/styling of the branch at index position '0'.
> _More on this in the next section. See examples on **Customizing branch label colors** below_
### Customizing branch colors
You can customize the branch colors using the `git0` to `git7` theme variables. Mermaid allows you to set the colors for up-to 8 branches, where `git0` variable will drive the value of the first branch, `git1` will drive the value of the second branch and so on.
NOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values.
@ -792,8 +827,11 @@ Now let's override the default values for the `git0` to `git3` variables:
commit
```
See how the branch colors are changed to the values specified in the theme variables.
### Customizing branch label colors
You can customize the branch label colors using the `gitBranchLabel0` to `gitBranchLabel7` theme variables. Mermaid allows you to set the colors for up-to 8 branches, where `gitBranchLabel0` variable will drive the value of the first branch label, `gitBranchLabel1` will drive the value of the second branch label and so on.
Lets see how the default theme is used to set the colors for the branch labels:
@ -827,8 +865,11 @@ Now let's override the default values for the `gitBranchLabel0` to `gitBranchLab
checkout branch1
commit
```
Here, you can see that `branch8` and `branch9` colors and the styles are being picked from branch at index position `0` (`main`) and `1`(`branch1`) respectively, i.e., **branch themeVariables are repeated cyclically**.
### Customizing Commit colors
You can customize commit using the `commitLabelColor` and `commitLabelBackground` theme variables for changes in the commit label color and background color respectively.
Example:
@ -853,10 +894,12 @@ Now let's override the default values for the `commitLabelColor` to `commitLabel
commit
```
See how the commit label color and background color are changed to the values specified in the theme variables.
### Customizing Commit Label Font Size
You can customize commit using the `commitLabelFontSize` theme variables for changing in the font soze of the commit label .
You can customize commit using the `commitLabelFontSize` theme variables for changing in the font soze of the commit label .
Example:
Now let's override the default values for the `commitLabelFontSize` variable:
@ -881,10 +924,12 @@ Now let's override the default values for the `commitLabelFontSize` variable:
commit
```
See how the commit label font size changed.
### Customizing Tag Label Font Size
You can customize commit using the `tagLabelFontSize` theme variables for changing in the font soze of the tag label .
You can customize commit using the `tagLabelFontSize` theme variables for changing in the font soze of the tag label .
Example:
Now let's override the default values for the `tagLabelFontSize` variable:
@ -909,9 +954,12 @@ Now let's override the default values for the `tagLabelFontSize` variable:
commit
```
See how the tag label font size changed.
### Customizing Tag colors
You can customize tag using the `tagLabelColor`,`tagLabelBackground` and `tagLabelBorder` theme variables for changes in the tag label color,tag label background color and tag label border respectively.
You can customize tag using the `tagLabelColor`,`tagLabelBackground` and `tagLabelBorder` theme variables for changes in the tag label color,tag label background color and tag label border respectively.
Example:
Now let's override the default values for the `tagLabelColor`, `tagLabelBackground` and to `tagLabelBorder` variables:
@ -935,8 +983,11 @@ Now let's override the default values for the `tagLabelColor`, `tagLabelBackgrou
commit
```
See how the tag colors are changed to the values specified in the theme variables.
### Customizing Highlight commit colors
You can customize the highlight commit colors in relation to the branch it is on using the `gitInv0` to `gitInv7` theme variables. Mermaid allows you to set the colors for up-to 8 branches specific highlight commit, where `gitInv0` variable will drive the value of the first branch's highlight commits, `gitInv1` will drive the value of the second branch's highlight commit label and so on.
Example:
@ -961,8 +1012,5 @@ Now let's override the default values for the `git0` to `git3` variables:
commit
```
See how the highlighted commit color on the first branch is changed to the value specified in the theme variable `gitInv0`.

39
src/docs/sequenceDiagram.md
View File

@ -1,6 +1,5 @@
# Sequence diagrams
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/sequenceDiagram.md)
> A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
Mermaid can render sequence diagrams.
@ -38,6 +37,7 @@ sequenceDiagram
### Actors
If you specifically want to use the actor symbol instead of a rectangle with text you can do so by using actor statements as per below.
```mermaid-example
sequenceDiagram
actor Alice
@ -68,15 +68,15 @@ Messages can be of two displayed either solid or with a dotted line.
There are six types of arrows currently supported:
| Type | Description |
| ---- | ------------------------------------------- |
| -> | Solid line without arrow |
| --> | Dotted line without arrow |
| ->> | Solid line with arrowhead |
| -->> | Dotted line with arrowhead |
| -x | Solid line with a cross at the end |
| --x | Dotted line with a cross at the end. |
| -) | Solid line with an open arrow at the end (async) |
| Type | Description |
| ---- | ------------------------------------------------ |
| -> | Solid line without arrow |
| --> | Dotted line without arrow |
| ->> | Solid line with arrowhead |
| -->> | Dotted line with arrowhead |
| -x | Solid line with a cross at the end |
| --x | Dotted line with a cross at the end. |
| -) | Solid line with an open arrow at the end (async) |
| --) | Dotted line with a open arrow at the end (async) |
## Activations
@ -335,7 +335,7 @@ sequenceDiagram
## Comments
Comments can be entered within a sequence diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
Comments can be entered within a sequence diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
```mmd
sequenceDiagram
@ -363,9 +363,9 @@ Because semicolons can be used instead of line breaks to define the markup, you
It is possible to get a sequence number attached to each arrow in a sequence diagram. This can be configured when adding mermaid to the website as shown below:
```html
<script>
mermaid.initialize({ sequence: { showSequenceNumbers: true }, });
</script>
<script>
mermaid.initialize({ sequence: { showSequenceNumbers: true } });
</script>
```
It can also be be turned on via the diagram code as in the diagram:
@ -385,12 +385,14 @@ sequenceDiagram
## Actor Menus
Actors can have popup-menus containing individualized links to external pages. For example, if an actor represented a web service, useful links might include a link to the service health dashboard, repo containing the code for the service, or a wiki page describing the service.
Actors can have popup-menus containing individualized links to external pages. For example, if an actor represented a web service, useful links might include a link to the service health dashboard, repo containing the code for the service, or a wiki page describing the service.
This can be configured by adding one or more link lines with the format:
```
link <actor>: <link-label> @ <link-url>
```
```mmd
sequenceDiagram
participant Alice
@ -405,6 +407,7 @@ sequenceDiagram
```
#### Advanced Menu Syntax
There is an advanced syntax that relies on JSON formatting. If you are comfortable with JSON format, then this exists as well.
This can be configured by adding the links lines with the format:
@ -544,7 +547,7 @@ mermaid.sequenceConfig = {
boxTextMargin: 5,
noteMargin: 10,
messageMargin: 35,
mirrorActors: true
mirrorActors: true,
};
```
@ -555,8 +558,8 @@ mermaid.sequenceConfig = {
| mirrorActors | Turns on/off the rendering of actors below the diagram as well as above it | false |
| bottomMarginAdj | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1 |
| actorFontSize | Sets the font size for the actor's description | 14 |
| actorFontFamily | Sets the font family for the actor's description | "Open Sans", sans-serif |
| actorFontWeight | Sets the font weight for the actor's description | "Open Sans", sans-serif |
| actorFontFamily | Sets the font family for the actor's description | "Open Sans", sans-serif |
| actorFontWeight | Sets the font weight for the actor's description | "Open Sans", sans-serif |
| noteFontSize | Sets the font size for actor-attached notes | 14 |
| noteFontFamily | Sets the font family for actor-attached notes | "trebuchet ms", verdana, arial |
| noteFontWeight | Sets the font weight for actor-attached notes | "trebuchet ms", verdana, arial |

169
src/docs/theming.md
View File

@ -1,15 +1,15 @@
# Theme Configuration
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/theming.md)
With Version 8.7.0 Mermaid comes out with a system for dynamic and integrated configuration of themes. The intent is to increase the customizability and ease of styling for mermaid diagrams.
With Version 8.7.0 Mermaid comes out with a system for dynamic and integrated configuration of themes. The intent is to increase the customizability and ease of styling for mermaid diagrams.
The theme can be altered by changing the root level variable `theme` variable in the configuration. To change it for the whole site you must use the `initialize` call. To do it for just for a single diagram you can use the `%%init%%` directive
Themes follow and build upon the Levels of Configuration, and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](./8.6.0_docs.md).
## Deployable Themes
The following are a list of **Deployable themes**, sample `%%init%%` directives and `initialize` calls.
1. **base**- Designed to be modified, as the name implies it is supposed to be used as the base for making custom themes.
2. **forest**- A theme full of light greens that is easy on the eyes.
@ -20,21 +20,24 @@ The following are a list of **Deployable themes**, sample `%%init%%` directives
5. **neutral**- The theme to be used for black and white printing.
## Site-wide Themes
Site-wide themes are declared via `initialize` by site owners.
Example of `Initialize` call setting `theme` to `base`:
```javascript
mermaidAPI.initialize({
'securityLevel': 'loose', 'theme': 'base'
});
mermaidAPI.initialize({
securityLevel: 'loose',
theme: 'base',
});
```
**Notes**: Only site owners can use the `mermaidAPI.initialize` call, to set values. Site-Users will have to use `%%init%%` to modify or create the theme for their diagrams.
## Themes at the Local or Current Level
When Generating a diagram using on a webpage that supports mermaid. It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array.
When Generating a diagram using on a webpage that supports mermaid. It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array.
```mmd
%%{init: {'theme':'base'}}%%
@ -42,7 +45,6 @@ When Generating a diagram using on a webpage that supports mermaid. It is also p
a --> b
```
Here is an example of how `%%init%%` can set the theme to 'base', this assumes that `themeVariables` are set to default:
```mermaid-example
@ -62,17 +64,17 @@ Here is an example of how `%%init%%` can set the theme to 'base', this assumes t
G
end
```
# List of Themes
# List of Themes
# Customizing Themes with `themeVariables`
The easiest way to make a custom theme is to start with the base theme, and just modify theme variables through `themeVariables`, via `%%init%%`.
| Parameter | Description | Type | Required | Objects contained |
| Parameter | Description | Type | Required | Objects contained |
| -------------- | ------------------------------------------------------------------ | ----- | -------- | ---------------------------------- |
| themeVariables | Array containing objects, modifiable with the `%%init%%` directive | Array | Required | primaryColor, lineColor, textColor |
**Here is an example of overriding `primaryColor` through `themeVariables` and giving everything a different look, using `%%init%%`.**
```mermaid-example
@ -93,7 +95,6 @@ The easiest way to make a custom theme is to start with the base theme, and just
end
```
**Notes:**
Leaving it empty will set all variable values to default.
@ -105,36 +106,35 @@ Color definitions have certain interactions in mermaid, this is in order to ensu
You can create your own themes, by changing any of the given variables below. If you are using a dark background, set dark mode to true to adjust the colors. It is possible to override the calculations using the variable names below, with `%%init%%` if you wish to style it differently.
## Theme Variables Reference Table
```note
Variables that are unique to some diagrams can be affected by changes in Theme Variables
```
| Variable | Default/Base/Factor value | Calc | Description |
| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- |
| darkMode | false | | Boolean Value that dictates how to calculate colors. "true" will activate darkmode. |
| Variable | Default/Base/Factor value | Calc | Description |
| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- | --- | --- |
| darkMode | false | | Boolean Value that dictates how to calculate colors. "true" will activate darkmode. |
| background | #f4f4f4 | | Used to calculate color for items that should either be background colored or contrasting to the background. |
| fontFamily | "trebuchet ms", verdana, arial | | |
| fontSize | 16px | | Font Size, in pixels |
| fontSize | 16px | | Font Size, in pixels |
| primaryColor | #fff4dd | | Color to be used as background in nodes, other colors will be derived from this |
| primaryBorderColor | based on primaryColor | * | Color to be used as border in nodes using primaryColor |
| primaryTextColor | based on darkMode #ddd/#333 | * | Color to be used as text color in nodes using primaryColor
| secondaryColor | based on primaryColor | * | |
| secondaryBorderColor | based on secondaryColor | * | Color to be used as border in nodes using secondaryColor |
| secondaryTextColor | based on secondaryColor | * | Color to be used as text color in nodes using secondaryColor
| tertiaryColor | based on primaryColor | * | | | |
| tertiaryBorderColor | based on tertiaryColor | * | Color to be used as border in nodes using tertiaryColor |
| tertiaryTextColor | based on tertiaryColor | * | Color to be used as text color in nodes using tertiaryColor |
| primaryBorderColor | based on primaryColor | \* | Color to be used as border in nodes using primaryColor |
| primaryTextColor | based on darkMode #ddd/#333 | \* | Color to be used as text color in nodes using primaryColor |
| secondaryColor | based on primaryColor | \* | |
| secondaryBorderColor | based on secondaryColor | \* | Color to be used as border in nodes using secondaryColor |
| secondaryTextColor | based on secondaryColor | \* | Color to be used as text color in nodes using secondaryColor |
| tertiaryColor | based on primaryColor | \* | | | |
| tertiaryBorderColor | based on tertiaryColor | \* | Color to be used as border in nodes using tertiaryColor |
| tertiaryTextColor | based on tertiaryColor | \* | Color to be used as text color in nodes using tertiaryColor |
| noteBkgColor | #fff5ad | | Color used as background in notes |
| noteTextColor | #333 | | Text color in note rectangles. |
| noteBorderColor | based on noteBkgColor | * | Border color in note rectangles. |
| lineColor | based on background | * | |
| textColor | based on primaryTextColor | * | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in gantt diagram |
| mainBkg | based on primaryColor | * | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc |
| errorBkgColor | tertiaryColor | * | Color for syntax error message |
| errorTextColor | tertiaryTextColor | * | Color for syntax error message |
| noteTextColor | #333 | | Text color in note rectangles. |
| noteBorderColor | based on noteBkgColor | \* | Border color in note rectangles. |
| lineColor | based on background | \* | |
| textColor | based on primaryTextColor | \* | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in gantt diagram |
| mainBkg | based on primaryColor | \* | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc |
| errorBkgColor | tertiaryColor | \* | Color for syntax error message |
| errorTextColor | tertiaryTextColor | \* | Color for syntax error message |
# What follows are Variables, specific to different diagrams and charts.
@ -142,64 +142,64 @@ Variables that are unique to some diagrams can be affected by changes in Theme V
## Flowchart
| Variable | Default/ Associated Value | Calc | Description |
| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- |
| nodeBorder | primaryBorderColor | * | Node Border Color |
| clusterBkg | tertiaryColor | * | Background in subgraphs |
| clusterBorder | tertiaryBorderColor | * | Cluster Border Color |
| defaultLinkColor | lineColor | * | Link Color |
| titleColor | tertiaryTextColor | * | Title Color |
| edgeLabelBackground | based on secondaryColor | * | |
| nodeTextColor | primaryTextColor | * | Color for text inside Nodes. |
| Variable | Default/ Associated Value | Calc | Description |
| ------------------- | ------------------------- | ---- | ---------------------------- |
| nodeBorder | primaryBorderColor | \* | Node Border Color |
| clusterBkg | tertiaryColor | \* | Background in subgraphs |
| clusterBorder | tertiaryBorderColor | \* | Cluster Border Color |
| defaultLinkColor | lineColor | \* | Link Color |
| titleColor | tertiaryTextColor | \* | Title Color |
| edgeLabelBackground | based on secondaryColor | \* | |
| nodeTextColor | primaryTextColor | \* | Color for text inside Nodes. |
# sequence diagram
| name | Default value | Calc | Description |
| --------------------- | ----------------------- | ---- | ----------- |
| actorBorder | primaryBorderColor | * | Actor Border Color |
| actorBkg | mainBkg | * | Actor Background Color |
| actorTextColor | primaryTextColor | * | Actor Text Color |
| actorLineColor | grey | * | Actor Line Color |
| signalColor | textColor | * | Signal Color |
| signalTextColor | textColor | * | Signal Text Color |
| labelBoxBkgColor | actorBkg | * | Label Box Background Color |
| labelBoxBorderColor | actorBorder | * | Label Box Border Color |
| labelTextColor | actorTextColor | * | Label Text Color |
| loopTextColor | actorTextColor | * | Loop ext Color |
| activationBorderColor | based on secondaryColor | * | Activation Border Color |
| activationBkgColor | secondaryColor | * | Activation Background Color |
| sequenceNumberColor | based on lineColor | * | Sequence Number Color |
| name | Default value | Calc | Description |
| --------------------- | ----------------------- | ---- | --------------------------- |
| actorBorder | primaryBorderColor | \* | Actor Border Color |
| actorBkg | mainBkg | \* | Actor Background Color |
| actorTextColor | primaryTextColor | \* | Actor Text Color |
| actorLineColor | grey | \* | Actor Line Color |
| signalColor | textColor | \* | Signal Color |
| signalTextColor | textColor | \* | Signal Text Color |
| labelBoxBkgColor | actorBkg | \* | Label Box Background Color |
| labelBoxBorderColor | actorBorder | \* | Label Box Border Color |
| labelTextColor | actorTextColor | \* | Label Text Color |
| loopTextColor | actorTextColor | \* | Loop ext Color |
| activationBorderColor | based on secondaryColor | \* | Activation Border Color |
| activationBkgColor | secondaryColor | \* | Activation Background Color |
| sequenceNumberColor | based on lineColor | \* | Sequence Number Color |
# state colors
| name | Default value | Calc | Description |
| ------------- | ---------------- | ---- | ------------------------------------------- |
| labelColor | primaryTextColor | * | |
| altBackground | tertiaryColor | * | Used for background in deep composite states |
| name | Default value | Calc | Description |
| ------------- | ---------------- | ---- | -------------------------------------------- |
| labelColor | primaryTextColor | \* | |
| altBackground | tertiaryColor | \* | Used for background in deep composite states |
# class colors
| name | Default value | Calc | Description |
| --------- | ------------- | ---- | ---------------------- |
| classText | textColor | * | Color of Text in class diagrams |
| name | Default value | Calc | Description |
| --------- | ------------- | ---- | ------------------------------- |
| classText | textColor | \* | Color of Text in class diagrams |
# User journey colors
| name | Default value | Calc | Description |
| --------- | ------------------------ | ---- | --------------------------------------- |
| fillType0 | primaryColor | * | Fill for 1st section in journey diagram |
| fillType1 | secondaryColor | * | Fill for 2nd section in journey diagram |
| fillType2 | based on primaryColor | * | Fill for 3rd section in journey diagram |
| fillType3 | based on secondaryColor | * | Fill for 4th section in journey diagram |
| fillType4 | based on primaryColor | * | Fill for 5th section in journey diagram |
| fillType5 | based on secondaryColor | * | Fill for 6th section in journey diagram |
| fillType6 | based on primaryColor | * | Fill for 7th section in journey diagram |
| fillType7 | based on secondaryColor | * | Fill for 8th section in journey diagram |
**Notes: Values are meant to create an alternating look.
| name | Default value | Calc | Description |
| --------- | ----------------------- | ---- | --------------------------------------- |
| fillType0 | primaryColor | \* | Fill for 1st section in journey diagram |
| fillType1 | secondaryColor | \* | Fill for 2nd section in journey diagram |
| fillType2 | based on primaryColor | \* | Fill for 3rd section in journey diagram |
| fillType3 | based on secondaryColor | \* | Fill for 4th section in journey diagram |
| fillType4 | based on primaryColor | \* | Fill for 5th section in journey diagram |
| fillType5 | based on secondaryColor | \* | Fill for 6th section in journey diagram |
| fillType6 | based on primaryColor | \* | Fill for 7th section in journey diagram |
| fillType7 | based on secondaryColor | \* | Fill for 8th section in journey diagram |
\*\*Notes: Values are meant to create an alternating look.
# Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`.
```mermaid-example
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
graph TD
@ -218,12 +218,11 @@ Variables that are unique to some diagrams can be affected by changes in Theme V
end
```
**This got a bit too dark and bit too colorful. With some easy steps this can be fixed:
* Make the primary color a little lighter
* set the tertiary color to a reddish shade as well
* make the edge label background differ from the subgraph by setting the edgeLabelBackground
\*\*This got a bit too dark and bit too colorful. With some easy steps this can be fixed:
- Make the primary color a little lighter
- set the tertiary color to a reddish shade as well
- make the edge label background differ from the subgraph by setting the edgeLabelBackground
```mermaid-example
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%
@ -255,6 +254,7 @@ When adjusting a theme it might be helpful to look at how your preferred theme g
In the following examples, the directive `init` is used, with the `theme` being declared as `base`. For more information on using directives, read the documentation for [Version 8.6.0](/8.6.0_docs.md)
### Flowchart
```mmd
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
graph TD
@ -272,6 +272,7 @@ In the following examples, the directive `init` is used, with the `theme` being
G
end
```
```mermaid
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
graph TD
@ -291,6 +292,7 @@ In the following examples, the directive `init` is used, with the `theme` being
```
### Flowchart (beta)
```mermaid-example
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
flowchart TD
@ -310,6 +312,7 @@ In the following examples, the directive `init` is used, with the `theme` being
```
### Sequence diagram
```mermaid-example
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
sequenceDiagram
@ -330,6 +333,7 @@ In the following examples, the directive `init` is used, with the `theme` being
```
### Class diagram
```mermaid-example
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
@ -357,6 +361,7 @@ classDiagram
```
### Gantt
```mermaid-example
gantt
dateFormat YYYY-MM-DD
@ -388,6 +393,7 @@ gantt
```
### State diagram
```mermaid-example
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
stateDiagram
@ -464,6 +470,7 @@ stateDiagram-v2
```
### User journey diagram
```mermaid-example
journey
title My working day

143
src/docs/usage.md
View File

@ -1,6 +1,4 @@
# Usage
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/usage.md)
# Usage
Mermaid is a JavaScript tool that makes use of a Markdown based syntax to render customizable diagrams, charts and visualizations.
@ -39,29 +37,27 @@ We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermai
**Hosting mermaid on a web page.**
>Note:This topic explored in greater depth in the [User Guide for Beginners](./n00b-gettingStarted.md)
> Note:This topic explored in greater depth in the [User Guide for Beginners](./n00b-gettingStarted.md)
The easiest way to integrate mermaid on a web page requires three elements:
1. Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example:
```html
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
```
2. The `mermaidAPI` call, in a separate `script` tag. Example:
```html
<script>mermaid.initialize({startOnLoad:true});
<script>
mermaid.initialize({ startOnLoad: true });
</script>
```
3. A graph definition, inside `<div>` tags labeled `class=mermaid`. Example:
```html
<div class="mermaid">
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</div>
<div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div>
```
**Following these directions, mermaid starts at page load and (when the page has loaded) it will
@ -72,41 +68,37 @@ locate the graph definitions inside the `div` tags with `class="mermaid"` and re
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div class="mermaid">
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</div>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});
</script>
</body>
<head>
<meta charset="utf-8" />
</head>
<body>
<div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({ startOnLoad: true });
</script>
</body>
</html>
```
## Notes:
An id attribute is also added to mermaid tags without one.
Mermaid can load multiple diagrams, in the same page.
> Try it out, save this code as HTML and load it using any browser.(Except Internet Explorer, please don't use Internet Explorer.)
## Enabling Click Event and Tags in Nodes
A `securityLevel` configuration has to first be cleared, `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use.
A `securityLevel` configuration has to first be cleared, `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use.
**It is the site owner's responsibility to discriminate between trustworthy and untrustworthy user-bases and we encourage the use of discretion.**
**It is the site owner's responsibility to discriminate between trustworthy and untrustworthy user-bases and we encourage the use of discretion.**
## securityLevel
| Parameter | Description | Type | Required | Values |
| ------------- | --------------------------------- | ------ | -------- | ------------------------- |
| Parameter | Description | Type | Required | Values |
| ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ |
| securityLevel | Level of trust for parsed diagram | String | Required | 'sandbox', 'strict', 'loose', 'antiscript' |
Values:
@ -114,12 +106,11 @@ Values:
- **strict**: (**default**) tags in text are encoded, click functionality is disabled
- **loose**: tags in text are allowed, click functionality is enabled
- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any JavaScript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.
- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any JavaScript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.
```note
This changes the default behaviour of mermaid so that after upgrade to 8.2, unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled.
**sandbox** security level is still in the beta version.
**sandbox** security level is still in the beta version.
```
**If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing . This allows clicks and tags are allowed.**
@ -128,18 +119,17 @@ This changes the default behaviour of mermaid so that after upgrade to 8.2, unle
```javascript
mermaidAPI.initialize({
securityLevel: 'loose'
securityLevel: 'loose',
});
```
### Labels out of bounds
If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the
whole page to load (dom + assets, particularly the fonts file).
```javascript
$(document).load(function() {
$(document).load(function () {
mermaid.initialize();
});
```
@ -147,7 +137,7 @@ $(document).load(function() {
or
```javascript
$(document).ready(function() {
$(document).ready(function () {
mermaid.initialize();
});
```
@ -168,22 +158,22 @@ By default, `mermaid.init` will be called when the document is ready, finding al
`class="mermaid"`. If you are adding content after mermaid is loaded, or otherwise need
finer-grained control of this behavior, you can call `init` yourself with:
- a configuration object
- some nodes, as
- a node
- an array-like of nodes
- or W3C selector that will find your nodes
- a configuration object
- some nodes, as
- a node
- an array-like of nodes
- or W3C selector that will find your nodes
Example:
```javascript
mermaid.init({noteMargin: 10}, ".someOtherClass");
mermaid.init({ noteMargin: 10 }, '.someOtherClass');
```
Or with no config object, and a jQuery selection:
```javascript
mermaid.init(undefined, $("#someId .yetAnotherClass"));
mermaid.init(undefined, $('#someId .yetAnotherClass'));
```
```warning
@ -194,7 +184,6 @@ This type of integration is deprecated. Instead the preferred way of handling mo
mermaid fully supports webpack. Here is a [working demo](https://github.com/mermaidjs/mermaid-webpack-demo).
## API usage
The main idea of the API is to be able to call a render function with the graph definition as a string. The render function
@ -207,14 +196,19 @@ The example below show an outline of how this could be used. The example just lo
<script src="mermaid.js"></script>
<script>
mermaid.mermaidAPI.initialize({ startOnLoad:false }); $(function(){ // Example of using the API var
element = document.querySelector("#graphDiv"); var insertSvg = function(svgCode, bindFunctions){
element.innerHTML = svgCode; }; var graphDefinition = 'graph TB\na-->b'; var graph =
mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg); });
mermaid.mermaidAPI.initialize({ startOnLoad: false });
$(function () {
// Example of using the API var
element = document.querySelector('#graphDiv');
var insertSvg = function (svgCode, bindFunctions) {
element.innerHTML = svgCode;
};
var graphDefinition = 'graph TB\na-->b';
var graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
});
</script>
```
### Binding events
Sometimes the generated graph also has defined interactions like tooltip and click events. When using the API one must
@ -224,9 +218,9 @@ The example code below is an extract of what mermaid does when using the API. Th
bind events to an SVG when using the API for rendering.
```javascript
var insertSvg = function(svgCode, bindFunctions) {
var insertSvg = function (svgCode, bindFunctions) {
element.innerHTML = svgCode;
if(typeof callback !== 'undefined'){
if (typeof callback !== 'undefined') {
callback(id);
}
bindFunctions(element);
@ -234,8 +228,7 @@ var insertSvg = function(svgCode, bindFunctions) {
var id = 'theGraph';
mermaidAPI.render(id,txt,insertSvg, element);
mermaidAPI.render(id, txt, insertSvg, element);
```
1. The graph is generated using the render call.
@ -244,7 +237,6 @@ mermaidAPI.render(id,txt,insertSvg, element);
4. Insert the SVG code into the DOM for presentation.
5. Call the binding function that binds the events.
## Example of a marked renderer
This is the renderer used for transforming the documentation from Markdown to html with mermaid diagrams in the html.
@ -252,11 +244,10 @@ This is the renderer used for transforming the documentation from Markdown to ht
```javascript
var renderer = new marked.Renderer();
renderer.code = function (code, language) {
if(code.match(/^sequenceDiagram/)||code.match(/^graph/)){
return '<div class="mermaid">'+code+'</div>';
}
else{
return '<pre><code>'+code+'</code></pre>';
if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) {
return '<div class="mermaid">' + code + '</div>';
} else {
return '<pre><code>' + code + '</code></pre>';
}
};
```
@ -283,7 +274,6 @@ module.exports = (options) ->
renderer
```
## Advanced usage
**Syntax validation without rendering (Work in Progress)**
@ -299,23 +289,23 @@ function in order to handle the error in an application-specific way.
The code-example below in meta code illustrates how this could work:
```javascript
mermaid.parseError = function(err,hash){
mermaid.parseError = function (err, hash) {
displayErrorInGui(err);
};
var textFieldUpdated = function(){
var textFieldUpdated = function () {
var textStr = getTextFromFormField('code');
if(mermaid.parse(textStr)){
reRender(textStr)
if (mermaid.parse(textStr)) {
reRender(textStr);
}
};
bindEventHandler('change', 'code', textFieldUpdated);
```
**Alternative to mermaid.parse():**
One effective and more future-proof method of validating your graph definitions, is to paste and render them via the [Mermaid Live Editor](https://mermaid.live/). This will ensure that your code is compliant with the syntax of Mermaid's most recent version.
**Alternative to mermaid.parse():**
One effective and more future-proof method of validating your graph definitions, is to paste and render them via the [Mermaid Live Editor](https://mermaid.live/). This will ensure that your code is compliant with the syntax of Mermaid's most recent version.
## Configuration
@ -323,14 +313,13 @@ Mermaid takes a number of options which lets you tweak the rendering of the diag
setting the options in mermaid.
1. Instantiation of the configuration using the initialize call
2. *Using the global mermaid object* - **Deprecated**
3. *using the global mermaid_config object* - **Deprecated**
2. _Using the global mermaid object_ - **Deprecated**
3. _using the global mermaid_config object_ - **Deprecated**
4. Instantiation of the configuration using the **mermaid.init** call- **Deprecated**
The list above has two ways too many of doing this. Three are deprecated and will eventually be removed. The list of
configuration objects are described [in the mermaidAPI documentation](Setup.md).
## Using the `mermaidAPI.initialize`/`mermaid.initialize` call
The future proof way of setting the configuration is by using the initialization call to mermaid or mermaidAPI depending
@ -339,7 +328,7 @@ on what kind of integration you use.
```html
<script src="../dist/mermaid.js"></script>
<script>
var config = { startOnLoad:true, flowchart:{ useMaxWidth:false, htmlLabels:true } };
var config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
mermaid.initialize(config);
</script>
```
@ -355,8 +344,8 @@ This is the preferred way of configuring mermaid.
Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
approach are:
* mermaid.startOnLoad
* mermaid.htmlLabels
- mermaid.startOnLoad
- mermaid.htmlLabels
```javascript
mermaid.startOnLoad = true;
@ -371,8 +360,8 @@ This way of setting the configuration is deprecated. Instead the preferred way i
It is possible to set some configuration via the mermaid object. The two parameters that are supported using this
approach are:
* mermaid_config.startOnLoad
* mermaid_config.htmlLabels
- mermaid_config.startOnLoad
- mermaid_config.htmlLabels
```javascript
mermaid_config.startOnLoad = true;
@ -386,8 +375,8 @@ This way of setting the configuration is deprecated. Instead the preferred way i
To set some configuration via the mermaid object. The two parameters that are supported using this approach are:
* mermaid_config.startOnLoad
* mermaid_config.htmlLabels
- mermaid_config.startOnLoad
- mermaid_config.htmlLabels
```javascript
mermaid_config.startOnLoad = true;