From 693ea05e965d0dc8c17b6bda1e911bfa63c5f5bd Mon Sep 17 00:00:00 2001 From: Trevor Moy <51927676+trevmoy@users.noreply.github.com> Date: Wed, 18 Oct 2023 23:45:35 -0400 Subject: [PATCH 01/10] Create mermaid.md --- syllabus/mermaid.md | 46 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 syllabus/mermaid.md diff --git a/syllabus/mermaid.md b/syllabus/mermaid.md new file mode 100644 index 0000000..47d218e --- /dev/null +++ b/syllabus/mermaid.md @@ -0,0 +1,46 @@ +## Mermaid Overview + +### What is Mermaid? + +Mermaid is a flowchart and diagram visualization tool based on JavaScript and uses Markdown syntax to create flowcharts that are extremely dynamic and high quality. Mermaid is especially useful because you are able to display your beautiful flowcharts using backticks to create a code block. + +### Tutorial for Using Mermaid + +Either on the [Mermaid](https://mermaid.live/edit#pako:eNpVjstqw0AMRX9FaNVC_ANeFBq7zSbQQrPzZCFsOTMk80CWCcH2v3ccb1qtxD3nCk3Yxo6xxP4W760lUTjVJkCe96ay4gb1NJyhKN7mAyv4GPgxw_7lEGGwMSUXLq-bv18lqKbjqjGodeG6bKh69r8Cz1A3R0oa0_kvOd3jDB-N-7b5_H9ihXPrs-mp7KloSaAieSq4Q8_iyXX5_WlNDKplzwbLvHYkV4MmLNmjUePPI7RYqoy8wzF1pFw7ugj5LVx-AfLqVWg) website or in the file you're making edits to you can make complex flowcharts seamlessly. + +#### Using Code Blocks + +A code block should look like the following: +```` +```mermaid +blah blah blah +``` +```` + +#### Example Mermaid Code Block + +```mermaid +flowchart TD + A[Christmas] -->|Get money| B(Go shopping) + B --> C{Let me think} + C -->|One| D[Laptop] + C -->|Two| E[iPhone] + C -->|Three| F[fa:fa-car Car] +``` + +In Mermaid there are different styles for boxes with either square or round edges and the option to give a description of each item in its pipe. + +So the code above actually looks like this in it's code block: + +```` +```mermaid +flowchart TD + A[Christmas] -->|Get money| B(Go shopping) + B --> C{Let me think} + C -->|One| D[Laptop] + C -->|Two| E[iPhone] + C -->|Three| F[fa:fa-car Car] +``` +```` + +There's lots of cool and unique things that can be created using Mermaid and the best way to understand it better is to continue to practice. From 00163d85444c2faeb0d6d0bef1dcde19400b3a80 Mon Sep 17 00:00:00 2001 From: Trevor Moy <51927676+trevmoy@users.noreply.github.com> Date: Thu, 19 Oct 2023 14:18:06 -0400 Subject: [PATCH 02/10] Update mermaid.md --- syllabus/mermaid.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/syllabus/mermaid.md b/syllabus/mermaid.md index 47d218e..4c7be65 100644 --- a/syllabus/mermaid.md +++ b/syllabus/mermaid.md @@ -1,14 +1,14 @@ -## Mermaid Overview +# Mermaid Overview -### What is Mermaid? +## What is Mermaid? Mermaid is a flowchart and diagram visualization tool based on JavaScript and uses Markdown syntax to create flowcharts that are extremely dynamic and high quality. Mermaid is especially useful because you are able to display your beautiful flowcharts using backticks to create a code block. -### Tutorial for Using Mermaid +## Tutorial for Using Mermaid Either on the [Mermaid](https://mermaid.live/edit#pako:eNpVjstqw0AMRX9FaNVC_ANeFBq7zSbQQrPzZCFsOTMk80CWCcH2v3ccb1qtxD3nCk3Yxo6xxP4W760lUTjVJkCe96ay4gb1NJyhKN7mAyv4GPgxw_7lEGGwMSUXLq-bv18lqKbjqjGodeG6bKh69r8Cz1A3R0oa0_kvOd3jDB-N-7b5_H9ihXPrs-mp7KloSaAieSq4Q8_iyXX5_WlNDKplzwbLvHYkV4MmLNmjUePPI7RYqoy8wzF1pFw7ugj5LVx-AfLqVWg) website or in the file you're making edits to you can make complex flowcharts seamlessly. -#### Using Code Blocks +### Using Code Blocks A code block should look like the following: ```` @@ -17,7 +17,7 @@ blah blah blah ``` ```` -#### Example Mermaid Code Block +####Example Mermaid Code Block ```mermaid flowchart TD From 556ab3957b37e33f7ab57ce32a6855c02f6cf039 Mon Sep 17 00:00:00 2001 From: Trevor Moy <51927676+trevmoy@users.noreply.github.com> Date: Wed, 25 Oct 2023 14:50:45 -0400 Subject: [PATCH 03/10] Added faq/mermaid_tutorial.md and updated _toc.yml --- _toc.yml | 1 + faq/mermaid_tutorial.md | 46 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 47 insertions(+) create mode 100644 faq/mermaid_tutorial.md diff --git a/_toc.yml b/_toc.yml index 0bba4f7..cb6d636 100644 --- a/_toc.yml +++ b/_toc.yml @@ -41,6 +41,7 @@ parts: - file: faq/syllabus - file: faq/github - file: faq/tools + - file: faq/mermaid_tutorial - caption: Resources chapters: - file: resources/glossary diff --git a/faq/mermaid_tutorial.md b/faq/mermaid_tutorial.md new file mode 100644 index 0000000..2ade02e --- /dev/null +++ b/faq/mermaid_tutorial.md @@ -0,0 +1,46 @@ +# Mermaid Overview + +## What is Mermaid? + +[Mermaid](https://github.com/mermaid-js/mermaid) is a flowchart and diagram visualization tool based on JavaScript and uses Markdown syntax to create flowcharts that are extremely dynamic and high quality. [Mermaid](https://github.com/mermaid-js/mermaid) is especially useful because you are able to display your beautiful flowcharts using backticks to create a code block. + +## Tutorial for Using Mermaid + +Either on the [Mermaid](https://www.mermaidchart.com/) website or within the **GitHub** markdown file that you're making edits to you can make complex flowcharts seamlessly. + +### Using Code Blocks + +A code block should look like the following: +```` +```mermaid +blah blah blah +``` +```` + +####Example Mermaid Code Block + +```mermaid +flowchart TD + A[Christmas] -->|Get money| B(Go shopping) + B --> C{Let me think} + C -->|One| D[Laptop] + C -->|Two| E[iPhone] + C -->|Three| F[fa:fa-car Car] +``` + +In Mermaid there are different styles for boxes with either square or round edges and the option to give a description of each item in its pipe. + +So the code above actually looks like this in it's code block: + +```` +```mermaid +flowchart TD + A[Christmas] -->|Get money| B(Go shopping) + B --> C{Let me think} + C -->|One| D[Laptop] + C -->|Two| E[iPhone] + C -->|Three| F[fa:fa-car Car] +``` +```` + +There's lots of cool and unique things that can be created using Mermaid and the best way to understand it better is to continue to practice. From 6b1e21ac261cc5dfc4b675d9e94e565f43e9e602 Mon Sep 17 00:00:00 2001 From: Trevor Moy <51927676+trevmoy@users.noreply.github.com> Date: Thu, 26 Oct 2023 00:27:56 -0400 Subject: [PATCH 04/10] Updated faq/mermaid_tutorial.md, deleted syllabus/mermaid.md --- faq/mermaid_tutorial.md | 4 ++-- syllabus/mermaid.md | 46 ----------------------------------------- 2 files changed, 2 insertions(+), 48 deletions(-) delete mode 100644 syllabus/mermaid.md diff --git a/faq/mermaid_tutorial.md b/faq/mermaid_tutorial.md index 2ade02e..70501a6 100644 --- a/faq/mermaid_tutorial.md +++ b/faq/mermaid_tutorial.md @@ -2,11 +2,11 @@ ## What is Mermaid? -[Mermaid](https://github.com/mermaid-js/mermaid) is a flowchart and diagram visualization tool based on JavaScript and uses Markdown syntax to create flowcharts that are extremely dynamic and high quality. [Mermaid](https://github.com/mermaid-js/mermaid) is especially useful because you are able to display your beautiful flowcharts using backticks to create a code block. +[Mermaid](https://mermaid.js.org/intro/getting-started.html) is a flowchart and diagram visualization tool based on JavaScript and uses Markdown syntax to create flowcharts that are extremely dynamic and high quality. [Mermaid](https://mermaid.js.org/intro/getting-started.html) is especially useful because you are able to display your beautiful flowcharts using backticks to create a code block. ## Tutorial for Using Mermaid -Either on the [Mermaid](https://www.mermaidchart.com/) website or within the **GitHub** markdown file that you're making edits to you can make complex flowcharts seamlessly. +Either on the [Mermaid](https://mermaid.js.org/intro/getting-started.html) website or within the **GitHub** markdown file that you're making edits to you can make complex flowcharts seamlessly. ### Using Code Blocks diff --git a/syllabus/mermaid.md b/syllabus/mermaid.md deleted file mode 100644 index 4c7be65..0000000 --- a/syllabus/mermaid.md +++ /dev/null @@ -1,46 +0,0 @@ -# Mermaid Overview - -## What is Mermaid? - -Mermaid is a flowchart and diagram visualization tool based on JavaScript and uses Markdown syntax to create flowcharts that are extremely dynamic and high quality. Mermaid is especially useful because you are able to display your beautiful flowcharts using backticks to create a code block. - -## Tutorial for Using Mermaid - -Either on the [Mermaid](https://mermaid.live/edit#pako:eNpVjstqw0AMRX9FaNVC_ANeFBq7zSbQQrPzZCFsOTMk80CWCcH2v3ccb1qtxD3nCk3Yxo6xxP4W760lUTjVJkCe96ay4gb1NJyhKN7mAyv4GPgxw_7lEGGwMSUXLq-bv18lqKbjqjGodeG6bKh69r8Cz1A3R0oa0_kvOd3jDB-N-7b5_H9ihXPrs-mp7KloSaAieSq4Q8_iyXX5_WlNDKplzwbLvHYkV4MmLNmjUePPI7RYqoy8wzF1pFw7ugj5LVx-AfLqVWg) website or in the file you're making edits to you can make complex flowcharts seamlessly. - -### Using Code Blocks - -A code block should look like the following: -```` -```mermaid -blah blah blah -``` -```` - -####Example Mermaid Code Block - -```mermaid -flowchart TD - A[Christmas] -->|Get money| B(Go shopping) - B --> C{Let me think} - C -->|One| D[Laptop] - C -->|Two| E[iPhone] - C -->|Three| F[fa:fa-car Car] -``` - -In Mermaid there are different styles for boxes with either square or round edges and the option to give a description of each item in its pipe. - -So the code above actually looks like this in it's code block: - -```` -```mermaid -flowchart TD - A[Christmas] -->|Get money| B(Go shopping) - B --> C{Let me think} - C -->|One| D[Laptop] - C -->|Two| E[iPhone] - C -->|Three| F[fa:fa-car Car] -``` -```` - -There's lots of cool and unique things that can be created using Mermaid and the best way to understand it better is to continue to practice. From 1ff9d2ee3a549351cc9cdfcdfc916e6338b64411 Mon Sep 17 00:00:00 2001 From: Trevor Moy <51927676+trevmoy@users.noreply.github.com> Date: Thu, 26 Oct 2023 12:34:15 -0400 Subject: [PATCH 05/10] Update faq/mermaid_tutorial.md --- faq/mermaid_tutorial.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/faq/mermaid_tutorial.md b/faq/mermaid_tutorial.md index 70501a6..71e7491 100644 --- a/faq/mermaid_tutorial.md +++ b/faq/mermaid_tutorial.md @@ -2,11 +2,11 @@ ## What is Mermaid? -[Mermaid](https://mermaid.js.org/intro/getting-started.html) is a flowchart and diagram visualization tool based on JavaScript and uses Markdown syntax to create flowcharts that are extremely dynamic and high quality. [Mermaid](https://mermaid.js.org/intro/getting-started.html) is especially useful because you are able to display your beautiful flowcharts using backticks to create a code block. +[Mermaid](https://mermaid.js.org/intro/) is a flowchart and diagram visualization tool based on JavaScript and uses Markdown syntax to create flowcharts that are extremely dynamic and high quality. [Mermaid](https://mermaid.js.org/intro/) is especially useful because you are able to display your beautiful flowcharts using backticks to create a code block. ## Tutorial for Using Mermaid -Either on the [Mermaid](https://mermaid.js.org/intro/getting-started.html) website or within the **GitHub** markdown file that you're making edits to you can make complex flowcharts seamlessly. +Either on the [Mermaid](https://mermaid.live/) website or within the **GitHub** markdown file that you're making edits to you can make complex flowcharts seamlessly. ### Using Code Blocks From 0c43150ca8922b24337a7593e3892b21676c162d Mon Sep 17 00:00:00 2001 From: Trevor Moy <51927676+trevmoy@users.noreply.github.com> Date: Fri, 3 Nov 2023 23:01:58 -0400 Subject: [PATCH 06/10] Update faq/mermaid_tutorial.md --- faq/mermaid_tutorial.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/faq/mermaid_tutorial.md b/faq/mermaid_tutorial.md index 71e7491..2bb47cb 100644 --- a/faq/mermaid_tutorial.md +++ b/faq/mermaid_tutorial.md @@ -12,14 +12,14 @@ Either on the [Mermaid](https://mermaid.live/) website or within the **GitHub** A code block should look like the following: ```` -```mermaid +```{mermaid} blah blah blah ``` ```` -####Example Mermaid Code Block +#### Example Mermaid Code Block -```mermaid +```{mermaid} flowchart TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} @@ -33,7 +33,7 @@ In Mermaid there are different styles for boxes with either square or round edge So the code above actually looks like this in it's code block: ```` -```mermaid +```{mermaid} flowchart TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} From 8bac23886ba08ef5d0d56a4c111fc0b32fbe5966 Mon Sep 17 00:00:00 2001 From: Trevor Moy <51927676+trevmoy@users.noreply.github.com> Date: Sat, 25 Nov 2023 21:59:56 -0500 Subject: [PATCH 07/10] Updated faq/mermaid_tutorial.md --- {faq => resources}/mermaid_tutorial.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename {faq => resources}/mermaid_tutorial.md (100%) diff --git a/faq/mermaid_tutorial.md b/resources/mermaid_tutorial.md similarity index 100% rename from faq/mermaid_tutorial.md rename to resources/mermaid_tutorial.md From fd02ff852925ad12dbaca7a828b735d20b25e227 Mon Sep 17 00:00:00 2001 From: Trevor Moy <51927676+trevmoy@users.noreply.github.com> Date: Sun, 26 Nov 2023 17:25:17 -0500 Subject: [PATCH 08/10] Updated resources/mermaid_tutorial.md --- resources/mermaid_tutorial.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/resources/mermaid_tutorial.md b/resources/mermaid_tutorial.md index 2bb47cb..598eee3 100644 --- a/resources/mermaid_tutorial.md +++ b/resources/mermaid_tutorial.md @@ -4,9 +4,11 @@ [Mermaid](https://mermaid.js.org/intro/) is a flowchart and diagram visualization tool based on JavaScript and uses Markdown syntax to create flowcharts that are extremely dynamic and high quality. [Mermaid](https://mermaid.js.org/intro/) is especially useful because you are able to display your beautiful flowcharts using backticks to create a code block. +There are plenty of types of + ## Tutorial for Using Mermaid -Either on the [Mermaid](https://mermaid.live/) website or within the **GitHub** markdown file that you're making edits to you can make complex flowcharts seamlessly. +Either on [Mermaid](https://mermaid.live/edit#pako:eNp1j00OgjAQha8ymZUmcAEWJgp6Ad1RFyMdlEBbrK0_Ae5ugQ0LndXL-768ZDosjGRMsGzMq7iRdXDKhIZw2_xx92QZLuZ9hjje9JeGdN3DblV4-2Q5gvXs7kYOacdvUm3DYEogkBUpoydtmLV0OZPlUzj_QPv_6LBAGKFiq6iS4YFubAS6GysWmIQoydYChR6CR96Z40cXmDjrOULfSnKcVXS1pOZy-AJAwFci) or within the **GitHub** markdown file that you're making edits to you can make complex flowcharts seamlessly. ### Using Code Blocks From 8ba0c7642395d7f0efea7c421d59bc57a82f35e1 Mon Sep 17 00:00:00 2001 From: Trevor Moy <51927676+trevmoy@users.noreply.github.com> Date: Sun, 26 Nov 2023 17:41:16 -0500 Subject: [PATCH 09/10] Updated resources/mermaid_tutorial.md --- resources/mermaid_tutorial.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/resources/mermaid_tutorial.md b/resources/mermaid_tutorial.md index 598eee3..541217e 100644 --- a/resources/mermaid_tutorial.md +++ b/resources/mermaid_tutorial.md @@ -23,11 +23,11 @@ blah blah blah ```{mermaid} flowchart TD - A[Christmas] -->|Get money| B(Go shopping) - B --> C{Let me think} - C -->|One| D[Laptop] - C -->|Two| E[iPhone] - C -->|Three| F[fa:fa-car Car] + A[blank] -->|blank| B(blank) + B --> C{blank} + C -->|blank| D[blank] + C -->|blank| E[blank] + C -->|blank| F[blank] ``` In Mermaid there are different styles for boxes with either square or round edges and the option to give a description of each item in its pipe. @@ -37,11 +37,11 @@ So the code above actually looks like this in it's code block: ```` ```{mermaid} flowchart TD - A[Christmas] -->|Get money| B(Go shopping) - B --> C{Let me think} - C -->|One| D[Laptop] - C -->|Two| E[iPhone] - C -->|Three| F[fa:fa-car Car] + A[blank] -->|blank| B(blank) + B --> C{blank} + C -->|blank| D[blank] + C -->|blank| E[blank] + C -->|blank| F[blank] ``` ```` From 03fd1d4fb2e61d5ff655a978b5deb8c5b9acbf3d Mon Sep 17 00:00:00 2001 From: Trevor Moy <51927676+trevmoy@users.noreply.github.com> Date: Sun, 26 Nov 2023 18:11:41 -0500 Subject: [PATCH 10/10] Updated resources/mermaid_tutorial.md --- resources/mermaid_tutorial.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/resources/mermaid_tutorial.md b/resources/mermaid_tutorial.md index 541217e..8fe7240 100644 --- a/resources/mermaid_tutorial.md +++ b/resources/mermaid_tutorial.md @@ -4,7 +4,7 @@ [Mermaid](https://mermaid.js.org/intro/) is a flowchart and diagram visualization tool based on JavaScript and uses Markdown syntax to create flowcharts that are extremely dynamic and high quality. [Mermaid](https://mermaid.js.org/intro/) is especially useful because you are able to display your beautiful flowcharts using backticks to create a code block. -There are plenty of types of +There are plenty of types of diagrams with mermaid and you can explore the other types [here](https://mermaid.js.org/config/Tutorials.html). ## Tutorial for Using Mermaid @@ -13,9 +13,9 @@ Either on [Mermaid](https://mermaid.live/edit#pako:eNp1j00OgjAQha8ymZUmcAEWJgp6A ### Using Code Blocks A code block should look like the following: -```` -```{mermaid} -blah blah blah +````{toggle} +```{toggle} +This is a code block ``` ```` @@ -34,7 +34,7 @@ In Mermaid there are different styles for boxes with either square or round edge So the code above actually looks like this in it's code block: -```` +````{toggle} ```{mermaid} flowchart TD A[blank] -->|blank| B(blank)