2023-04-10 15:38:20 +02:00
<!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 >
2022-11-10 09:00:54 +01:00
< 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
2022-11-09 11:04:02 +01:00
A[Hard] --> |Text| B(Round)
B --> C{Decision}
C --> |One| D[Result 1]
C --> |Two| E[Result 2]
2022-11-10 09:00:54 +01:00
< / code > < / pre > < p > will be rendered as:< / p > < pre > < code class = language-mermaid data-lang = mermaid > flowchart LR
2022-11-09 11:04:02 +01:00
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!
2022-11-10 09:00:54 +01:00
< / code > < / pre > < p > will be rendered as:< / p > < pre > < code class = language-mermaid data-lang = mermaid > sequenceDiagram
2022-11-09 11:04:02 +01:00
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
2022-11-10 09:00:54 +01:00
< / code > < / pre > < p > will be rendered as:< / p > < pre > < code class = language-mermaid data-lang = mermaid > gantt
2022-11-09 11:04:02 +01:00
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()
}
2022-11-10 09:00:54 +01:00
< / code > < / pre > < p > will be rendered as:< / p > < pre > < code class = language-mermaid data-lang = mermaid > classDiagram
2022-11-09 11:04:02 +01:00
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 --> [*]
2022-11-10 09:00:54 +01:00
< / code > < / pre > < p > will be rendered as:< / p > < pre > < code class = language-mermaid data-lang = mermaid > stateDiagram-v2
2022-11-09 11:04:02 +01:00
[*] --> 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
2022-11-10 09:00:54 +01:00
< / code > < / pre > < p > will be rendered as:< / p > < pre > < code class = language-mermaid data-lang = mermaid > pie
2022-11-09 11:04:02 +01:00
" 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
2022-11-10 09:00:54 +01:00
< / code > < / pre > < p > will be rendered as:< / p > < pre > < code class = language-mermaid data-lang = mermaid > journey
2022-11-09 11:04:02 +01:00
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" )
2022-11-10 09:00:54 +01:00
< / code > < / pre > < p > will be rendered as:< / p > < pre > < code class = language-mermaid data-lang = mermaid > C4Context
2022-11-09 11:04:02 +01:00
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" )
2023-04-10 15:38:20 +02:00
< / 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" > © 2023 X |
2022-11-09 11:04:02 +01:00
< 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 >
