mermaid/README.md

99 lines
1.4 KiB
Markdown
Raw Normal View History

2014-11-02 00:52:32 +01:00
mermaid
=======
2014-11-02 01:01:23 +01:00
Generation of diagram and flowchart from text in a similar manner as markdown.
Ever wanted to simplify documentation and avoid heavy tools like visio when explaining your code?
This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.
2014-11-02 01:01:23 +01:00
The code below would render to the image
2014-11-02 01:01:23 +01:00
```
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
2014-11-02 01:01:23 +01:00
would render this lovely chart:
€€€ IMG €€€
2014-11-02 01:01:23 +01:00
Format:
#Installation and usage
# A graph example
<pre>
graph LR
A[Hard edge]-->|Link text|B(Round edge)
B-->C{Decision}
C-->D[Result 1]|Option 1
C-->E[Result 2]|Option 2
</pre>
#Syntax
## Graph
This statement declares a new graph and the direction of the graph layout.
```
graph TD
```
Would declare a graph oriented from top to bottom.
```
graph LR
```
Would declare a graph oriented from left to right.
## Nodes
### A node (default)
```
id1
```
### A node with text
```
id1[This is the text in the box]
```
### A node with round edges
```
id1[This is the text in the box]
```
### A node (rhombus)
```
id1{This is the text in the box}
```
### Styling a node
## Links between nodes
### A link with arrow head
```
A-->B
```
### An open link
```
A---B
```
### Text on links
```
A---B|This is the text
```
# Credits
Many thanks to the d3 and dagre-d3 projects that is used to graph layout and drawing.