From 809fbf685b0bd75dafd83971f3bf4aee5c8fb823 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut.sveidqvist@ipiccolo.com>
Date: Tue, 30 Aug 2022 22:08:05 +0200
Subject: [PATCH] Documenting classes and icons

---
 docs/index.html | 15 +++++++++++++++
 docs/mindmap.md | 37 ++++++++++++++++++++++++++++++++++++-
 2 files changed, 51 insertions(+), 1 deletion(-)
diff --git a/docs/index.html b/docs/index.html
index c33ef44c3..49bf2fef5 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -18,6 +18,7 @@
     <!-- <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">
+    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css" rel="stylesheet">
     <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.6/dist/mermaid.min.js"></script> -->
     <script src="http://localhost:9000/mermaid.js"></script>
     <script>
@@ -49,6 +50,20 @@
       .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>
   <body>
diff --git a/docs/mindmap.md b/docs/mindmap.md
index a864bf15b..0b8a46ae9 100644
--- a/docs/mindmap.md
+++ b/docs/mindmap.md
@@ -72,9 +72,44 @@ mindmap
 
 ```mermaid-example
 mindmap
-    id((I am a rounded square))
+    id((I am a circle))
 ```
 
+### Default
+
+```mermaid-example
+mindmap
+    I am the default shape
+```
+
+More shapes will be added, beginning with the shapes available in flowcharts.
+
+# Icons and classes
+
+## icons
+As 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 parethesis like in the following example where icons for material design and fontwaresome 4. is displayed. The intention is that this approach should be used for all diagrams supporting icons. **Expermental feature:** This wider scope is also the reason Mindmaps are experimental as this syntax and approach could change.
+
+```mermaid-example
+mindmap
+    Root
+        A
+        ::icon(fa fa-book)
+        B(B)
+        ::icon(mdi mdi-skull-outline)
+```
+## Classes
+
+Again the synax 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:
+```mermaid-example
+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`.
 
