187 lines
No EOL
14 KiB
HTML
187 lines
No EOL
14 KiB
HTML
<!doctype html><html lang=en><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta property="og:title" content="Mermaid Diagrams"><meta property="og:description" content="A brief guide to write diagrams."><meta property="og:type" content="article"><meta property="og:url" content="https://mivinci.github.io/hugo-theme-minima/mermaid-diagrams/"><meta property="article:section" content><meta property="article:published_time" content="2021-07-18T10:52:59+08:00"><meta property="article:modified_time" content="2021-07-18T10:52:59+08:00"><meta name=twitter:card content="summary"><meta name=twitter:title content="Mermaid Diagrams"><meta name=twitter:description content="A brief guide to write diagrams."><meta name=theme-color media="(prefers-color-scheme: light)" content="#ffffff"><meta name=theme-color media="(prefers-color-scheme: dark)" content="#262d33"><title>Hugo on Minima - Mermaid Diagrams</title><link rel="shortcut icon" href=/hugo-theme-minima/favicon.ico type=image/x-icon><link rel=stylesheet href=/hugo-theme-minima/minima.css><script defer type=text/javascript src=/hugo-theme-minima/minima.js></script></head><script>const default_theme_config='sand',default_light_theme=default_theme_config==='system'?'light':default_theme_config;let default_theme=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':default_light_theme;try{const a=localStorage.getItem('theme');a&&(default_theme=a===default_light_theme?a:default_light_theme),localStorage.setItem('theme',default_theme),window.minima_theme=default_theme,document.querySelector('html').classList.add(default_theme)}catch(a){console.error(a)}</script><body><header class="mt-3 mb-6"><div class="container mx-auto"><nav class="flex justify-between items-center"><div class="flex items-center"><div id=theme-switch class="text-3xl cursor-pointer">🌝</div></div><ul class="flex items-center text-base font-bold
|
|
whitespace-nowrap overflow-x-auto overflow-y-hidden"><li class="ml-2 mr-2"><a href=/hugo-theme-minima/tags>Tags</a></li><li class="ml-2 mr-2"><a href=/hugo-theme-minima/series>Series</a></li></ul><ul class="flex item-center text-sm font-bold"><li class=ml-2><a href=https://mivinci.github.io/hugo-theme-minima/>EN</a></li><li class=ml-2><a href=https://mivinci.github.io/hugo-theme-minima/zh-cn/>简中</a></li></ul></nav></div></header><div class="container mx-auto"><h1 class="text-4xl font-extrabold mt-6 mb-6">Mermaid Diagrams</h1><div class="mb-3 text-sm flex justify-between"><div>Post at — Jul 18, 2021</div><div><a class=ml-1 href=/hugo-theme-minima/tags/markdown>#markdown</a>
|
|
<a class=ml-1 href=/hugo-theme-minima/tags/mermaid>#mermaid</a></div></div><main class=mb-8><p>A brief guide to write diagrams.</p><article class=md><h2 id=examples>Examples</h2><p>The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here to jump into the <a href=http://mermaid-js.github.io/mermaid/>full syntax</a>.</p><h3 id=flowchart>Flowchart</h3><pre><code>flowchart LR
|
|
|
|
A[Hard] -->|Text| B(Round)
|
|
B --> C{Decision}
|
|
C -->|One| D[Result 1]
|
|
C -->|Two| E[Result 2]
|
|
</code></pre><p>will be rendered as:</p><pre><code class=language-mermaid data-lang=mermaid>flowchart LR
|
|
|
|
A[Hard] -->|Text| B(Round)
|
|
B --> C{Decision}
|
|
C -->|One| D[Result 1]
|
|
C -->|Two| E[Result 2]
|
|
</code></pre><h3 id=sequence-diagram>Sequence diagram</h3><pre><code>sequenceDiagram
|
|
Alice->>John: Hello John, how are you?
|
|
loop Healthcheck
|
|
John->>John: Fight against hypochondria
|
|
end
|
|
Note right of John: Rational thoughts!
|
|
John-->>Alice: Great!
|
|
John->>Bob: How about you?
|
|
Bob-->>John: Jolly good!
|
|
</code></pre><p>will be rendered as:</p><pre><code class=language-mermaid data-lang=mermaid>sequenceDiagram
|
|
Alice->>John: Hello John, how are you?
|
|
loop Healthcheck
|
|
John->>John: Fight against hypochondria
|
|
end
|
|
Note right of John: Rational thoughts!
|
|
John-->>Alice: Great!
|
|
John->>Bob: How about you?
|
|
Bob-->>John: Jolly good!
|
|
</code></pre><h3 id=gantt-chart>Gantt chart</h3><pre><code>gantt
|
|
section Section
|
|
Completed :done, des1, 2014-01-06,2014-01-08
|
|
Active :active, des2, 2014-01-07, 3d
|
|
Parallel 1 : des3, after des1, 1d
|
|
Parallel 2 : des4, after des1, 1d
|
|
Parallel 3 : des5, after des3, 1d
|
|
Parallel 4 : des6, after des4, 1d
|
|
</code></pre><p>will be rendered as:</p><pre><code class=language-mermaid data-lang=mermaid>gantt
|
|
section Section
|
|
Completed :done, des1, 2014-01-06,2014-01-08
|
|
Active :active, des2, 2014-01-07, 3d
|
|
Parallel 1 : des3, after des1, 1d
|
|
Parallel 2 : des4, after des1, 1d
|
|
Parallel 3 : des5, after des3, 1d
|
|
Parallel 4 : des6, after des4, 1d
|
|
</code></pre><h3 id=class-diagram>Class diagram</h3><pre><code>classDiagram
|
|
Class01 <|-- AveryLongClass : Cool
|
|
<<Interface>> Class01
|
|
Class09 --> C2 : Where am I?
|
|
Class09 --* C3
|
|
Class09 --|> Class07
|
|
Class07 : equals()
|
|
Class07 : Object[] elementData
|
|
Class01 : size()
|
|
Class01 : int chimp
|
|
Class01 : int gorilla
|
|
class Class10 {
|
|
<<service>>
|
|
int id
|
|
size()
|
|
}
|
|
</code></pre><p>will be rendered as:</p><pre><code class=language-mermaid data-lang=mermaid>classDiagram
|
|
Class01 <|-- AveryLongClass : Cool
|
|
<<Interface>> Class01
|
|
Class09 --> C2 : Where am I?
|
|
Class09 --* C3
|
|
Class09 --|> Class07
|
|
Class07 : equals()
|
|
Class07 : Object[] elementData
|
|
Class01 : size()
|
|
Class01 : int chimp
|
|
Class01 : int gorilla
|
|
class Class10 {
|
|
<<service>>
|
|
int id
|
|
size()
|
|
}
|
|
</code></pre><h3 id=state-diagram>State diagram</h3><pre><code>stateDiagram-v2
|
|
[*] --> Still
|
|
Still --> [*]
|
|
Still --> Moving
|
|
Moving --> Still
|
|
Moving --> Crash
|
|
Crash --> [*]
|
|
</code></pre><p>will be rendered as:</p><pre><code class=language-mermaid data-lang=mermaid>stateDiagram-v2
|
|
[*] --> Still
|
|
Still --> [*]
|
|
Still --> Moving
|
|
Moving --> Still
|
|
Moving --> Crash
|
|
Crash --> [*]
|
|
</code></pre><h3 id=pie-chart>Pie chart</h3><pre><code>pie
|
|
"Dogs" : 386
|
|
"Cats" : 85.9
|
|
"Rats" : 15
|
|
</code></pre><p>will be rendered as:</p><pre><code class=language-mermaid data-lang=mermaid>pie
|
|
"Dogs" : 386
|
|
"Cats" : 85.9
|
|
"Rats" : 15
|
|
</code></pre><h3 id=user-journey-diagram>User Journey diagram</h3><pre><code> journey
|
|
title My working day
|
|
section Go to work
|
|
Make tea: 5: Me
|
|
Go upstairs: 3: Me
|
|
Do work: 1: Me, Cat
|
|
section Go home
|
|
Go downstairs: 5: Me
|
|
Sit down: 3: Me
|
|
</code></pre><p>will be rendered as:</p><pre><code class=language-mermaid data-lang=mermaid> journey
|
|
title My working day
|
|
section Go to work
|
|
Make tea: 5: Me
|
|
Go upstairs: 3: Me
|
|
Do work: 1: Me, Cat
|
|
section Go home
|
|
Go downstairs: 5: Me
|
|
Sit down: 3: Me
|
|
</code></pre><h3 id=c4-diagram>C4 diagram</h3><pre><code>C4Context
|
|
title System Context diagram for Internet Banking System
|
|
|
|
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
|
|
Person(customerB, "Banking Customer B")
|
|
Person_Ext(customerC, "Banking Customer C")
|
|
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
|
|
|
|
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
|
|
|
|
Enterprise_Boundary(b1, "BankBoundary") {
|
|
|
|
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
|
|
|
System_Boundary(b2, "BankBoundary2") {
|
|
System(SystemA, "Banking System A")
|
|
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
|
|
}
|
|
|
|
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
|
|
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
|
|
|
|
Boundary(b3, "BankBoundary3", "boundary") {
|
|
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
|
|
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
|
|
}
|
|
}
|
|
|
|
BiRel(customerA, SystemAA, "Uses")
|
|
BiRel(SystemAA, SystemE, "Uses")
|
|
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
|
|
Rel(SystemC, customerA, "Sends e-mails to")
|
|
</code></pre><p>will be rendered as:</p><pre><code class=language-mermaid data-lang=mermaid>C4Context
|
|
title System Context diagram for Internet Banking System
|
|
|
|
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
|
|
Person(customerB, "Banking Customer B")
|
|
Person_Ext(customerC, "Banking Customer C")
|
|
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
|
|
|
|
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
|
|
|
|
Enterprise_Boundary(b1, "BankBoundary") {
|
|
|
|
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
|
|
|
System_Boundary(b2, "BankBoundary2") {
|
|
System(SystemA, "Banking System A")
|
|
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
|
|
}
|
|
|
|
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
|
|
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
|
|
|
|
Boundary(b3, "BankBoundary3", "boundary") {
|
|
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
|
|
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
|
|
}
|
|
}
|
|
|
|
BiRel(customerA, SystemAA, "Uses")
|
|
BiRel(SystemAA, SystemE, "Uses")
|
|
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
|
|
Rel(SystemC, customerA, "Sends e-mails to")
|
|
</code></pre></article></main><script src=https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js crossorigin=anonymous></script><script>mermaid.init(void 0,'code.language-mermaid')</script><div id=comment></div><script>const s=document.createElement("script");s.src="https://giscus.app/client.js",s.crossOrigin="anonymous",s.async=!0,s.setAttribute("data-repo","mivinci/hugo-theme-minima"),s.setAttribute("data-repo-id","MDEwOlJlcG9zaXRvcnkzODcxMjM2NDU="),s.setAttribute("data-category","Comments"),s.setAttribute("data-category-id","DIC_kwDOFxMJvc4CScQm"),s.setAttribute("data-mapping","pathname"),s.setAttribute("data-strict","0"),s.setAttribute("data-reactions-enabled","1"),s.setAttribute("data-emit-metadata","0"),s.setAttribute("data-input-position","buttom"),s.setAttribute("data-theme",window.minima_theme+"_protanopia"),s.setAttribute("data-lang","en"),s.setAttribute("data-loading","lazy"),document.getElementById("comment").appendChild(s)</script></div><footer class="mt-8 mb-8"><div class="container mx-auto"><div class="mt-8 flex flex-col-reverse sm:flex-row sm:justify-between items-center"><p class="mt-0 text-sm">© 2023 X |
|
|
<a href=https://gohugo.io target=_blank rel="noopener noreferrer">Hugo</a> on
|
|
<a href=https://github.com/mivinci/hugo-theme-minima target=_blank rel="noopener noreferrer">Minima</a></p><p class="flex items-center mt-0"><a class="icon ml-1 mr-1" href=https://twitter.com/realmivinci title=twitter><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9.0 01-3.14 1.53 4.48 4.48.0 00-7.86 3v1A10.66 10.66.0 013 4s-4 9 5 13a11.64 11.64.0 01-7 2c9 5 20 0 20-11.5a4.5 4.5.0 00-.08-.83A7.72 7.72.0 0023 3z"/></svg></a><a class="icon ml-1 mr-1" href=mailto:mivinci@qq.com title=email><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><path d="M22 6l-10 7L2 6"/></svg></a><a class="icon ml-1 mr-1" href=https://github.com/mivinci/hugo-theme-minima title=github><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg></a><a class="icon ml-1 mr-1" href=/index.xml title=rss><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></p></div></div></footer></body></html> |