hugo-theme-minima/mermaid-diagrams/index.html

187 lines
14 KiB
HTML
Raw Normal View History

<!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.1678890347.css><script defer type=text/javascript src=/hugo-theme-minima/minima.1678890347.js></script></head><script>let default_theme=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';try{const a=localStorage.getItem('theme');a&&(default_theme=a),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 font-medium
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/>ZH</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 &mdash; 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] --&gt;|Text| B(Round)
B --&gt; C{Decision}
C --&gt;|One| D[Result 1]
C --&gt;|Two| E[Result 2]
</code></pre><p>will be rendered as:</p><pre><code class=language-mermaid data-lang=mermaid>flowchart LR
A[Hard] --&gt;|Text| B(Round)
B --&gt; C{Decision}
C --&gt;|One| D[Result 1]
C --&gt;|Two| E[Result 2]
</code></pre><h3 id=sequence-diagram>Sequence diagram</h3><pre><code>sequenceDiagram
Alice-&gt;&gt;John: Hello John, how are you?
loop Healthcheck
John-&gt;&gt;John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John--&gt;&gt;Alice: Great!
John-&gt;&gt;Bob: How about you?
Bob--&gt;&gt;John: Jolly good!
</code></pre><p>will be rendered as:</p><pre><code class=language-mermaid data-lang=mermaid>sequenceDiagram
Alice-&gt;&gt;John: Hello John, how are you?
loop Healthcheck
John-&gt;&gt;John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John--&gt;&gt;Alice: Great!
John-&gt;&gt;Bob: How about you?
Bob--&gt;&gt;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 &lt;|-- AveryLongClass : Cool
&lt;&lt;Interface&gt;&gt; Class01
Class09 --&gt; C2 : Where am I?
Class09 --* C3
Class09 --|&gt; Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
&lt;&lt;service&gt;&gt;
int id
size()
}
</code></pre><p>will be rendered as:</p><pre><code class=language-mermaid data-lang=mermaid>classDiagram
Class01 &lt;|-- AveryLongClass : Cool
&lt;&lt;Interface&gt;&gt; Class01
Class09 --&gt; C2 : Where am I?
Class09 --* C3
Class09 --|&gt; Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
&lt;&lt;service&gt;&gt;
int id
size()
}
</code></pre><h3 id=state-diagram>State diagram</h3><pre><code>stateDiagram-v2
[*] --&gt; Still
Still --&gt; [*]
Still --&gt; Moving
Moving --&gt; Still
Moving --&gt; Crash
Crash --&gt; [*]
</code></pre><p>will be rendered as:</p><pre><code class=language-mermaid data-lang=mermaid>stateDiagram-v2
[*] --&gt; Still
Still --&gt; [*]
Still --&gt; Moving
Moving --&gt; Still
Moving --&gt; Crash
Crash --&gt; [*]
</code></pre><h3 id=pie-chart>Pie chart</h3><pre><code>pie
&quot;Dogs&quot; : 386
&quot;Cats&quot; : 85.9
&quot;Rats&quot; : 15
</code></pre><p>will be rendered as:</p><pre><code class=language-mermaid data-lang=mermaid>pie
&quot;Dogs&quot; : 386
&quot;Cats&quot; : 85.9
&quot;Rats&quot; : 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, &quot;Banking Customer A&quot;, &quot;A customer of the bank, with personal bank accounts.&quot;)
Person(customerB, &quot;Banking Customer B&quot;)
Person_Ext(customerC, &quot;Banking Customer C&quot;)
System(SystemAA, &quot;Internet Banking System&quot;, &quot;Allows customers to view information about their bank accounts, and make payments.&quot;)
Person(customerD, &quot;Banking Customer D&quot;, &quot;A customer of the bank, &lt;br/&gt; with personal bank accounts.&quot;)
Enterprise_Boundary(b1, &quot;BankBoundary&quot;) {
SystemDb_Ext(SystemE, &quot;Mainframe Banking System&quot;, &quot;Stores all of the core banking information about customers, accounts, transactions, etc.&quot;)
System_Boundary(b2, &quot;BankBoundary2&quot;) {
System(SystemA, &quot;Banking System A&quot;)
System(SystemB, &quot;Banking System B&quot;, &quot;A system of the bank, with personal bank accounts.&quot;)
}
System_Ext(SystemC, &quot;E-mail system&quot;, &quot;The internal Microsoft Exchange e-mail system.&quot;)
SystemDb(SystemD, &quot;Banking System D Database&quot;, &quot;A system of the bank, with personal bank accounts.&quot;)
Boundary(b3, &quot;BankBoundary3&quot;, &quot;boundary&quot;) {
SystemQueue(SystemF, &quot;Banking System F Queue&quot;, &quot;A system of the bank, with personal bank accounts.&quot;)
SystemQueue_Ext(SystemG, &quot;Banking System G Queue&quot;, &quot;A system of the bank, with personal bank accounts.&quot;)
}
}
BiRel(customerA, SystemAA, &quot;Uses&quot;)
BiRel(SystemAA, SystemE, &quot;Uses&quot;)
Rel(SystemAA, SystemC, &quot;Sends e-mails&quot;, &quot;SMTP&quot;)
Rel(SystemC, customerA, &quot;Sends e-mails to&quot;)
</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, &quot;Banking Customer A&quot;, &quot;A customer of the bank, with personal bank accounts.&quot;)
Person(customerB, &quot;Banking Customer B&quot;)
Person_Ext(customerC, &quot;Banking Customer C&quot;)
System(SystemAA, &quot;Internet Banking System&quot;, &quot;Allows customers to view information about their bank accounts, and make payments.&quot;)
Person(customerD, &quot;Banking Customer D&quot;, &quot;A customer of the bank, &lt;br/&gt; with personal bank accounts.&quot;)
Enterprise_Boundary(b1, &quot;BankBoundary&quot;) {
SystemDb_Ext(SystemE, &quot;Mainframe Banking System&quot;, &quot;Stores all of the core banking information about customers, accounts, transactions, etc.&quot;)
System_Boundary(b2, &quot;BankBoundary2&quot;) {
System(SystemA, &quot;Banking System A&quot;)
System(SystemB, &quot;Banking System B&quot;, &quot;A system of the bank, with personal bank accounts.&quot;)
}
System_Ext(SystemC, &quot;E-mail system&quot;, &quot;The internal Microsoft Exchange e-mail system.&quot;)
SystemDb(SystemD, &quot;Banking System D Database&quot;, &quot;A system of the bank, with personal bank accounts.&quot;)
Boundary(b3, &quot;BankBoundary3&quot;, &quot;boundary&quot;) {
SystemQueue(SystemF, &quot;Banking System F Queue&quot;, &quot;A system of the bank, with personal bank accounts.&quot;)
SystemQueue_Ext(SystemG, &quot;Banking System G Queue&quot;, &quot;A system of the bank, with personal bank accounts.&quot;)
}
}
BiRel(customerA, SystemAA, &quot;Uses&quot;)
BiRel(SystemAA, SystemE, &quot;Uses&quot;)
Rel(SystemAA, SystemC, &quot;Sends e-mails&quot;, &quot;SMTP&quot;)
Rel(SystemC, customerA, &quot;Sends e-mails to&quot;)
</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 justify-between items-center"><p class="mt-0 text-sm">© 2022 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 fill="#1da1f2" width="18" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717.0-4.92 2.203-4.92 4.917.0.39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475.0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314.0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39.0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054.0 13.999-7.496 13.999-13.986.0-.209.0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg></a><a class="icon ml-1 mr-1" href=mailto:mivinci@qq.com title=email><svg fill="#63636f" width="22" height="22" viewBox="0 0 24 24"><path d="M3 3h18a1 1 0 011 1v16a1 1 0 01-1 1H3a1 1 0 01-1-1V4a1 1 0 011-1zm9.06 8.683L5.648 6.238 4.353 7.762l7.72 6.555 7.581-6.56-1.308-1.513-6.285 5.439z"/></svg></a><a class="icon ml-1 mr-1" href=https://github.com/mivinci/hugo-theme-minima title=github><svg fill="#63636f" width="18" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63.0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577.0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93.0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176.0.0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22.0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22.0 1.606-.015 2.896-.015 3.286.0.315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="icon ml-1 mr-1" href=/index.xml title=rss><svg fill="#63636f" t="1626591563876" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="1984" width="18" height="16"><path d="M128 768a128 128 0 100 256 128 128 0 000-256zM0 368v176c265.104.0 480 214.912 480 480h176c0-362.32-293.696-656-656-656zM0 0v176c468.336.0 848 379.664 848 848h176C1024 458.464 565.536.0.0.0z" p-id="1985"/></svg></a></p></div></div></footer></body></html>