From a95f46f51351c61f406e291a2d693ad45c5fde20 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 5 Sep 2022 01:25:28 +0530 Subject: [PATCH] Fix mermaid code formatting in html --- docs/Setup.md | 2 +- docs/classDiagram.md | 35 ++++++++++--- .../flowchart.md | 15 ++++-- docs/flowchart.md | 15 ++++-- docs/gantt.md | 19 ++++--- docs/index.html | 2 +- docs/n00b-gettingStarted.md | 51 ++++++++++++------- docs/n00b-overview.md | 9 ++-- docs/usage.md | 23 ++++++--- src/docs/Setup.md | 2 +- src/docs/classDiagram.md | 35 ++++++++++--- .../flowchart.md | 15 ++++-- src/docs/flowchart.md | 15 ++++-- src/docs/gantt.md | 19 ++++--- src/docs/index.html | 2 +- src/docs/n00b-gettingStarted.md | 51 ++++++++++++------- src/docs/n00b-overview.md | 9 ++-- src/docs/usage.md | 45 +++++++++------- 18 files changed, 249 insertions(+), 115 deletions(-) diff --git a/docs/Setup.md b/docs/Setup.md index 6c7a1e32a..1f948ee01 100644 --- a/docs/Setup.md +++ b/docs/Setup.md @@ -13,7 +13,7 @@ using the default integration provided by mermaid.js. The core of this api is the [**render**][2] function which, given a graph definition as text, renders the graph/diagram and returns an svg element for the graph. -It is is then up to the user of the API to make use of the svg, either insert it somewhere in the +It is then up to the user of the API to make use of the svg, either insert it somewhere in the page or do something completely different. In addition to the render function, a number of behavioral configuration options are available. diff --git a/docs/classDiagram.md b/docs/classDiagram.md index 13b30714d..1576aaa17 100644 --- a/docs/classDiagram.md +++ b/docs/classDiagram.md @@ -3,8 +3,7 @@ # Class diagrams > "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects." -> -> - Wikipedia +> Wikipedia The class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling to translate the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed. @@ -595,12 +594,32 @@ Beginner's tip—a full example using interactive links in an HTML page: ```html -
- classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : - +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() - +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } callback - Duck callback "Tooltip" link Zebra "https://www.github.com" "This is a link" -
+ 
+    classDiagram
+    Animal <|-- Duck
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    Animal: +mate()
+    class Duck{
+      +String beakColor
+      +swim()
+      +quack()
+      }
+    class Fish{
+      -int sizeInFeet
+      -canEat()
+      }
+    class Zebra{
+      +bool is_wild
+      +run()
+      }
+
+      callback Duck callback "Tooltip"
+      link Zebra "https://www.github.com" "This is a link"
+
Here is one mermaid diagram: -
- graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2] -
+ 
+            graph TD 
+            A[Client] --> B[Load Balancer] 
+            B --> C[Server1] 
+            B --> D[Server2]
+
And here is another: -
- graph TD A[Client] -->|tcp_123| B B(Load Balancer) B -->|tcp_456| C[Server1] B -->|tcp_456| - D[Server2] -
+ 
+            graph TD 
+            A[Client] -->|tcp_123| B
+            B(Load Balancer) 
+            B -->|tcp_456| C[Server1] 
+            B -->|tcp_456| D[Server2]
+
``` @@ -160,10 +169,18 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file, -
graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);
-
- graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2] -
+ 
+            graph LR 
+            A --- B 
+            B-->C[fa:fa-ban forbidden] 
+            B-->D(fa:fa-spinner);
+
+ 
+            graph TD 
+            A[Client] --> B[Load Balancer] 
+            B --> C[Server1] 
+            B --> D[Server2]
+
' - html + '
'+code+'
' + html + '
'+code+'
' else @defaultCode(code, language) diff --git a/src/docs/Setup.md b/src/docs/Setup.md index e87c9eead..a9d8e87e2 100644 --- a/src/docs/Setup.md +++ b/src/docs/Setup.md @@ -11,7 +11,7 @@ using the default integration provided by mermaid.js. The core of this api is the [**render**][2] function which, given a graph definition as text, renders the graph/diagram and returns an svg element for the graph. -It is is then up to the user of the API to make use of the svg, either insert it somewhere in the +It is then up to the user of the API to make use of the svg, either insert it somewhere in the page or do something completely different. In addition to the render function, a number of behavioral configuration options are available. diff --git a/src/docs/classDiagram.md b/src/docs/classDiagram.md index a72b376d1..87d76cd37 100644 --- a/src/docs/classDiagram.md +++ b/src/docs/classDiagram.md @@ -1,8 +1,7 @@ # Class diagrams > "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects." -> -> - Wikipedia +> Wikipedia The class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling to translate the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed. @@ -424,12 +423,32 @@ Beginner's tip—a full example using interactive links in an HTML page: ```html -
- classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : - +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() - +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } callback - Duck callback "Tooltip" link Zebra "https://www.github.com" "This is a link" -
+ 
+    classDiagram
+    Animal <|-- Duck
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    Animal: +mate()
+    class Duck{
+      +String beakColor
+      +swim()
+      +quack()
+      }
+    class Fish{
+      -int sizeInFeet
+      -canEat()
+      }
+    class Zebra{
+      +bool is_wild
+      +run()
+      }
+
+      callback Duck callback "Tooltip"
+      link Zebra "https://www.github.com" "This is a link"
+
Here is one mermaid diagram: -
- graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2] -
+ 
+            graph TD 
+            A[Client] --> B[Load Balancer] 
+            B --> C[Server1] 
+            B --> D[Server2]
+
And here is another: -
- graph TD A[Client] -->|tcp_123| B B(Load Balancer) B -->|tcp_456| C[Server1] B -->|tcp_456| - D[Server2] -
+ 
+            graph TD 
+            A[Client] -->|tcp_123| B
+            B(Load Balancer) 
+            B -->|tcp_456| C[Server1] 
+            B -->|tcp_456| D[Server2]
+
``` @@ -158,10 +167,18 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file, -
graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);
-
- graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2] -
+ 
+            graph LR 
+            A --- B 
+            B-->C[fa:fa-ban forbidden] 
+            B-->D(fa:fa-spinner);
+
+ 
+            graph TD 
+            A[Client] --> B[Load Balancer] 
+            B --> C[Server1] 
+            B --> D[Server2]
+
- ``` + ```html + + ``` -2. The `mermaidAPI` call, in a separate `script` tag. Example: +2. The `mermaidAPI` call, in a separate `script` tag. Example: - ```html - - ``` + ```html + + ``` -3. A graph definition, inside `
` tags labeled `class=mermaid`. Example: - ```html -
graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);
- ``` +3. A graph definition, inside `
` tags labeled `class=mermaid`. Example: + +```html +
+    graph LR
+    A --- B
+    B-->C[fa:fa-ban forbidden]
+    B-->D(fa:fa-spinner);
+
+``` **Following these directions, mermaid starts at page load and (when the page has loaded) it will locate the graph definitions inside the `div` tags with `class="mermaid"` and return diagrams in SVG form, following given definitions.** @@ -72,7 +78,12 @@ locate the graph definitions inside the `div` tags with `class="mermaid"` and re -
graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);
+ 
+  graph LR
+      A --- B
+      B-->C[fa:fa-ban forbidden]
+      B-->D(fa:fa-spinner);
+
' - html + '
'+code+'
' + html + '
'+code+'
' else @defaultCode(code, language)