From 911d97c0a3bdeb6833969cf461da445eab0fbfcc Mon Sep 17 00:00:00 2001 From: Roy Zheng Date: Thu, 1 Oct 2020 16:01:53 -0700 Subject: [PATCH 01/24] Fix broken links in gantt.md --- docs/diagrams-and-syntax-and-examples/gantt.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/diagrams-and-syntax-and-examples/gantt.md b/docs/diagrams-and-syntax-and-examples/gantt.md index 08dccb8da..20a74787d 100644 --- a/docs/diagrams-and-syntax-and-examples/gantt.md +++ b/docs/diagrams-and-syntax-and-examples/gantt.md @@ -11,10 +11,10 @@ title: Gantt Gantt Charts will record each scheduled task as one continuous bar that extends from the left to the right. The x axis represents time and the y records the different tasks and the order in which they are to be completed. It is important to remember that when a date, day, or collection of dates specific to a task are "excluded", the Gantt Chart will accomodate those changes by extending an equal number of day, towards the right, not by creating a gap inside the task. - As shown here ![](https://raw.githubusercontent.com/NeilCuzon/mermaid/develop/docs/img/Gantt-excluded-days-within.png) + As shown here ![](https://raw.githubusercontent.com/NeilCuzon/mermaid/develop/docs/assets/img/Gantt-excluded-days-within.png) However, if the excluded dates are between two tasks that are set to start consecutively, the excluded dates will be skipped graphically and left blank, and the following task will begin after the end of the excluded dates. - As shown here ![](https://raw.githubusercontent.com/NeilCuzon/mermaid/develop/docs/img/Gantt-long-weekend-look.png) + As shown here ![](https://raw.githubusercontent.com/NeilCuzon/mermaid/develop/docs/assets/img/Gantt-long-weekend-look.png) A Gantt chart is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks. From b21100cc5d16bc5694d5778ebcf43722a2be81a9 Mon Sep 17 00:00:00 2001 From: Hal Wine <132412+hwine@users.noreply.github.com> Date: Sat, 3 Oct 2020 09:07:32 -0700 Subject: [PATCH 02/24] Fix typo in pie.md ':' is called a "[colon](https://en.wikipedia.org/wiki/Colon_(punctuation))" (not [semi-colon](https://en.wikipedia.org/wiki/Semicolon)) --- docs/diagrams-and-syntax-and-examples/pie.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/diagrams-and-syntax-and-examples/pie.md b/docs/diagrams-and-syntax-and-examples/pie.md index 22bade7b8..0ff549409 100644 --- a/docs/diagrams-and-syntax-and-examples/pie.md +++ b/docs/diagrams-and-syntax-and-examples/pie.md @@ -30,7 +30,7 @@ Drawing a pie chart is really simple in mermaid. - Followed by `title` keyword and its value in string to give a title to the pie-chart. This is ***OPTIONAL*** - Followed by dataSet - `label` for a section in the pie diagram within `" "` quotes. - - Followed by `:` semi-colon as separator + - Followed by `:` colon as separator - Followed by `positive numeric value` (supported upto two decimal places) [pie] From 68a0506a40ff8f55b4583a538e3cb3e944840e5b Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Thu, 8 Oct 2020 18:46:02 -0700 Subject: [PATCH 03/24] Update Tutorials.md --- docs/getting-started/Tutorials.md | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/docs/getting-started/Tutorials.md b/docs/getting-started/Tutorials.md index 87ce7d1ab..5df51a230 100644 --- a/docs/getting-started/Tutorials.md +++ b/docs/getting-started/Tutorials.md @@ -8,17 +8,14 @@ For the purposes, the Live-Editor is capable of taking care of all diagramming n ## Live-Editor Tutorials The definitions that can be generated the Live-Editor are also backwards-compatible as of version 8.7.0. -https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s +[GitLab Unfiltered:How to Create Mermaid Diagrams](https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s) -https://www.youtube.com/watch?v=5RQqht3NNSE +[GitLab Unfiltered:Emilie adds a mermaid diagram to the handbook](https://www.youtube.com/watch?v=5RQqht3NNSE) -https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s +[World of Zero:I Learn How To Build Flowcharts and Signal Diagram's in Mermaid.JS](https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s) -https://www.youtube.com/watch?v=9HZzKkAqrX8 +[Eddie Jaoude:Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8) -https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s - -https://www.youtube.com/watch?v=9HZzKkAqrX8 ## Mermaid with HTML: Examples are provided in [Gettting Started](n00b-gettingStarted.md) From 19ac8e6e616385510f7dbade09e29e69a29134a8 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Fri, 9 Oct 2020 02:14:01 -0700 Subject: [PATCH 04/24] Update Tutorials.md --- docs/getting-started/Tutorials.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/getting-started/Tutorials.md b/docs/getting-started/Tutorials.md index 5df51a230..f06b68cea 100644 --- a/docs/getting-started/Tutorials.md +++ b/docs/getting-started/Tutorials.md @@ -1,8 +1,8 @@ # Tutorials -This is list of publicly available Tutorials in Mermaid. This is intended as a basic introduction for the use of the Live Editor and HTML with mermaid. +This is list of publicly available Tutorials for using Mermaid.JS . This is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML. -For the purposes, the Live-Editor is capable of taking care of all diagramming needs, and these are the most common use cases for it. +For most purposes, you can use the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor), to quickly and easily render a diagram. ## Live-Editor Tutorials From 35deb4a51219230426566086f7380fa91e375641 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Fri, 9 Oct 2020 18:49:45 -0700 Subject: [PATCH 05/24] Update n00b-overview.md --- docs/overview/n00b-overview.md | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/docs/overview/n00b-overview.md b/docs/overview/n00b-overview.md index 1ac1d2411..e463963c0 100644 --- a/docs/overview/n00b-overview.md +++ b/docs/overview/n00b-overview.md @@ -5,21 +5,20 @@ title: Overview # Overview for Beginners -## There is no explanation like a Good Diagram +## Explaining with a Diagram -A picture is worth a thousand words, a good diagram would be worth more. There is no disputing that they are indeed very useful. Yet very few people use them, even fewer still do so, for documentation. +A picture is worth a thousand words, a good diagram would be worth more. There is no disputing that they are indeed very useful. Yet very few people use them, even fewer still do so for documentation. Mainly because it takes too much time that could be used for more important functions. -mermaid aims to change that. -## Creating and Maintaining Diagrams should not be an expensive and frustrating process. +## Creating and Maintaining Diagrams Anyone who has used Visio, or (God Forbid) Excel to make a Gantt Chart, knows how hard it is to make, edit and maintain good visualizations. -In an environment of constantly changing information , diagrams/charts become obsolete/inaccurate very fast. This hobbles the information transfer and productivity in teams. +In an environment of constantly changing information , diagrams/charts are both very important and also become obsolete/inaccurate very fast. This catch-22 hobbles the information transfer and productivity in teams. -# Doc Rot kills Diagrams +# Doc Rot in Diagrams -The fast setting Doc-Rot in diagrams makes it quite hard to rationalize taking hours in a desktop application, to produce a diagram that you would need to recreate again the following week in order to account for updates and changes in the app you are documenting. Yet that is often the reality for diagrams and charts and the people who make them. +Doc-Rotis quite quick on diagrams makes, after a change is made, it quite hard to rationalize taking hours in a desktop application, to produce a diagram that you would need to recreate again the following week in order to account for updates and changes in the app you are documenting. Yet that is often the reality for diagrams and charts and the people who make them. mermaid seeks to change that. mermaid is a javascript based tool that utilizes a markdown inspired syntax to generate documentation, which is actually quicker, less complicated and more convenient than most traditional diagramming software. This is a relatively straightforward solution to a major hurdle in software teams. @@ -63,12 +62,12 @@ mermaid solves this by cutting the time, effort and tooling that is required to Because, the text base for diagrams allows for it to be updated easily, it can also be made part of production scripts (and other pieces of code). So less time needs be spent on documenting, as a separate task. -## mermaid helps Documentation catch up with Development, in quickly changing projects. +## Catching up with Development -Being based on markdown, mermaid can be used, not only by accomplished front-end developers, but by most computer savvy people to render simple diagrams, at much faster speeds. +Being based on markdown, mermaid can be used, not only by accomplished front-end developers, but by most computer savvy people to render diagrams, at much faster speeds. In fact one can pick up the syntax for it quite easily from the examples given and there are many tutorials in the internet. -## mermaid is for everyone. +## Mermaid is for everyone. Video [Tutorials](./Tutorials.md) are also available for the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/). For information on how to use mermaid, click [here](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted). From 5e95d75f446dbb7394c60c1c247d3c0e40052ddf Mon Sep 17 00:00:00 2001 From: Andreas Deininger Date: Wed, 14 Oct 2020 12:21:34 +0200 Subject: [PATCH 06/24] Fixing broken links --- README.md | 2 +- docs/README.md | 2 +- docs/overview/n00b-overview.md | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 06e52993f..39afa3fdc 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ But not having diagrams or docs ruins productivity and hurts organizational lear Mermaid addresses this problem by cutting the time, effort and tooling that is required to create modifiable diagrams and charts, for smarter and more reusable content. The text definitions for Mermaid diagrams allows for it to be updated easily, it can also be made part of production scripts (and other pieces of code). So less time needs be spent on documenting, as a separate and laborious task.
-Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaidjs/mermaid-live-editor).
+Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor).
[Tutorials](./docs/getting-started/Tutorials.md) has video tutorials. Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/overview/integrations.md). diff --git a/docs/README.md b/docs/README.md index 5882c65e2..634d24609 100644 --- a/docs/README.md +++ b/docs/README.md @@ -21,7 +21,7 @@ With Mermaid less time needs to be spent on making diagrams, as a separate docum > Mermaid is a Diagramming tool for everyone. -Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaidjs/mermaid-live-editor), Visit the [Tutorials Page](href='https://github.com/mermaid-js/mermaid/blob/develop/docs/Tutorials.md) for the Live Editor video tutorials. +Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor), Visit the [Tutorials Page](https://github.com/mermaid-js/mermaid/blob/develop/docs/getting-started/Tutorials.md) for the Live Editor video tutorials. Want to see what can be built with mermaid, or what applications already support it? Read the [Integrations and Usages for Mermaid](overview/integrations.md). diff --git a/docs/overview/n00b-overview.md b/docs/overview/n00b-overview.md index e463963c0..264b2bcfc 100644 --- a/docs/overview/n00b-overview.md +++ b/docs/overview/n00b-overview.md @@ -26,7 +26,7 @@ mermaid seeks to change that. mermaid is a javascript based tool that utilizes a **Mermaid definitions** ->These are the instrunctions for how the diagram is to rendered, written in mermaid, which is based on Markdown. These can be found inside `
` tags, with the `class=mermaid`. +>These are the instructions for how the diagram is to rendered, written in mermaid, which is based on Markdown. These can be found inside `
` tags, with the `class=mermaid`. ```html
@@ -44,7 +44,7 @@ mermaid seeks to change that. mermaid is a javascript based tool that utilizes a **Nodes** ->These are the boxes that contain text or otherwise discrete pieces of each diagram, separated generally by arrows, except for Gantt Charts and User Journey Diagrams. They will be refered to often in the instructions. For Diagram Specific Syntax and Instructions, refer to +>These are the boxes that contain text or otherwise discrete pieces of each diagram, separated generally by arrows, except for Gantt Charts and User Journey Diagrams. They will be referred to often in the instructions. For Diagram Specific Syntax and Instructions, refer to ## Advantages of Using Mermaid @@ -68,7 +68,7 @@ Being based on markdown, mermaid can be used, not only by accomplished front-end In fact one can pick up the syntax for it quite easily from the examples given and there are many tutorials in the internet. ## Mermaid is for everyone. -Video [Tutorials](./Tutorials.md) are also available for the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/). +Video [Tutorials](./getting-started/Tutorials.md) are also available for the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/). For information on how to use mermaid, click [here](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted). Alternatively, you could also view the [integrations and uses](https://mermaid-js.github.io/mermaid/#/./integrations), to see how mermaid is used. From 439399b9f17a6dd0c42c42f5cd4ec435f989c7e0 Mon Sep 17 00:00:00 2001 From: Andreas Deininger Date: Wed, 14 Oct 2020 14:41:15 +0200 Subject: [PATCH 07/24] Fixing various typos/misspellings in documentation --- .../classDiagram.md | 6 +++--- .../flowchart.md | 10 +++++----- docs/diagrams-and-syntax-and-examples/gantt.md | 6 +++--- .../n00b-syntaxReference.md | 2 +- docs/diagrams-and-syntax-and-examples/pie.md | 2 +- .../sequenceDiagram.md | 6 +++--- docs/getting-started/Tutorials.md | 8 ++++---- docs/getting-started/n00b-gettingStarted.md | 2 +- docs/getting-started/theming.md | 14 +++++++------- docs/getting-started/usage.md | 10 +++++----- docs/overview/integrations.md | 2 +- docs/overview/n00b-overview.md | 2 +- docs/tutorials-and-community/CHANGELOG.md | 18 +++++++++--------- 13 files changed, 44 insertions(+), 44 deletions(-) diff --git a/docs/diagrams-and-syntax-and-examples/classDiagram.md b/docs/diagrams-and-syntax-and-examples/classDiagram.md index 489c7370e..5dd1e2c64 100644 --- a/docs/diagrams-and-syntax-and-examples/classDiagram.md +++ b/docs/diagrams-and-syntax-and-examples/classDiagram.md @@ -231,7 +231,7 @@ To specify the visibility of a class member (i.e. any attribute or method), thes - `#` Protected - `~` Package/Internal -> _note_ you can also include additional _classifers_ to a method definition by adding the following notations to the end of the method, i.e.: after the `()`: +> _note_ you can also include additional _classifiers_ to a method definition by adding the following notations to the end of the method, i.e.: after the `()`: > - `*` Abstract e.g.: `someAbstractMethod()*` > - `$` Static e.g.: `someStaticMethod()$` @@ -349,7 +349,7 @@ The different cardinality options are : - `0..n` zero to n {where n>1} - `1..n` one to n {where n>1} -Cardinality can be easily defined by placing cardinality text within qoutes `"` before(optional) and after(optional) a given arrow. +Cardinality can be easily defined by placing cardinality text within quotes `"` before(optional) and after(optional) a given arrow. ``` [classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText @@ -606,7 +606,7 @@ The main styling of the class diagram is done with a preset number of css classe | g.classGroup line | Styles for class diagram line | | .classLabel .box | Styles for class label box | | .classLabel .label | Styles for class label text | -| composition | Styles for componsition arrow head and arrow line | +| composition | Styles for composition arrow head and arrow line | | aggregation | Styles for aggregation arrow head and arrow line(dashed or solid) | | dependency | Styles for dependency arrow head and arrow line | diff --git a/docs/diagrams-and-syntax-and-examples/flowchart.md b/docs/diagrams-and-syntax-and-examples/flowchart.md index 6a9245e23..c332d4d94 100644 --- a/docs/diagrams-and-syntax-and-examples/flowchart.md +++ b/docs/diagrams-and-syntax-and-examples/flowchart.md @@ -139,7 +139,7 @@ graph LR id1((This is the text in the circle)) ``` -### A node in an asymetric shape +### A node in an asymmetric shape ``` graph LR @@ -356,7 +356,7 @@ graph LR a --> b & c--> d ``` -You can then describe dependencies in a very expressive way. Like the onliner below: +You can then describe dependencies in a very expressive way. Like the oneliner below: ``` graph TB A & B--> C & D @@ -493,7 +493,7 @@ graph LR ### Entity codes to escape characters -It is possible to escape characters using the syntax examplified here. +It is possible to escape characters using the syntax exemplified here. ``` graph LR @@ -541,7 +541,7 @@ graph TB end ``` - You can also set an excplicit id for the subgraph. + You can also set an explicit id for the subgraph. ``` graph TB @@ -808,7 +808,7 @@ If a class is named default it will be assigned to all classes without specific It is possible to add icons from fontawesome. -The icons are acessed via the syntax fa:#icon class name#. +The icons are accessed via the syntax fa:#icon class name#. ``` graph TD diff --git a/docs/diagrams-and-syntax-and-examples/gantt.md b/docs/diagrams-and-syntax-and-examples/gantt.md index 08dccb8da..e86fb3481 100644 --- a/docs/diagrams-and-syntax-and-examples/gantt.md +++ b/docs/diagrams-and-syntax-and-examples/gantt.md @@ -10,7 +10,7 @@ title: Gantt ## A note to users Gantt Charts will record each scheduled task as one continuous bar that extends from the left to the right. The x axis represents time and the y records the different tasks and the order in which they are to be completed. - It is important to remember that when a date, day, or collection of dates specific to a task are "excluded", the Gantt Chart will accomodate those changes by extending an equal number of day, towards the right, not by creating a gap inside the task. + It is important to remember that when a date, day, or collection of dates specific to a task are "excluded", the Gantt Chart will accommodate those changes by extending an equal number of day, towards the right, not by creating a gap inside the task. As shown here ![](https://raw.githubusercontent.com/NeilCuzon/mermaid/develop/docs/img/Gantt-excluded-days-within.png) However, if the excluded dates are between two tasks that are set to start consecutively, the excluded dates will be skipped graphically and left blank, and the following task will begin after the end of the excluded dates. @@ -107,7 +107,7 @@ gantt Add another diagram to demo page :48h ``` -It is possible to set multiple depenendenies separated by space: +It is possible to set multiple dependencies separated by space: ``` gantt apple :a, 2017-07-20, 1w @@ -339,7 +339,7 @@ mermaid.ganttConfig = { Param | Descriotion | Default value --- | --- | --- mirrorActor|Turns on/off the rendering of actors below the diagram as well as above it|false -bottomMarginAdj|Adjusts how far down the graph ended. Wide borders styles with css could generate unwantewd clipping which is why this config param exists.|1 +bottomMarginAdj|Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists.|1 ## Interaction diff --git a/docs/diagrams-and-syntax-and-examples/n00b-syntaxReference.md b/docs/diagrams-and-syntax-and-examples/n00b-syntaxReference.md index 8eb4ae2c9..ebc593803 100644 --- a/docs/diagrams-and-syntax-and-examples/n00b-syntaxReference.md +++ b/docs/diagrams-and-syntax-and-examples/n00b-syntaxReference.md @@ -8,7 +8,7 @@ title: Diagram syntax intro If you are new to mermaid, read the [Getting Started](../getting-started/n00b-gettingStarted.md) and [Overview](../overview/n00b-overview.md) sections, to learn the basics of mermaid. Video Tutorials can be found at the bottom of the Overview Section. -This section is a list of diagram types supported by mermaid. Below is a list of links to aricles that explain the syntax of the diagrams or charts that can be called. +This section is a list of diagram types supported by mermaid. Below is a list of links to articles that explain the syntax of the diagrams or charts that can be called. They also detail how diagrams can be defined, or described in the manner with which the diagram is to be rendered by the renderer. diff --git a/docs/diagrams-and-syntax-and-examples/pie.md b/docs/diagrams-and-syntax-and-examples/pie.md index 22bade7b8..1ef899393 100644 --- a/docs/diagrams-and-syntax-and-examples/pie.md +++ b/docs/diagrams-and-syntax-and-examples/pie.md @@ -31,7 +31,7 @@ Drawing a pie chart is really simple in mermaid. - Followed by dataSet - `label` for a section in the pie diagram within `" "` quotes. - Followed by `:` semi-colon as separator - - Followed by `positive numeric value` (supported upto two decimal places) + - Followed by `positive numeric value` (supported up to two decimal places) [pie] [title] [titlevalue] (OPTIONAL) diff --git a/docs/diagrams-and-syntax-and-examples/sequenceDiagram.md b/docs/diagrams-and-syntax-and-examples/sequenceDiagram.md index 1c56dc198..8ff4ccdd5 100644 --- a/docs/diagrams-and-syntax-and-examples/sequenceDiagram.md +++ b/docs/diagrams-and-syntax-and-examples/sequenceDiagram.md @@ -508,11 +508,11 @@ mermaid.sequenceConfig = { }; ``` -### Possible configuration params: +### Possible configuration parameters: -| Param | Description | Default value | +| Parameter | Description | Default value | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------ | -| mirrorActors | Turns on/off the rendering of actors below the diagram as well as above it | false | +| mirrorActors | Turns on/off the rendering of actors below the diagram as well as above it | false | | bottomMarginAdj | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1 | | actorFontSize | Sets the font size for the actor's description | 14 | | actorFontFamily | Sets the font family for the actor's description | "Open-Sans", "sans-serif" | diff --git a/docs/getting-started/Tutorials.md b/docs/getting-started/Tutorials.md index f06b68cea..1ab371d3d 100644 --- a/docs/getting-started/Tutorials.md +++ b/docs/getting-started/Tutorials.md @@ -8,13 +8,13 @@ For most purposes, you can use the [Live Editor](https://mermaid-js.github.io/me ## Live-Editor Tutorials The definitions that can be generated the Live-Editor are also backwards-compatible as of version 8.7.0. -[GitLab Unfiltered:How to Create Mermaid Diagrams](https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s) +[GitLab Unfiltered: How to Create Mermaid Diagrams](https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s) -[GitLab Unfiltered:Emilie adds a mermaid diagram to the handbook](https://www.youtube.com/watch?v=5RQqht3NNSE) +[GitLab Unfiltered: Emilie adds a mermaid diagram to the handbook](https://www.youtube.com/watch?v=5RQqht3NNSE) -[World of Zero:I Learn How To Build Flowcharts and Signal Diagram's in Mermaid.JS](https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s) +[World of Zero: I Learn How To Build Flowcharts and Signal Diagram's in Mermaid.JS](https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s) -[Eddie Jaoude:Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8) +[Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8) ## Mermaid with HTML: diff --git a/docs/getting-started/n00b-gettingStarted.md b/docs/getting-started/n00b-gettingStarted.md index adb51835f..17a154674 100644 --- a/docs/getting-started/n00b-gettingStarted.md +++ b/docs/getting-started/n00b-gettingStarted.md @@ -235,7 +235,7 @@ This method is similar to 3, if only a little more involved. The difference may **Three additional comments from Knut Sveidqvist, creator of mermaid:** -- In early versions of mermaid, the `