8.9 KB336 lines
Blame
1> **Warning**
2>
3> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
4>
5> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/mindmap.md](../../packages/mermaid/src/docs/syntax/mindmap.md).
6
7# Mindmap
8
9> Mindmap: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stable except for the icon integration which is the experimental part.
10
11"A mind map is a diagram used to visually organize information into a hierarchy, showing relationships among pieces of the whole. It is often created around a single concept, drawn as an image in the center of a blank page, to which associated representations of ideas such as images, words and parts of words are added. Major ideas are connected directly to the central concept, and other ideas branch out from those major ideas." Wikipedia
12
13### An example of a mindmap.
14
15```mermaid-example
16mindmap
17 root((mindmap))
18 Origins
19 Long history
20 ::icon(fa fa-book)
21 Popularisation
22 British popular psychology author Tony Buzan
23 Research
24 On effectiveness<br/>and features
25 On Automatic creation
26 Uses
27 Creative techniques
28 Strategic planning
29 Argument mapping
30 Tools
31 Pen and paper
32 Mermaid
33
34```
35
36```mermaid
37mindmap
38 root((mindmap))
39 Origins
40 Long history
41 ::icon(fa fa-book)
42 Popularisation
43 British popular psychology author Tony Buzan
44 Research
45 On effectiveness<br/>and features
46 On Automatic creation
47 Uses
48 Creative techniques
49 Strategic planning
50 Argument mapping
51 Tools
52 Pen and paper
53 Mermaid
54
55```
56
57## Syntax
58
59The syntax for creating Mindmaps is simple and relies on indentation for setting the levels in the hierarchy.
60
61In the following example you can see how there are 3 different 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 than the previous lines defining the nodes B and C.
62
63```
64mindmap
65 Root
66 A
67 B
68 C
69```
70
71In summary is a simple text outline where there is 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.
72
73```mermaid-example
74mindmap
75Root
76 A
77 B
78 C
79```
80
81```mermaid
82mindmap
83Root
84 A
85 B
86 C
87```
88
89In this way we can use a text outline to generate a hierarchical mindmap.
90
91## Different shapes
92
93Mermaid mindmaps can show nodes using different shapes. When specifying a shape for a node the syntax is similar to flowchart nodes, with an id followed by the shape definition and with the text within the shape delimiters. Where possible we try/will try to keep the same shapes as for flowcharts, even though they are not all supported from the start.
94
95Mindmap can show the following shapes:
96
97### Square
98
99```mermaid-example
100mindmap
101 id[I am a square]
102```
103
104```mermaid
105mindmap
106 id[I am a square]
107```
108
109### Rounded square
110
111```mermaid-example
112mindmap
113 id(I am a rounded square)
114```
115
116```mermaid
117mindmap
118 id(I am a rounded square)
119```
120
121### Circle
122
123```mermaid-example
124mindmap
125 id((I am a circle))
126```
127
128```mermaid
129mindmap
130 id((I am a circle))
131```
132
133### Bang
134
135```mermaid-example
136mindmap
137 id))I am a bang((
138```
139
140```mermaid
141mindmap
142 id))I am a bang((
143```
144
145### Cloud
146
147```mermaid-example
148mindmap
149 id)I am a cloud(
150```
151
152```mermaid
153mindmap
154 id)I am a cloud(
155```
156
157### Hexagon
158
159```mermaid-example
160mindmap
161 id{{I am a hexagon}}
162```
163
164```mermaid
165mindmap
166 id{{I am a hexagon}}
167```
168
169### Default
170
171```mermaid-example
172mindmap
173 I am the default shape
174```
175
176```mermaid
177mindmap
178 I am the default shape
179```
180
181More shapes will be added, beginning with the shapes available in flowcharts.
182
183# Icons and classes
184
185## Icons
186
187As with flowcharts you can add icons to your nodes but with an updated syntax. The styling for the font based icons are added during the integration so that they are available for the web page. _This is not something a diagram author can do but has to be done with the site administrator or the integrator_. Once the icon fonts are in place you add them to the mind map nodes using the `::icon()` syntax. You place the classes for the icon within the parenthesis like in the following example where icons for material design and [Font Awesome 5](https://fontawesome.com/v5/search?o=r&m=free) are displayed. The intention is that this approach should be used for all diagrams supporting icons. **Experimental feature:** This wider scope is also the reason Mindmaps are experimental as this syntax and approach could change.
188
189```mermaid-example
190mindmap
191 Root
192 A
193 ::icon(fa fa-book)
194 B(B)
195 ::icon(mdi mdi-skull-outline)
196```
197
198```mermaid
199mindmap
200 Root
201 A
202 ::icon(fa fa-book)
203 B(B)
204 ::icon(mdi mdi-skull-outline)
205```
206
207## Classes
208
209Again the syntax for adding classes is similar to flowcharts. You can add classes using a triple colon following a number 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 white and large increasing the font size:
210
211```mermaid-example
212mindmap
213 Root
214 A[A]
215 :::urgent large
216 B(B)
217 C
218```
219
220```mermaid
221mindmap
222 Root
223 A[A]
224 :::urgent large
225 B(B)
226 C
227```
228
229_These classes need to be supplied by the site administrator._
230
231## Unclear indentation
232
233The 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 see how the calculations are performed. Let us start with placing C with a smaller indentation than `B` but larger then `A`.
234
235```
236mindmap
237 Root
238 A
239 B
240 C
241```
242
243This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is neither a child of `B` with a higher indentation nor does it have 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 siblings.
244
245```mermaid-example
246mindmap
247Root
248 A
249 B
250 C
251```
252
253```mermaid
254mindmap
255Root
256 A
257 B
258 C
259```
260
261## Markdown Strings
262
263The "Markdown Strings" feature enhances mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.
264
265```mermaid-example
266mindmap
267 id1["`**Root** with
268a second line
269Unicode works too: 🤓`"]
270 id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]
271 id3[Regular labels still works]
272```
273
274```mermaid
275mindmap
276 id1["`**Root** with
277a second line
278Unicode works too: 🤓`"]
279 id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]
280 id3[Regular labels still works]
281```
282
283Formatting:
284
285- For bold text, use double asterisks \*\* before and after the text.
286- For italics, use single asterisks \* before and after the text.
287- With traditional strings, you needed to add <br> tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a <br> tag.
288
289## Integrating with your library/website.
290
291Mindmap uses the experimental lazy loading & async rendering features which could change in the future. From version 9.4.0 this diagram is included in mermaid but use lazy loading in order to keep the size of mermaid down. This is important in order to be able to add additional diagrams going forward.
292
293You can still use the pre 9.4.0 method to add mermaid with mindmaps to a web page:
294
295```html
296<script type="module">
297 import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9.3.0/dist/mermaid.esm.min.mjs';
298 import mindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.3.0/dist/mermaid-mindmap.esm.min.mjs';
299 await mermaid.registerExternalDiagrams([mindmap]);
300</script>
301```
302
303From version 9.4.0 you can simplify this code to:
304
305```html
306<script type="module">
307 import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
308</script>
309```
310
311You can also refer the [implementation in the live editor](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
312
313<!---
314cspell:locale en,en-gb
315cspell:ignore Buzan
316--->
317
318## Layouts
319
320Mermaid also supports a Tidy Tree layout for mindmaps.
321
322```
323---
324config:
325 layout: tidy-tree
326---
327mindmap
328root((mindmap is a long thing))
329 A
330 B
331 C
332 D
333```
334
335Instructions to add and register tidy-tree layout are present in [Tidy Tree Configuration](/config/tidy-tree)
336