From 158382e5d62f4eb4b1e27009988fd132cec2fbd4 Mon Sep 17 00:00:00 2001 From: Michele Cereda Date: Thu, 11 Jul 2024 03:00:21 +0200 Subject: [PATCH] chore(markdown): expand mermaid graphs a little --- knowledge base/markdown.md | 22 ++++---- knowledge base/mermaid.js.md | 100 +++++++++++++++++++++++++++++++++-- 2 files changed, 109 insertions(+), 13 deletions(-) diff --git a/knowledge base/markdown.md b/knowledge base/markdown.md index 8f669ba..4ac13d7 100644 --- a/knowledge base/markdown.md +++ b/knowledge base/markdown.md @@ -9,7 +9,7 @@ Compare Markdown implementations at [babelmark]. 1. [Folded content](#folded-content) 1. [Images](#images) 1. [Diagrams](#diagrams) - 1. [Flow chart A.K.A. graph](#flow-chart-aka-graph) + 1. [Flowchart A.K.A. graph](#flowchart-aka-graph) 1. [Sequence diagram](#sequence-diagram) 1. [Class diagram](#class-diagram) 1. [State diagram](#state-diagram) @@ -90,34 +90,34 @@ Code blocks for diagrams can either: - start with ` ```mermaid ` and finish with ` ``` `, or - start with `:::mermaid` and finish with `:::`. -### Flow chart A.K.A. graph +### Flowchart A.K.A. graph ```md :::mermaid graph LR - A[Christmas] -->|Get money| B(Go shopping) - B --> C{Let me think} - subgraph work + A[Christmas] -->|Get money| B(Go shopping) + B --> C{Let me think} + subgraph work C -->|One| D[Laptop] C --x|Two| E[iPhone] C -.->|Three| F[fa:fa-car Car] C ==> G((Bike)) C --> J>TV] - end + end ::: ``` ```mermaid graph LR - A[Christmas] -->|Get money| B(Go shopping) - B --> C{Let me think} - subgraph work + A[Christmas] -->|Get money| B(Go shopping) + B --> C{Let me think} + subgraph work C -->|One| D[Laptop] C --x|Two| E[iPhone] C -.->|Three| F[fa:fa-car Car] C ==> G((Bike)) C --> J>TV] - end + end ``` ### Sequence diagram @@ -341,6 +341,7 @@ Install and enable [`bierner.markdown-mermaid`][bierner.markdown-mermaid]'s exte - [Extended syntax] - [Linguist supported language syntax list] - [Github's alert formatting][github formatting alerts] +- [Live editor] ### Sources @@ -373,6 +374,7 @@ Install and enable [`bierner.markdown-mermaid`][bierner.markdown-mermaid]'s exte [escaping backticks]: https://www.markdownguide.org/basic-syntax/#escaping-backticks [github formatting alerts]: https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts [linguist supported language syntax list]: https://github.com/github/linguist/blob/master/lib/linguist/languages.yml +[live editor]: https://mermaid.live/edit [slaise/high-level-markdown]: https://github.com/slaise/High-level-Markdown [syntax highlighting in markdown]: https://support.codebasehq.com/articles/tips-tricks/syntax-highlighting-in-markdown [the magical markdown i bet you don't know]: https://medium.com/codex/the-magical-markdown-i-bet-you-dont-know-b51f8c049773 diff --git a/knowledge base/mermaid.js.md b/knowledge base/mermaid.js.md index 5555bbd..334c555 100644 --- a/knowledge base/mermaid.js.md +++ b/knowledge base/mermaid.js.md @@ -3,27 +3,121 @@ JavaScript based diagramming and charting tool.
Renders Markdown-inspired text definitions to create and modify diagrams dynamically. -## Table of contents - 1. [Live editor](#live-editor) +1. [Diagrams](#diagrams) + 1. [Flowchart (a.k.a. graph)](#flowchart-aka-graph) + 1. [Commit flow](#commit-flow) 1. [Further readings](#further-readings) ## Live editor Mermaid.js offers a [live editor] to check the graph code. +## Diagrams + +### Flowchart (a.k.a. graph) + +```md +:::mermaid +graph TB + sq[Square shape] --> ci((Circle shape)) + + subgraph A + od>Odd shape]-- Two line
edge comment --> ro + di{Diamond with
line break} -.-> ro(Rounded
square
shape) + di==>ro2(Rounded square shape) + end + + %% Notice that no text in shape are added here instead that is appended further down + e --> od3>Really long text with linebreak
in an Odd shape] + + %% Comments after double percent signs + e((Inner / circle
and some odd
special characters)) --> f(,.?!+-*ز) + + cyr[Cyrillic]-->cyr2((Circle shape Начало)); + + classDef green fill:#9f6,stroke:#333,stroke-width:2px; + classDef orange fill:#f96,stroke:#333,stroke-width:4px; + class sq,e green + class di orange +::: +``` + +:::mermaid +graph TB + sq[Square shape] --> ci((Circle shape)) + + subgraph A + od>Odd shape]-- Two line
edge comment --> ro + di{Diamond with
line break} -.-> ro(Rounded
square
shape) + di==>ro2(Rounded square shape) + end + + %% Notice that no text in shape are added here instead that is appended further down + e --> od3>Really long text with linebreak
in an Odd shape] + + %% Comments after double percent signs + e((Inner / circle
and some odd
special characters)) --> f(,.?!+-*ز) + + cyr[Cyrillic]-->cyr2((Circle shape Начало)); + + classDef green fill:#9f6,stroke:#333,stroke-width:2px; + classDef orange fill:#f96,stroke:#333,stroke-width:4px; + class sq,e green + class di orange +::: + +### Commit flow + +```md +:::mermaid +gitGraph: + commit + branch develop + checkout develop + commit id:"customId" + commit tag:"customTag" + checkout main + commit type: HIGHLIGHT + commit + merge develop + commit + branch test + commit +::: +``` + +:::mermaid +gitGraph: + commit + branch develop + checkout develop + commit id:"customId" + commit tag:"customTag" + checkout main + commit type: HIGHLIGHT + commit + merge develop + commit + branch test + commit +::: + ## Further readings - Official [documentation] - [Markdown] - [mermaid-cli] +- [Examples] [documentation]: https://mermaid.js.org/intro/ +[examples]: https://mermaid.js.org/syntax/examples.html [live editor]: https://mermaid.live