cdn0x12/hugo-theme-minima
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

deploy: 04977374f0

Browse source
This commit is contained in:
mivinci 2022-11-10 08:00:54 +00:00
parent 8b8bf07efc
commit f662718b2c
32 changed files with 107 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

20
mermaid-diagrams/index.html
View file

@ -1,12 +1,12 @@
<!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 Mermaid syntax."><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 Mermaid syntax."><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.1667998329.css><script defer type=text/javascript src=/hugo-theme-minima/minima.1667998329.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
<!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.1668067253.css><script defer type=text/javascript src=/hugo-theme-minima/minima.1668067253.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-1 mr-1"><a href=/hugo-theme-minima/tags>Tags</a></li><li class="ml-1 mr-1"><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 Mermaid syntax.</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 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><pre><code class=language-mermaid data-lang=mermaid>flowchart LR
</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}
@ -21,7 +21,7 @@ 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><pre><code class=language-mermaid data-lang=mermaid>sequenceDiagram
</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
@ -38,7 +38,7 @@ Bob--&gt;&gt;John: Jolly good!
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
</code></pre><pre><code class=language-mermaid data-lang=mermaid>gantt
</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
@ -62,7 +62,7 @@ class Class10 {
int id
size()
}
</code></pre><pre><code class=language-mermaid data-lang=mermaid>classDiagram
</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?
@ -85,7 +85,7 @@ Still --&gt; Moving
Moving --&gt; Still
Moving --&gt; Crash
Crash --&gt; [*]
</code></pre><pre><code class=language-mermaid data-lang=mermaid>stateDiagram-v2
</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
@ -96,7 +96,7 @@ Crash --&gt; [*]
&quot;Dogs&quot; : 386
&quot;Cats&quot; : 85.9
&quot;Rats&quot; : 15
</code></pre><pre><code class=language-mermaid data-lang=mermaid>pie
</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
@ -109,7 +109,7 @@ Crash --&gt; [*]
section Go home
Go downstairs: 5: Me
Sit down: 3: Me
</code></pre><pre><code class=language-mermaid data-lang=mermaid> journey
</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
@ -150,7 +150,7 @@ 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><pre><code class=language-mermaid data-lang=mermaid>C4Context
</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;)