From 33aa7d8333dcdc6cf6f7711a8ef381529fa97647 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut.sveidqvist@ipiccolo.com>
Date: Tue, 30 Aug 2022 21:38:34 +0200
Subject: [PATCH] Startingpoint for the documentation

---
 docs/_sidebar.md |  3 +-
 docs/index.html  |  4 +-
 docs/mindmap.md  | 97 ++++++++++++++++++++++++++++++++++++++++++++++++
 yarn.lock        |  8 ++--
 4 files changed, 105 insertions(+), 7 deletions(-)
 create mode 100644 docs/mindmap.md

diff --git a/docs/_sidebar.md b/docs/_sidebar.md
index 0a8b44995..d1de6aa8a 100644
--- a/docs/_sidebar.md
+++ b/docs/_sidebar.md
@@ -14,8 +14,9 @@
   - [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)
 
 - ⚙️ Deployment and Configuration
diff --git a/docs/index.html b/docs/index.html
index 02c01d954..c33ef44c3 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -18,8 +18,8 @@
     <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
     <link rel="stylesheet" href="theme.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
-    <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.6/dist/mermaid.min.js"></script>
-    <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
+    <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.6/dist/mermaid.min.js"></script> -->
+    <script src="http://localhost:9000/mermaid.js"></script>
     <script>
       // prettier-ignore
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
diff --git a/docs/mindmap.md b/docs/mindmap.md
new file mode 100644
index 000000000..a864bf15b
--- /dev/null
+++ b/docs/mindmap.md
@@ -0,0 +1,97 @@
+# Mindmap
+
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/mindmap.md)
+> Mindmap: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stabel except for the icon integration which is the experimental part.
+
+"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
+
+### An example of a mindmap.
+```mermaid
+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
+
+```
+## Syntax
+
+The syntax for creating Mindmaps is simple and relies on indentation for setting the levels in the hierarchy.
+
+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
+```
+
+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
+mindmap
+Root
+    A
+      B
+      C
+```
+
+In this way we can use a text outline to generate a hierarchical mindmap.
+
+## Different shapes
+Mermaids mindmaps can show node using different shapes. When specifying a shape for a node the synax for the 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.
+
+Mindmap can show the following shapes:
+
+### Square
+
+```mermaid-example
+mindmap
+    id[I am a square]
+```
+### Rounded square
+
+```mermaid-example
+mindmap
+    id(I am a rounded square)
+```
+### Circle
+
+```mermaid-example
+mindmap
+    id((I am a rounded square))
+```
+
+## 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
+```
+
+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
+mindmap
+Root
+    A
+        B
+      C
+```
diff --git a/yarn.lock b/yarn.lock
index 4468f9ac9..a3c4bae87 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8603,10 +8603,10 @@ module-deps-sortable@^5.0.3:
     through2 "^2.0.0"
     xtend "^4.0.0"
 
-moment-mini@2.24.0:
-  version "2.24.0"
-  resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.24.0.tgz#fa68d98f7fe93ae65bf1262f6abb5fb6983d8d18"
-  integrity sha512-9ARkWHBs+6YJIvrIp0Ik5tyTTtP9PoV0Ssu2Ocq5y9v8+NOOpWiRshAp8c4rZVWTOe+157on/5G+zj5pwIQFEQ==
+moment-mini@^2.24.0:
+  version "2.29.4"
+  resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.29.4.tgz#cbbcdc58ce1b267506f28ea6668dbe060a32758f"
+  integrity sha512-uhXpYwHFeiTbY9KSgPPRoo1nt8OxNVdMVoTBYHfSEKeRkIkwGpO+gERmhuhBtzfaeOyTkykSrm2+noJBgqt3Hg==
 
 moment@^2.23.0:
   version "2.29.4"