Merge branch 'master' into develop
This commit is contained in:
Knut Sveidqvist
commit
96ac13cdac
|
|
@ -6,8 +6,8 @@
|
|||
|
||||
With version 8.6.0 comes the release of directives for mermaid, a new system for modifying configurations, with the aim of establishing centralized, sane defaults and simple implementation.
|
||||
|
||||
`directives` allow for a diagram specific overriding of `config`, as it has been discussed in [Configurations](./Setup.md).
|
||||
This allows site users to input modifications to `config` alongside diagram definitions, when creating diagrams on a private webpage that supports mermaid.
|
||||
`directives` allow for a single-use overwriting of `config`, as it has been discussed in [Configurations](./Setup.md).
|
||||
This allows site Diagram Authors to instantiate temporary modifications to `config` through the use of [Directives](), which are parsed before rendering diagram definitions. This allows the Diagram Authors to alter the appearance of the diagrams.
|
||||
|
||||
**A likely application for this is in the creation of diagrams/charts inside company/organizational webpages, that rely on mermaid for diagram and chart rendering.**
|
||||
|
||||
|
|
|
|||
277
docs/About.md
277
docs/About.md
|
|
@ -1,277 +0,0 @@
|
|||
# About Mermaid
|
||||
|
||||
**Mermaid lets you represent diagrams using text and code.** This simplifies maintianing complex diagrams. It is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. The main purpose of Mermaid is to help Documentation catch up with Development.
|
||||
|
||||
Many editors, wikis and other tools have mermaid integrations already making it easy to start using mermaid. A few of those are described in [Simple start to write diagrams](./n00b-GettingStarted.md).
|
||||
|
||||
|
||||
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/About.md)
|
||||
|
||||
|
||||
[](https://travis-ci.org/mermaid-js/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://percy.io/Mermaid/mermaid)
|
||||
|
||||
<!-- <Main description> -->
|
||||
> 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 Catch-22 by cutting the time, effort and tooling that is required to create modifiable diagrams and charts, for smarter and more reusable content.
|
||||
Mermaid, as a text-based diagramming tool allows for quick and easy updates, it can also be made part of production scripts (and other pieces of code), to make documentation much easier.
|
||||
With Mermaid less time needs to be spent on making diagrams, as a separate documentation task. <br/>
|
||||
|
||||
> Mermaid is a Diagramming tool for everyone.
|
||||
|
||||
Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor), Visit the [Tutorials Page](./Tutorials.md) for the Live Editor video tutorials.
|
||||
|
||||
Want to see what can be built with mermaid, or what applications already support it? Read the [Integrations and Usages for Mermaid](./integrations.md).
|
||||
|
||||
For a more detailed introduction to Mermaid and some of it's more basic uses, look to the [Overview for Beginners](./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)
|
||||
|
||||
> 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866).
|
||||
|
||||
:trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/#nominees) in the category "The most exciting use of technology"!!!**
|
||||
|
||||
**Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project 🙏**
|
||||
|
||||
|
||||
# Diagrams that mermaid can render:
|
||||
|
||||
### [Flowchart](/flowchart?id=flowcharts-basic-syntax)
|
||||
|
||||
```
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```
|
||||
|
||||
|
||||
|
||||
### [Sequence diagram](/sequenceDiagram)
|
||||
|
||||
```
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts <br/>prevail!
|
||||
John-->>Alice: Great!
|
||||
John->>Bob: How about you?
|
||||
Bob-->>John: Jolly good!
|
||||
```
|
||||
|
||||
|
||||
|
||||
### [Gantt diagram](/gantt)
|
||||
|
||||
```
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
title Adding GANTT diagram to mermaid
|
||||
excludes weekdays 2014-01-10
|
||||
|
||||
section A section
|
||||
Completed task :done, des1, 2014-01-06,2014-01-08
|
||||
Active task :active, des2, 2014-01-09, 3d
|
||||
Future task : des3, after des2, 5d
|
||||
Future task2 : des4, after des3, 5d
|
||||
```
|
||||
|
||||
|
||||
|
||||
### [Class diagram - :exclamation: experimental](/classDiagram)
|
||||
|
||||
```
|
||||
classDiagram
|
||||
Class01 <|-- AveryLongClass : Cool
|
||||
Class03 *-- Class04
|
||||
Class05 o-- Class06
|
||||
Class07 .. Class08
|
||||
Class09 --> C2 : Where am i?
|
||||
Class09 --* C3
|
||||
Class09 --|> Class07
|
||||
Class07 : equals()
|
||||
Class07 : Object[] elementData
|
||||
Class01 : size()
|
||||
Class01 : int chimp
|
||||
Class01 : int gorilla
|
||||
Class08 <--> C2: Cool label
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Git graph - :exclamation: experimental
|
||||
|
||||
```
|
||||
gitGraph:
|
||||
options
|
||||
{
|
||||
"nodeSpacing": 150,
|
||||
"nodeRadius": 10
|
||||
}
|
||||
end
|
||||
commit
|
||||
branch newbranch
|
||||
checkout newbranch
|
||||
commit
|
||||
commit
|
||||
checkout master
|
||||
commit
|
||||
commit
|
||||
merge newbranch
|
||||
|
||||
```
|
||||
|
||||
|
||||
### [Entity Relationship Diagram - :exclamation: experimental](/entityRelationshipDiagram)
|
||||
|
||||
```
|
||||
erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
### [User Journey Diagram](/user-journey)
|
||||
|
||||
```markdown
|
||||
journey
|
||||
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
|
||||
```
|
||||
|
||||
|
||||
# Installation
|
||||
|
||||
**In depth guides and examples can be found in [Getting Started](/n00b-gettingStarted) and [Usage](/usage).**
|
||||
|
||||
**It would also be helpful to learn more about mermaid's [Syntax](/n00b-syntaxReference).**
|
||||
|
||||
### CDN
|
||||
|
||||
```
|
||||
https://unpkg.com/mermaid@<version>/dist/
|
||||
```
|
||||
|
||||
To select a version:
|
||||
|
||||
Replace `<version>` with the desired version number.
|
||||
|
||||
Alternatively, you can also adjust the version number in the page itself.
|
||||
|
||||
Latest Version: [https://unpkg.com/browse/mermaid@8.8.0/](https://unpkg.com/browse/mermaid@8.8.0/)
|
||||
|
||||
## Mermaid on a website
|
||||
To support mermaid on your website, all you have to do is add Mermaid’s JavaScript package
|
||||
|
||||
```
|
||||
1.You will need to install node v10 or 12, 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
|
||||
|
||||
```
|
||||
|
||||
**To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaidAPI` call into the HTML like so:**
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
|
||||
<script>mermaid.initialize({startOnLoad:true});</script>
|
||||
```
|
||||
**Doing so will command the mermaid parser to look for the `<div>` tags with `class="mermaid"` in your HTML Document. From these tags mermaid will try to read the diagram/chart definitons and render them as svg charts.**
|
||||
|
||||
## Examples can be found in [Getting Started](./n00b-gettingStarted.md)
|
||||
|
||||
# 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)
|
||||
|
||||
## Request for Assistance
|
||||
|
||||
Things are piling up and I have a hard time keeping up. To remedy this
|
||||
it would be great if we could form a core team of developers to cooperate
|
||||
with the future development of mermaid.
|
||||
|
||||
As part of this team you would get write access to the repository and would
|
||||
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
|
||||
|
||||
Don't hesitate to contact me if you want to get involved!
|
||||
|
||||
## For contributors
|
||||
|
||||
### Setup
|
||||
|
||||
```
|
||||
yarn install
|
||||
```
|
||||
|
||||
### Build
|
||||
|
||||
```
|
||||
yarn build:watch
|
||||
```
|
||||
|
||||
### Lint
|
||||
|
||||
```
|
||||
yarn lint
|
||||
```
|
||||
|
||||
We use [eslint](https://eslint.org/).
|
||||
We recommend you installing [editor plugins](https://eslint.org/docs/user-guide/integrations) so you can get real time lint result.
|
||||
|
||||
### Test
|
||||
|
||||
```
|
||||
yarn test
|
||||
```
|
||||
Manual test in browser: open `dist/index.html`
|
||||
|
||||
### Release
|
||||
|
||||
For those who have the permission to do so:
|
||||
|
||||
Update version number in `package.json`.
|
||||
|
||||
```
|
||||
npm publish
|
||||
```
|
||||
|
||||
Command above generates files into the `dist` folder and publishes them to npmjs.org.
|
||||
|
||||
## Credits
|
||||
|
||||
Many thanks to the [d3](http://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](http://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.
|
||||
|
||||
_Mermaid was created by Knut Sveidqvist for easier documentation._
|
||||
|
||||
Here is the full list of the projects [contributors](https://github.com/knsv/mermaid/graphs/contributors).
|
||||
|
|
@ -2,11 +2,11 @@
|
|||
|
||||
**Mermaid lets you represent diagrams using text and code.** This simplifies maintianing complex diagrams. It is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. The main purpose of Mermaid is to help Documentation catch up with Development.
|
||||
|
||||
Many editors, wikis and other tools have mermaid integrations already making it easy to start using mermaid. A few of those are described in [Simple start to write diagrams](./n00b-GettingStarted.md).
|
||||
Many editors, wikis and other tools have mermaid integrations already making it easy to start using mermaid. A few of those are described in [Simple start to write diagrams](/n00b-gettingStarted).
|
||||
|
||||
|
||||
|
||||
:trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/#nominees) in the category "The most exciting use of technology"!!!**
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/README.md)
|
||||
|
||||
[](https://travis-ci.org/mermaid-js/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://percy.io/Mermaid/mermaid)
|
||||
|
||||
|
|
@ -36,7 +36,7 @@ For a more detailed introduction to Mermaid and some of it's more basic uses, lo
|
|||
**Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project 🙏**
|
||||
|
||||
|
||||
# Diagrams that mermaid can render:
|
||||
# Diagrams that mermaid can render
|
||||
|
||||
### [Flowchart](/flowchart?id=flowcharts-basic-syntax)
|
||||
|
||||
|
|
@ -85,7 +85,7 @@ Future task2 : des4, after des3, 5d
|
|||
|
||||
|
||||
|
||||
### [Class diagram - :exclamation: experimental](/classDiagram)
|
||||
### [Class diagram](/classDiagram)
|
||||
|
||||
```
|
||||
classDiagram
|
||||
|
|
@ -176,7 +176,7 @@ Alternatively, you can also adjust the version number in the page itself.
|
|||
|
||||
Latest Version: [https://unpkg.com/browse/mermaid@8.8.0/](https://unpkg.com/browse/mermaid@8.8.0/)
|
||||
|
||||
## Mermaid on a website
|
||||
## Deploying Mermaid
|
||||
To support mermaid on your website, all you have to do is add Mermaid’s JavaScript package
|
||||
|
||||
```
|
||||
|
|
@ -199,7 +199,7 @@ To support mermaid on your website, all you have to do is add Mermaid’s JavaSc
|
|||
```
|
||||
**Doing so will command the mermaid parser to look for the `<div>` tags with `class="mermaid"` in your HTML Document. From these tags mermaid will try to read the diagram/chart definitons and render them as svg charts.**
|
||||
|
||||
## Examples can be found in [Other examples](/examples)
|
||||
**Examples can be found in** [Other examples](/examples)
|
||||
|
||||
# Sibling projects
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
This is the api to be used when optionally handling the integration with the web page, instead of using the default integration provided by mermaid.js.
|
||||
|
||||
The core of this api is the [**render**][1] function which, given a graph
|
||||
definition as text, renders the graph/diagram and returns an svg element for the graph.
|
||||
definition, renders a graph/diagram and returns it as an svg element.
|
||||
|
||||
It is is then up to the user of the API to make use of the svg, either insert it somewhere in the page or do something completely different.
|
||||
|
||||
|
|
@ -111,9 +111,15 @@ Note: modifies options in-place
|
|||
|
||||
- `conf` the base currentConfig to reset to (default: current siteConfig ) (optional, default `getSiteConfig()`)
|
||||
|
||||
## render
|
||||
## mermaid.API Functions
|
||||
|
||||
Function that renders an svg with a graph from a chart definition. Usage example below.
|
||||
- `mermaidAPI.initialize` is a call to the mermaid API, that targets `config` and changes the before the diagram is rendered.
|
||||
|
||||
**Notes**: `Config` is a variable that contains various configurable elements that can alter how the rendered SVG Diagram/Chart will look like.
|
||||
|
||||
- `mermaidAPI.render` is function that renders a graph/diagram in svg format, from a chart definition inside `<div>` tags.
|
||||
|
||||
Usage example below.
|
||||
|
||||
```js
|
||||
mermaidAPI.initialize({
|
||||
|
|
@ -127,7 +133,6 @@ mermaidAPI.initialize({
|
|||
mermaidAPI.render('id1',graphDefinition,cb);
|
||||
});
|
||||
```
|
||||
|
||||
### Parameters
|
||||
|
||||
- `id` the id of the element to be rendered
|
||||
|
|
@ -137,9 +142,8 @@ mermaidAPI.initialize({
|
|||
provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is
|
||||
completed.
|
||||
|
||||
##
|
||||
|
||||
## mermaidAPI configuration defaults
|
||||
## mermaidAPI config Default Values:
|
||||
|
||||
```html
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ The definitions that can be generated the Live-Editor are also backwards-compati
|
|||
[Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8)
|
||||
|
||||
|
||||
## Mermaid with HTML:
|
||||
## Mermaid with HTML
|
||||
Examples are provided in [Gettting Started](n00b-gettingStarted.md)
|
||||
|
||||
**CodePen Examples:**
|
||||
|
|
@ -29,6 +29,6 @@ https://codepen.io/tdkn/pen/vZxQzd
|
|||
https://codepen.io/janzeteachesit/pen/OWWZKN
|
||||
|
||||
|
||||
## Mermaid with Text Area:
|
||||
## Mermaid with Text Area
|
||||
|
||||
https://codepen.io/Ryuno-Ki/pen/LNxwgR
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
- Introduction 📊
|
||||
|
||||
- [About mermaid](Readme.md)
|
||||
- [About mermaid](README.md)
|
||||
- [Simple start to write diagrams](n00b-gettingStarted.md)
|
||||
- [Overview for Beginners](n00b-overview.md)
|
||||
|
||||
|
|
@ -21,8 +21,8 @@
|
|||
- [Diagram syntax intro](n00b-syntaxReference.md)
|
||||
- [Tutorials](Tutorials.md)
|
||||
- [API-Usage](usage.md)
|
||||
- [Configurations](Setup.md)
|
||||
- [Directives](8.6.0_docs.md)
|
||||
- [Configuration handling in Mermaid API](Setup.md)
|
||||
- [Directives](directives.md)
|
||||
- [Theming](theming.md)
|
||||
- [mermaid CLI](mermaidCLI.md)
|
||||
- [Advanced usage](n00b-advanced.md)
|
||||
|
|
@ -34,6 +34,5 @@
|
|||
- Contributions and Community 🙌
|
||||
|
||||
- [Development and Contribution ](development.md)
|
||||
- [Mermaid Versions](versionUpdates.md)
|
||||
- [Changelog](CHANGELOG.md)
|
||||
- [Adding Diagrams ](newDiagram.md)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,866 @@
|
|||
---
|
||||
sort: 3
|
||||
title: Flowchart
|
||||
---
|
||||
|
||||
# Flowcharts - Basic Syntax
|
||||
|
||||
## Graph
|
||||
|
||||
This statement declares the direction of the Flowchart.
|
||||
|
||||
This declares the graph is oriented from top to bottom (`TD` or `TB`).
|
||||
|
||||
```
|
||||
graph TD
|
||||
Start --> Stop
|
||||
```
|
||||
```mermaid
|
||||
graph TD
|
||||
Start --> Stop
|
||||
```
|
||||
|
||||
This declares the graph is oriented from left to right (`LR`).
|
||||
|
||||
```
|
||||
graph LR
|
||||
Start --> Stop
|
||||
```
|
||||
```mermaid
|
||||
graph LR
|
||||
Start --> Stop
|
||||
```
|
||||
|
||||
## Flowchart Orientation
|
||||
|
||||
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
|
||||
|
||||
|
||||
|
||||
## Flowcharts
|
||||
|
||||
This renders a flowchart that allows for features such as: more arrow types, multi directional arrows, and linking to and from subgraphs.
|
||||
|
||||
Apart from the graph type, the syntax is the same. This is currently experimental but when the beta period is over, both the graph and flowchart keywords will render in the new way. This means it is ok to start beta testing flowcharts.
|
||||
|
||||
> **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).**
|
||||
|
||||
## Nodes & shapes
|
||||
|
||||
### A node (default)
|
||||
|
||||
```
|
||||
graph LR
|
||||
id
|
||||
```
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
id
|
||||
```
|
||||
|
||||
> **Note** The id is what is displayed in the box.
|
||||
|
||||
### A node with text
|
||||
|
||||
It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text
|
||||
found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The
|
||||
one previously defined will be used when rendering the box.
|
||||
|
||||
```
|
||||
graph LR
|
||||
id1[This is the text in the box]
|
||||
```
|
||||
```mermaid
|
||||
graph LR
|
||||
id1[This is the text in the box]
|
||||
```
|
||||
|
||||
## Node Shapes
|
||||
|
||||
### A node with round edges
|
||||
|
||||
```
|
||||
graph LR
|
||||
id1(This is the text in the box)
|
||||
```
|
||||
```mermaid
|
||||
graph LR
|
||||
id1(This is the text in the box)
|
||||
```
|
||||
|
||||
### A stadium-shaped node
|
||||
|
||||
```
|
||||
graph LR
|
||||
id1([This is the text in the box])
|
||||
```
|
||||
```mermaid
|
||||
graph LR
|
||||
id1([This is the text in the box])
|
||||
```
|
||||
|
||||
### A node in a subroutine shape
|
||||
|
||||
```
|
||||
graph LR
|
||||
id1[[This is the text in the box]]
|
||||
```
|
||||
```mermaid
|
||||
graph LR
|
||||
id1[[This is the text in the box]]
|
||||
```
|
||||
|
||||
### A node in a cylindrical shape
|
||||
|
||||
```
|
||||
graph LR
|
||||
id1[(Database)]
|
||||
```
|
||||
```mermaid
|
||||
graph LR
|
||||
id1[(Database)]
|
||||
```
|
||||
|
||||
### A node in the form of a circle
|
||||
|
||||
```
|
||||
graph LR
|
||||
id1((This is the text in the circle))
|
||||
```
|
||||
```mermaid
|
||||
graph LR
|
||||
id1((This is the text in the circle))
|
||||
```
|
||||
|
||||
### A node in an asymetric shape
|
||||
|
||||
```
|
||||
graph LR
|
||||
id1>This is the text in the box]
|
||||
```
|
||||
```mermaid
|
||||
graph 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.*
|
||||
|
||||
### A node (rhombus)
|
||||
|
||||
```
|
||||
graph LR
|
||||
id1{This is the text in the box}
|
||||
```
|
||||
```mermaid
|
||||
graph LR
|
||||
id1{This is the text in the box}
|
||||
```
|
||||
|
||||
### A hexagon node
|
||||
{% raw %}
|
||||
```
|
||||
graph LR
|
||||
id1{{This is the text in the box}}
|
||||
```
|
||||
{% endraw %}
|
||||
|
||||
```mermaid
|
||||
{% raw %}
|
||||
graph LR
|
||||
id1{{This is the text in the box}}
|
||||
{% endraw %}
|
||||
```
|
||||
|
||||
### Parallelogram
|
||||
|
||||
```
|
||||
graph TD
|
||||
id1[/This is the text in the box/]
|
||||
```
|
||||
```mermaid
|
||||
graph TD
|
||||
id1[/This is the text in the box/]
|
||||
```
|
||||
|
||||
### Parallelogram alt
|
||||
|
||||
```
|
||||
graph TD
|
||||
id1[\This is the text in the box\]
|
||||
```
|
||||
```mermaid
|
||||
graph TD
|
||||
id1[\This is the text in the box\]
|
||||
```
|
||||
|
||||
### Trapezoid
|
||||
|
||||
```
|
||||
graph TD
|
||||
A[/Christmas\]
|
||||
```
|
||||
```mermaid
|
||||
graph TD
|
||||
A[/Christmas\]
|
||||
```
|
||||
### Trapezoid alt
|
||||
|
||||
```
|
||||
graph TD
|
||||
B[\Go shopping/]
|
||||
```
|
||||
```mermaid
|
||||
graph TD
|
||||
B[\Go shopping/]
|
||||
```
|
||||
|
||||
## Links between nodes
|
||||
|
||||
Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.
|
||||
|
||||
### A link with arrow head
|
||||
|
||||
```
|
||||
graph LR
|
||||
A-->B
|
||||
```
|
||||
```mermaid
|
||||
graph LR
|
||||
A-->B
|
||||
```
|
||||
|
||||
### An open link
|
||||
|
||||
```
|
||||
graph LR
|
||||
A --- B
|
||||
```
|
||||
```mermaid
|
||||
graph LR
|
||||
A --- B
|
||||
```
|
||||
|
||||
### Text on links
|
||||
|
||||
```
|
||||
graph LR
|
||||
A-- This is the text! ---B
|
||||
```
|
||||
```mermaid
|
||||
graph LR
|
||||
A-- This is the text ---B
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```
|
||||
graph LR
|
||||
A---|This is the text|B
|
||||
```
|
||||
```mermaid
|
||||
graph LR
|
||||
A---|This is the text|B
|
||||
```
|
||||
|
||||
### A link with arrow head and text
|
||||
|
||||
```
|
||||
graph LR
|
||||
A-->|text|B
|
||||
```
|
||||
```mermaid
|
||||
graph LR
|
||||
A-->|text|B
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```
|
||||
graph LR
|
||||
A-- text -->B
|
||||
```
|
||||
```mermaid
|
||||
graph LR
|
||||
A-- text -->B
|
||||
```
|
||||
|
||||
### Dotted link
|
||||
|
||||
```
|
||||
graph LR;
|
||||
A-.->B;
|
||||
```
|
||||
```mermaid
|
||||
graph LR;
|
||||
A-.->B;
|
||||
```
|
||||
|
||||
### Dotted link with text
|
||||
|
||||
```
|
||||
graph LR
|
||||
A-. text .-> B
|
||||
```
|
||||
```mermaid
|
||||
graph LR
|
||||
A-. text .-> B
|
||||
```
|
||||
|
||||
### Thick link
|
||||
|
||||
```
|
||||
graph LR
|
||||
A ==> B
|
||||
```
|
||||
```mermaid
|
||||
graph LR
|
||||
A ==> B
|
||||
```
|
||||
|
||||
### Thick link with text
|
||||
|
||||
```
|
||||
graph LR
|
||||
A == text ==> B
|
||||
```
|
||||
```mermaid
|
||||
graph LR
|
||||
A == text ==> B
|
||||
```
|
||||
|
||||
### Chaining of links
|
||||
|
||||
It is possible declare many links in the same line as per below:
|
||||
```
|
||||
graph LR
|
||||
A -- text --> B -- text2 --> C
|
||||
```
|
||||
```mermaid
|
||||
graph LR
|
||||
A -- text --> B -- text2 --> C
|
||||
```
|
||||
|
||||
It is also possible to declare multiple nodes links in the same line as per below:
|
||||
```
|
||||
graph LR
|
||||
a --> b & c--> d
|
||||
```
|
||||
```mermaid
|
||||
graph LR
|
||||
a --> b & c--> d
|
||||
```
|
||||
|
||||
You can then describe dependencies in a very expressive way. Like the one-liner below:
|
||||
```
|
||||
graph TB
|
||||
A & B--> C & D
|
||||
```
|
||||
```mermaid
|
||||
graph 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 graph 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.
|
||||
```
|
||||
graph TB
|
||||
A --> C
|
||||
A --> D
|
||||
B --> C
|
||||
B --> D
|
||||
```
|
||||
|
||||
### Beta: New arrow types
|
||||
|
||||
When using flowchart instead of graph there are new types of arrows supported as per below:
|
||||
|
||||
```
|
||||
flowchart LR
|
||||
A --o B
|
||||
B --x C
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A --o B
|
||||
B --x C
|
||||
```
|
||||
|
||||
|
||||
### Beta: Multi directional arrows
|
||||
|
||||
When using flowchart instead of graph there is the possibility to use multidirectional arrows.
|
||||
|
||||
```
|
||||
flowchart LR
|
||||
A o--o B
|
||||
B <--> C
|
||||
C x--x D
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A o--o B
|
||||
B <--> C
|
||||
C x--x D
|
||||
```
|
||||
|
||||
### Minimum length of a link
|
||||
|
||||
Each node in the flowchart is ultimately assigned to a rank in the rendered
|
||||
graph, i.e. to a vertical or horizontal level (depending on the flowchart
|
||||
orientation), based on the nodes to which it is linked. By default, links
|
||||
can span any number of ranks, but you can ask for any link to be longer
|
||||
than the others by adding extra dashes in the link definition.
|
||||
|
||||
In the following example, two extra dashes are added in the link from node _B_
|
||||
to node _E_, so that it spans two more ranks than regular links:
|
||||
|
||||
```
|
||||
graph TD
|
||||
A[Start] --> B{Is it?};
|
||||
B -->|Yes| C[OK];
|
||||
C --> D[Rethink];
|
||||
D --> B;
|
||||
B ---->|No| E[End];
|
||||
```
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[Start] --> B{Is it?};
|
||||
B -->|Yes| C[OK];
|
||||
C --> D[Rethink];
|
||||
D --> B;
|
||||
B ---->|No| E[End];
|
||||
```
|
||||
|
||||
> **Note** Links may still be made longer than the requested number of ranks
|
||||
> by the rendering engine to accommodate other requests.
|
||||
|
||||
When the link label is written in the middle of the link, the extra dashes must
|
||||
be added on the right side of the link. The following example is equivalent to
|
||||
the previous one:
|
||||
|
||||
```
|
||||
graph TD
|
||||
A[Start] --> B{Is it?};
|
||||
B -- Yes --> C[OK];
|
||||
C --> D[Rethink];
|
||||
D --> B;
|
||||
B -- No ----> E[End];
|
||||
```
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[Start] --> B{Is it?};
|
||||
B -->|Yes| C[OK];
|
||||
C --> D[Rethink];
|
||||
D --> B;
|
||||
B ---->|No| E[End];
|
||||
```
|
||||
|
||||
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 | `==>` | `===>` | `====>` |
|
||||
| Dotted | `-.-` | `-..-` | `-...-` |
|
||||
| Dotted with arrow | `-.->` | `-..->` | `-...->` |
|
||||
|
||||
## Special characters that break syntax
|
||||
|
||||
It is possible to put text within quotes in order to render more troublesome characters. As in the example below:
|
||||
|
||||
```
|
||||
graph LR
|
||||
id1["This is the (text) in the box"]
|
||||
```
|
||||
```mermaid
|
||||
graph LR
|
||||
id1["This is the (text) in the box"]
|
||||
```
|
||||
|
||||
### Entity codes to escape characters
|
||||
|
||||
It is possible to escape characters using the syntax examplified here.
|
||||
|
||||
```
|
||||
graph LR
|
||||
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
|
||||
```
|
||||
```mermaid
|
||||
graph LR
|
||||
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
|
||||
```
|
||||
|
||||
## Subgraphs
|
||||
|
||||
```
|
||||
subgraph title
|
||||
graph definition
|
||||
end
|
||||
```
|
||||
|
||||
An example below:
|
||||
|
||||
```
|
||||
graph TB
|
||||
c1-->a2
|
||||
subgraph one
|
||||
a1-->a2
|
||||
end
|
||||
subgraph two
|
||||
b1-->b2
|
||||
end
|
||||
subgraph three
|
||||
c1-->c2
|
||||
end
|
||||
```
|
||||
```mermaid
|
||||
graph TB
|
||||
c1-->a2
|
||||
subgraph one
|
||||
a1-->a2
|
||||
end
|
||||
subgraph two
|
||||
b1-->b2
|
||||
end
|
||||
subgraph three
|
||||
c1-->c2
|
||||
end
|
||||
```
|
||||
|
||||
You can also set an excplicit id for the subgraph.
|
||||
|
||||
```
|
||||
graph TB
|
||||
c1-->a2
|
||||
subgraph ide1 [one]
|
||||
a1-->a2
|
||||
end
|
||||
```
|
||||
```mermaid
|
||||
graph TB
|
||||
c1-->a2
|
||||
subgraph id1 [one]
|
||||
a1-->a2
|
||||
end
|
||||
```
|
||||
|
||||
## Beta: flowcharts
|
||||
|
||||
With the graphtype flowcharts it is also possible to set edges to and from subgraphs as in the graph below.
|
||||
|
||||
```
|
||||
flowchart TB
|
||||
c1-->a2
|
||||
subgraph one
|
||||
a1-->a2
|
||||
end
|
||||
subgraph two
|
||||
b1-->b2
|
||||
end
|
||||
subgraph three
|
||||
c1-->c2
|
||||
end
|
||||
one --> two
|
||||
three --> two
|
||||
two --> c2
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TB
|
||||
c1-->a2
|
||||
subgraph one
|
||||
a1-->a2
|
||||
end
|
||||
subgraph two
|
||||
b1-->b2
|
||||
end
|
||||
subgraph three
|
||||
c1-->c2
|
||||
end
|
||||
one --> two
|
||||
three --> two
|
||||
two --> c2
|
||||
```
|
||||
|
||||
## Interaction
|
||||
|
||||
It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
|
||||
|
||||
```
|
||||
click nodeId 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.
|
||||
|
||||
Examples of tooltip usage below:
|
||||
|
||||
```html
|
||||
<script>
|
||||
var callback = function(){
|
||||
alert('A callback was triggered');
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
```
|
||||
graph LR;
|
||||
A-->B;
|
||||
click A callback "Tooltip for a callback"
|
||||
click B "http://www.github.com" "This is a tooltip for a link"
|
||||
```
|
||||
|
||||
The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip.
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
A-->B;
|
||||
click A callback "Tooltip"
|
||||
click B "http://www.github.com" "This is a link"
|
||||
```
|
||||
> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
|
||||
|
||||
?> 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):
|
||||
```
|
||||
graph LR;
|
||||
A-->B;
|
||||
B-->C;
|
||||
click A "http://www.github.com" _blank
|
||||
click B "http://www.github.com" "Open this in a new tab" _blank
|
||||
```
|
||||
|
||||
```mermaid
|
||||
graph LR;
|
||||
A-->B;
|
||||
B-->C;
|
||||
click A "http://www.github.com" _blank
|
||||
click B "http://www.github.com" "Open this in a new tab" _blank
|
||||
```
|
||||
|
||||
Beginners tip, a full example using interactive links in a html context:
|
||||
```html
|
||||
<body>
|
||||
<div class="mermaid">
|
||||
graph LR;
|
||||
A-->B;
|
||||
click A callback "Tooltip"
|
||||
click B "http://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>
|
||||
</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
|
||||
|
||||
```
|
||||
graph LR
|
||||
%% this is a comment A -- text --> B{node}
|
||||
A -- text --> B -- text2 --> C
|
||||
```
|
||||
|
||||
## Styling and classes
|
||||
|
||||
### Styling links
|
||||
|
||||
It is possible to style links. For instance you might want to style a link that is going backwards in the flow. As links
|
||||
have no ids in the same way as nodes, some other way of deciding what style the links should be attached to is required.
|
||||
Instead of ids, the order number of when the link was defined in the graph is used. In the example below the style
|
||||
defined in the linkStyle statement will belong to the fourth link in the graph:
|
||||
|
||||
```
|
||||
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
|
||||
```
|
||||
|
||||
|
||||
### Styling a node
|
||||
|
||||
It is possible to apply specific styles such as a thicker border or a different background color to a node.
|
||||
|
||||
```
|
||||
graph LR
|
||||
id1(Start)-->id2(Stop)
|
||||
style id1 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
```
|
||||
```mermaid
|
||||
graph LR
|
||||
id1(Start)-->id2(Stop)
|
||||
style id1 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
```
|
||||
|
||||
|
||||
#### Classes
|
||||
|
||||
More convenient then defining the style every time is to define a class of styles and attach this class to the nodes that
|
||||
should have a different look.
|
||||
|
||||
a class definition looks like the example below:
|
||||
|
||||
|
||||
```
|
||||
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
|
||||
```
|
||||
|
||||
Attachment of a class to a node is done as per below:
|
||||
|
||||
```
|
||||
class nodeId1 className;
|
||||
```
|
||||
|
||||
It is also possible to attach a class to a list of nodes in one statement:
|
||||
|
||||
```
|
||||
class nodeId1,nodeId2 className;
|
||||
```
|
||||
|
||||
A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:
|
||||
|
||||
```
|
||||
graph LR
|
||||
A:::someclass --> B
|
||||
classDef someclass fill:#f96;
|
||||
```
|
||||
```mermaid
|
||||
graph LR
|
||||
A:::someclass --> B
|
||||
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
|
||||
below:
|
||||
|
||||
**Example style**
|
||||
|
||||
```html
|
||||
<style>
|
||||
.cssClass > rect{
|
||||
fill:#FF0000;
|
||||
stroke:#FFFF00;
|
||||
stroke-width:4px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
**Example definition**
|
||||
|
||||
```
|
||||
graph LR;
|
||||
A-->B[AAA<span>BBB</span>];
|
||||
B-->D;
|
||||
class A cssClass;
|
||||
```
|
||||
```mermaid
|
||||
graph LR;
|
||||
A-->B[AAA<span>BBB</span>];
|
||||
B-->D;
|
||||
class A cssClass;
|
||||
```
|
||||
|
||||
|
||||
### Default class
|
||||
|
||||
If a class is named default it will be assigned to all classes without specific class definitions.
|
||||
|
||||
```
|
||||
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
|
||||
```
|
||||
|
||||
|
||||
## Basic support for fontawesome
|
||||
|
||||
It is possible to add icons from fontawesome.
|
||||
|
||||
The icons are acessed via the syntax fa:#icon class name#.
|
||||
|
||||
```
|
||||
graph TD
|
||||
B["fa:fa-twitter for peace"]
|
||||
B-->C[fa:fa-ban forbidden]
|
||||
B-->D(fa:fa-spinner);
|
||||
B-->E(A fa:fa-camera-retro perhaps?);
|
||||
```
|
||||
```mermaid
|
||||
graph TD
|
||||
B["fa:fa-twitter for peace"]
|
||||
B-->C[fa:fa-ban forbidden]
|
||||
B-->D(fa:fa-spinner);
|
||||
B-->E(A fa:fa-camera-retro perhaps?);
|
||||
```
|
||||
|
||||
|
||||
## 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.
|
||||
|
||||
* 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 introduce 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.
|
||||
|
||||
```
|
||||
graph LR
|
||||
A[Hard edge] -->|Link text| B(Round edge)
|
||||
B --> C{Decision}
|
||||
C -->|One| D[Result one]
|
||||
C -->|Two| E[Result two]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
A[Hard edge] -->|Link text| B(Round edge)
|
||||
B --> C{Decision}
|
||||
C -->|One| D[Result one]
|
||||
C -->|Two| E[Result two]
|
||||
```
|
||||
|
||||
|
||||
## Configuration...
|
||||
|
||||
Is it possible to adjust the width of the rendered flowchart.
|
||||
|
||||
This is done by defining **mermaid.flowchartConfig** or by the CLI to use a json file with the configuration. How to use
|
||||
the CLI is described in the mermaidCLI page.
|
||||
mermaid.flowchartConfig can be set to a JSON string with config parameters or the corresponding object.
|
||||
|
||||
```javascript
|
||||
mermaid.flowchartConfig = {
|
||||
width: 100%
|
||||
}
|
||||
```
|
||||
|
|
@ -1,9 +1,11 @@
|
|||
# Directives
|
||||
|
||||
## Directives were added in [Version 8.6.0](../getting-started/8.6.0_docs.md). Please Read it for more information.
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/directives.md)
|
||||
|
||||
## Directives
|
||||
With this version, directives are supported. Directives are divided in two sets, by priority. the first set, containing 'init' or 'initialize' directives take priority. While the other set, containing all other kinds of directives are considered only after 'init' and the graph-type declared.
|
||||
Directives gives a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.
|
||||
|
||||
Directives are divided in two sets by priority. The first set, containing 'init' or 'initialize' directives take priority. While the other set, containing all other kinds of directives are parsed and factored into the rendering, only after 'init' and the desired graph-type are declared.
|
||||
|
||||
#### Init
|
||||
|
||||
|
|
@ -16,18 +18,19 @@ With this version, directives are supported. Directives are divided in two sets,
|
|||
|
||||
init would be an argument-directive: %%{init: { **insert argument here**}}%%
|
||||
|
||||
The json object that is passed as {**argument** } must be valid, quoted json or it will be ignored.
|
||||
The json object that is passed as {**argument** } must be valid key value pairs and encased in quotation marks or it will be ignored.
|
||||
Valid Key Value pairs can be found in config.
|
||||
|
||||
The init/initialize directive is parsed early in the flow, enough to be able to re-initialize mermaid with a new configuration object. Example:
|
||||
The init/initialize directive is parsed earlier in the flow, this allows the incorporation of `%%init%%` directives into the mermaid diagram that is being rendered. Example:
|
||||
```
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
|
||||
graph >
|
||||
A-->B
|
||||
```
|
||||
|
||||
will set the `logLevel` to `debug` and the `theme` to `dark` for a flowchart diagram.
|
||||
will set the `logLevel` to `debug` and the `theme` to `dark` for a flowchart diagram, changing the appearance of the diagram itself.
|
||||
|
||||
Note: 'init' or 'initialize' are both acceptable as init directives. Also note that init directives are coalesced. This means:
|
||||
Note: 'init' or 'initialize' are both acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed. This means:
|
||||
|
||||
```
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
|
||||
|
|
@ -35,7 +38,7 @@ Note: 'init' or 'initialize' are both acceptable as init directives. Also note t
|
|||
...
|
||||
```
|
||||
|
||||
will result an init object looking like this:
|
||||
parsing the above generates the `%%init%%` object below, combining the two directives and carrying over the last value given for `loglevel`:
|
||||
|
||||
```
|
||||
{
|
||||
|
|
@ -45,7 +48,7 @@ will result an init object looking like this:
|
|||
}
|
||||
```
|
||||
|
||||
to be sent to `mermaid.initialize(...)`
|
||||
This will then be sent to `mermaid.initialize(...)` for rendering.
|
||||
|
||||
|
||||
#### Other directives
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
# Entity Relationship Diagrams
|
||||
|
||||
**Edit this Page** [](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.
|
||||
|
|
|
|||
|
|
@ -372,7 +372,7 @@ graph TB
|
|||
|
||||
### Beta: New arrow types
|
||||
|
||||
When using flowchart instead of graph there is the are new types of arrows supported as per below:
|
||||
When using flowchart instead of graph there are new types of arrows supported as per below:
|
||||
|
||||
```
|
||||
flowchart LR
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@
|
|||
<title>mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
||||
<!-- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css"> -->
|
||||
<link rel="stylesheet" href="theme.css"> <script src="//cdn.jsdelivr.net/npm/mermaid@8.8.2/dist/mermaid.min.js"></script>
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
|
||||
<link rel="stylesheet" href="theme.css"> <script src="//cdn.jsdelivr.net/npm/mermaid@8.8.3/dist/mermaid.min.js"></script>
|
||||
<!-- <script src="http://localhost:9000/mermaid.js"></script> -->
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ Doc-Rot is quite quick on diagrams makes, after a change is made, it quite hard
|
|||
|
||||
mermaid seeks to change that. mermaid is a javascript based tool that utilizes a markdown inspired syntax to generate documentation, which is actually quicker, less complicated and more convenient than most traditional diagramming software. This is a relatively straightforward solution to a major hurdle in software teams.
|
||||
|
||||
# :blue_book: Definition of Terms/ Dictionary
|
||||
# Definition of Terms/ Dictionary
|
||||
|
||||
**Mermaid definitions**
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ They also detail how diagrams can be defined, or described in the manner with wh
|
|||
|
||||
### The benefits of text based diagramming are its speed and modifiability. mermaid allows for easy maintenance and modification of diagrams. This means your diagrams will always be up to date and closely follow your code and improve your documentation.
|
||||
|
||||
## mermaid tag:
|
||||
## mermaid tag
|
||||
These Diagram Definitions can be entered within a \<div class=mermaid> tag.
|
||||
like so :
|
||||
```html
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
# Sequence diagrams
|
||||
|
||||
**Edit this Page** [](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.
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
# Version 8.7.0: Theme Configuration
|
||||
# Theme Configuration
|
||||
|
||||
**Edit this Page** [](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 the diagram themes. The objective of this is to increase the customizability of mermaid and the ease of Styling, with the customization of themes through the `%%init%%` directive and `initialize` calls.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
# Usage
|
||||
|
||||
mermaid is a javascript tool that makes use of a markdown based syntax to render customizable diagrams and charts, for greater speed and ease.
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/usage.md)
|
||||
|
||||
mermaid was made to help Documentation catch up with Development, in quickly changing projects.
|
||||
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.
|
||||
|
||||
### CDN
|
||||
|
||||
|
|
@ -12,11 +14,13 @@ Please note that you can switch versions through the dropdown box at the top rig
|
|||
|
||||
## Using mermaid
|
||||
|
||||
For the majority of beginners, using the live editor or supporting mermaid on a webpage would cover their uses for mermaid.
|
||||
For the majority of users, Using the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor/) would be sufficient, however you may also opt to deploy mermaid as a dependency or using the [Mermaid API](./Setup.md).
|
||||
|
||||
## Installing and Hosting mermaid on a webpage
|
||||
We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermaid Live Editor.
|
||||
|
||||
### Using the npm package
|
||||
**Installing and Hosting Mermaid on a Webpage**
|
||||
|
||||
**Using the npm package**
|
||||
|
||||
```
|
||||
1.You will need to install node v10 or 12, which would have npm.
|
||||
|
|
@ -33,11 +37,9 @@ For the majority of beginners, using the live editor or supporting mermaid on a
|
|||
as is shown in the example below
|
||||
```
|
||||
|
||||
## Hosting mermaid on a web page.
|
||||
**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:
|
||||
|
||||
|
|
@ -62,7 +64,7 @@ The easiest way to integrate mermaid on a web page requires three elements:
|
|||
```
|
||||
|
||||
**If these things are in place mermaid starts at the page load event and when fired (when the page has loaded) it will
|
||||
locate the graph definitions inside the `div` tags with `class="mermaid"` on the page and transform them to svg charts or diagrams.**
|
||||
locate the graph definitions inside the `div` tags with `class="mermaid"` on the page and return svg charts or diagrams with their corresponding definitions.**
|
||||
|
||||
## Simple full example:
|
||||
|
||||
|
|
@ -90,7 +92,7 @@ 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.)
|
||||
> Try it out, save this code as HTML and load it using any browser.(Except Internet Explorer, please don't use Internet Explorer.)
|
||||
|
||||
|
||||
## To enable click event and tags in nodes
|
||||
|
|
@ -118,7 +120,7 @@ This changes the default behaviour of mermaid so that after upgrade to 8.2, if t
|
|||
|
||||
**If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing . By doing this clicks and tags are allowed.**
|
||||
|
||||
## To change `securityLevel` with `mermaidAPI.initialize`:
|
||||
**To change `securityLevel` with `mermaidAPI.initialize`:**
|
||||
|
||||
```javascript
|
||||
mermaidAPI.initialize({
|
||||
|
|
@ -156,8 +158,6 @@ div.mermaid {
|
|||
}
|
||||
```
|
||||
|
||||
# This likely requires a `script.js` file, separate from the `HTML`.
|
||||
|
||||
### Calling `mermaid.init`
|
||||
|
||||
By default, `mermaid.init` will be called when the document is ready, finding all elements with
|
||||
|
|
@ -328,9 +328,9 @@ 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
|
||||
4. Instantiation of the configuration using the **mermaid.init** call
|
||||
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).
|
||||
|
|
@ -359,6 +359,7 @@ on what kind of integration you use.
|
|||
This is the preferred way of configuring mermaid.
|
||||
```
|
||||
|
||||
### The following methods are deprecated and are kept only for backwards compatibility.
|
||||
|
||||
## Using the mermaid object
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -1,5 +1,8 @@
|
|||
/**
|
||||
* This is the api to be used when optionally handling the integration with the web page, instead of using the default integration provided by mermaid.js.
|
||||
*Edit this Page[](https://github.com/mermaid-js/mermaid/blob/develop/src/mermaidAPI.js)
|
||||
*
|
||||
*This is the API to be used when optionally handling the integration with the web page, instead of using the default integration provided by mermaid.js.
|
||||
*
|
||||
*
|
||||
* The core of this api is the [**render**](Setup.md?id=render) function which, given a graph
|
||||
* definition as text, renders the graph/diagram and returns an svg element for the graph.
|
||||
|
|
|
|||
Loading…
Reference in New Issue