mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-08-20 08:46:44 +02:00
Update after lint comments
This commit is contained in:
@@ -17,7 +17,7 @@
|
||||
- [Gantt](gantt.md)
|
||||
- [Pie Chart](pie.md)
|
||||
- [Requirement Diagram](requirementDiagram.md)
|
||||
- [Gitgraph (Git) Diagram](gitgraph.md)
|
||||
- [Gitgraph (Git) Diagram 🔥](gitgraph.md)
|
||||
- [C4C Diagram (Context) Diagram 🦺⚠️](c4c.md)
|
||||
- [Mindmaps 🦺⚠️](mindmap.md)
|
||||
- [Other Examples](examples.md)
|
||||
|
@@ -54,19 +54,6 @@
|
||||
.markdown-section {
|
||||
max-width: 1200px;
|
||||
}
|
||||
.urgent rect,.urgent path, .urgent text {
|
||||
fill: rgba(255, 63, 0, 1) !important;
|
||||
stroke: white
|
||||
color: white;
|
||||
}
|
||||
.urgent i, .urgent text {
|
||||
fill: white !important;
|
||||
color: white !important;
|
||||
}
|
||||
.large {
|
||||
font-size: 20px !important;
|
||||
font-weight: 900 !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
111
docs/mindmap.md
111
docs/mindmap.md
@@ -1,3 +1,5 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
|
||||
|
||||
# Mindmap
|
||||
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/mindmap.md)
|
||||
@@ -8,6 +10,27 @@
|
||||
|
||||
### An example of a mindmap.
|
||||
|
||||
```mermaid-example
|
||||
mindmap
|
||||
root((mindmap))
|
||||
Origins
|
||||
Long history
|
||||
::icon(fa fa-book)
|
||||
Popularisation
|
||||
British popular psychology author Tony Buzan
|
||||
Research
|
||||
On effectivness<br/>and eatures
|
||||
On Automatic creation
|
||||
Uses
|
||||
Creative techniques
|
||||
Strategic planning
|
||||
Argument mapping
|
||||
Tools
|
||||
Pen and paper
|
||||
Mermaid
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
root((mindmap))
|
||||
@@ -35,16 +58,22 @@ The syntax for creating Mindmaps is simple and relies on indentation for setting
|
||||
|
||||
In the following example you can see how there are 3 dufferent levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further then the prevoius lines defining the nodes B and C.
|
||||
|
||||
```
|
||||
mindmap
|
||||
Root
|
||||
A
|
||||
B
|
||||
C
|
||||
```
|
||||
mindmap
|
||||
Root
|
||||
A
|
||||
B
|
||||
C
|
||||
|
||||
In summary is is a simple text outline where there are one node at the root level called `Root` which has one child `A`. A in turn has two children `B`and `C`. In the diagram below we can see this rendered as a mindmap.
|
||||
|
||||
```mermaid-example
|
||||
mindmap
|
||||
Root
|
||||
A
|
||||
B
|
||||
C
|
||||
```
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
Root
|
||||
@@ -68,6 +97,11 @@ mindmap
|
||||
id[I am a square]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
id[I am a square]
|
||||
```
|
||||
|
||||
### Rounded square
|
||||
|
||||
```mermaid-example
|
||||
@@ -75,6 +109,11 @@ mindmap
|
||||
id(I am a rounded square)
|
||||
```
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
id(I am a rounded square)
|
||||
```
|
||||
|
||||
### Circle
|
||||
|
||||
```mermaid-example
|
||||
@@ -82,6 +121,11 @@ mindmap
|
||||
id((I am a circle))
|
||||
```
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
id((I am a circle))
|
||||
```
|
||||
|
||||
### Bang
|
||||
|
||||
```mermaid-example
|
||||
@@ -89,6 +133,11 @@ mindmap
|
||||
id))I am a bang((
|
||||
```
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
id))I am a bang((
|
||||
```
|
||||
|
||||
### Cloud
|
||||
|
||||
```mermaid-example
|
||||
@@ -96,6 +145,11 @@ mindmap
|
||||
id)I am a cloud(
|
||||
```
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
id)I am a cloud(
|
||||
```
|
||||
|
||||
### Default
|
||||
|
||||
```mermaid-example
|
||||
@@ -103,6 +157,11 @@ mindmap
|
||||
I am the default shape
|
||||
```
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
I am the default shape
|
||||
```
|
||||
|
||||
More shapes will be added, beginning with the shapes available in flowcharts.
|
||||
|
||||
# Icons and classes
|
||||
@@ -120,6 +179,15 @@ mindmap
|
||||
::icon(mdi mdi-skull-outline)
|
||||
```
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
Root
|
||||
A
|
||||
::icon(fa fa-book)
|
||||
B(B)
|
||||
::icon(mdi mdi-skull-outline)
|
||||
```
|
||||
|
||||
## Classes
|
||||
|
||||
Again the syntax for adding classes is similar to flowcharts and you can add classes using a tripple colon following a numver of css classes separated by space. In the following example one of the nodes has two custom classes attached urgent turning the background red and the text whiet and large increasing the font size:
|
||||
@@ -133,22 +201,37 @@ mindmap
|
||||
C
|
||||
```
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
Root
|
||||
A[A]
|
||||
:::urgent large
|
||||
B(B)
|
||||
C
|
||||
```
|
||||
|
||||
_These classes needs top be supplied by the site administrator._
|
||||
|
||||
## Unclear indentation
|
||||
|
||||
The actual indentation does not really matter only compared with the previous rows. If we take the previous example and disrupt it a little we can se how the calculations are performed. Let us start with placing C with a smaller indentation than `B`but larger then `A`.
|
||||
|
||||
```
|
||||
mindmap
|
||||
Root
|
||||
A
|
||||
B
|
||||
C
|
||||
```
|
||||
mindmap
|
||||
Root
|
||||
A
|
||||
B
|
||||
C
|
||||
|
||||
This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a highter indentation nor does ot haver the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as sieblings.
|
||||
|
||||
```mermaid-example
|
||||
mindmap
|
||||
Root
|
||||
A
|
||||
B
|
||||
C
|
||||
```
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
Root
|
||||
|
Reference in New Issue
Block a user