mirror of
https://gitea.com/mcereda/oam.git
synced 2026-02-13 15:24:24 +00:00
chore(markdown): expand mermaid graphs a little
This commit is contained in:
Michele Cereda
@@ -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
|
||||
|
||||
@@ -3,27 +3,121 @@
|
||||
JavaScript based diagramming and charting tool.<br/>
|
||||
Renders Markdown-inspired text definitions to create and modify diagrams dynamically.
|
||||
|
||||
## Table of contents <!-- omit in toc -->
|
||||
|
||||
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<br/>edge comment --> ro
|
||||
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>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<br>in an Odd shape]
|
||||
|
||||
%% Comments after double percent signs
|
||||
e((Inner / circle<br>and some odd <br>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<br/>edge comment --> ro
|
||||
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>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<br>in an Odd shape]
|
||||
|
||||
%% Comments after double percent signs
|
||||
e((Inner / circle<br>and some odd <br>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]
|
||||
|
||||
<!--
|
||||
References
|
||||
Reference
|
||||
═╬═Time══
|
||||
-->
|
||||
|
||||
<!-- Upstream -->
|
||||
[documentation]: https://mermaid.js.org/intro/
|
||||
[examples]: https://mermaid.js.org/syntax/examples.html
|
||||
[live editor]: https://mermaid.live
|
||||
|
||||
<!-- Knowledge base -->
|
||||
|
||||
Reference in New Issue
Block a user