marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-12-03 19:17:00 +01:00
Code Issues Packages 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
20 changed files with 881 additions and 879 deletions
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>
```