<!DOCTYPE html> <html lang="art-pir" dir="rtl"> <head> <meta charset="utf-8"> <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0"> <meta name="generator" content="Hugo 0.123.8"> <meta name="generator" content="Relearn 5.25.0+tip"> <meta name="description" content="Documentation for Hugo Relearn Theme"> <meta name="author" content="Sören Weber"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png"> <meta name="twitter:title" content="Merrrmaid :: Cap'n Hugo Relearrrn Theme"> <meta name="twitter:description" content="Arrr! Pirrrates Fello' pirrrates, grog made us dizzy! Be awarrre some stuff may look weird in this trrranslat'n. Like Merrrmaids, do'n math or chemistrrry and stuff. Th' mermaid shortcode generates diagrams an' flowcharts from text, 'n a similar manner as Marrrkdown us'n th' Merrrmaid library. graph LR; If --> Then Then --> Else Avast This only works 'n modern browsers. Usage While th' examples be us'n shorrrtcodes wit' named parameter it be recommended t' use codefences instead."> <meta property="og:title" content="Merrrmaid :: Cap'n Hugo Relearrrn Theme"> <meta property="og:description" content="Arrr! Pirrrates Fello' pirrrates, grog made us dizzy! Be awarrre some stuff may look weird in this trrranslat'n. Like Merrrmaids, do'n math or chemistrrry and stuff. Th' mermaid shortcode generates diagrams an' flowcharts from text, 'n a similar manner as Marrrkdown us'n th' Merrrmaid library. graph LR; If --> Then Then --> Else Avast This only works 'n modern browsers. Usage While th' examples be us'n shorrrtcodes wit' named parameter it be recommended t' use codefences instead."> <meta property="og:type" content="article"> <meta property="og:url" content="https://mcshelby.github.io/hugo-theme-relearn/pir/shortcodes/mermaid/index.html"> <meta property="og:image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png"> <meta property="article:section" content="Shorrrtcodes :: Cap'n Hugo Relearrrn Theme"> <meta property="og:site_name" content="Cap'n Hugo Relearrrn Theme"> <title>Merrrmaid :: Cap'n Hugo Relearrrn Theme</title> <link href="https://mcshelby.github.io/hugo-theme-relearn/shortcodes/mermaid/index.html" rel="alternate" hreflang="x-default"> <link href="https://mcshelby.github.io/hugo-theme-relearn/shortcodes/mermaid/index.html" rel="alternate" hreflang="en"> <link href="https://mcshelby.github.io/hugo-theme-relearn/pir/shortcodes/mermaid/index.html" rel="alternate" hreflang="art-pir"> <link href="https://mcshelby.github.io/hugo-theme-relearn/pir/shortcodes/mermaid/index.html" rel="canonical" type="text/html" title="Merrrmaid :: Cap'n Hugo Relearrrn Theme"> <link href="/hugo-theme-relearn/pir/shortcodes/mermaid/index.xml" rel="alternate" type="application/rss+xml" title="Merrrmaid :: Cap'n Hugo Relearrrn Theme"> <link href="/hugo-theme-relearn/images/logo.svg?1710189843" rel="icon" type="image/svg+xml"> <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use --> <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1710189845" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1710189845" rel="stylesheet"></noscript> <link href="/hugo-theme-relearn/css/nucleus.css?1710189845" rel="stylesheet"> <link href="/hugo-theme-relearn/css/auto-complete.css?1710189845" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/auto-complete.css?1710189845" rel="stylesheet"></noscript> <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1710189845" rel="stylesheet"> <link href="/hugo-theme-relearn/css/fonts.css?1710189845" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fonts.css?1710189845" rel="stylesheet"></noscript> <link href="/hugo-theme-relearn/css/theme.css?1710189845" rel="stylesheet"> <link href="/hugo-theme-relearn/css/theme-relearn-auto.css?1710189845" rel="stylesheet" id="R-variant-style"> <link href="/hugo-theme-relearn/css/chroma-relearn-auto.css?1710189845" rel="stylesheet" id="R-variant-chroma-style"> <link href="/hugo-theme-relearn/css/variant.css?1710189845" rel="stylesheet"> <link href="/hugo-theme-relearn/css/print.css?1710189845" rel="stylesheet" media="print"> <link href="/hugo-theme-relearn/css/format-print.css?1710189845" rel="stylesheet"> <link href="/hugo-theme-relearn/css/ie.css?1710189845" rel="stylesheet"> <script src="/hugo-theme-relearn/js/url.js?1710189845"></script> <script src="/hugo-theme-relearn/js/variant.js?1710189845"></script> <script> // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72 window.index_js_url="/hugo-theme-relearn/pir/index.search.js"; var root_url="/"; var baseUri=root_url.replace(/\/$/, ''); window.relearn = window.relearn || {}; window.relearn.baseUriFull='https:\/\/mcshelby.github.io\/hugo-theme-relearn/'; // variant stuff window.relearn.themeVariantModifier=''; window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] ); // translations window.T_Copy_to_clipboard = `Copy t' clipboard`; window.T_Copied_to_clipboard = `Copied t' clipboard!`; window.T_Copy_link_to_clipboard = `Copy link t' clipboard`; window.T_Link_copied_to_clipboard = `Copied link t' clipboard!`; window.T_Reset_view = `Rrreset view`; window.T_View_reset = `View rrreset!`; window.T_No_results_found = `No rrresults found fer "{0}"`; window.T_N_results_found = `{1} rrresults found fer "{0}"`; </script> <style> #R-body img.bg-white { background-color: white; } </style> </head> <body class="mobile-support print disableInlineCopyToClipboard" data-url="/hugo-theme-relearn/pir/shortcodes/mermaid/index.html"> <div id="R-body" class="default-animation"> <div id="R-body-overlay"></div> <nav id="R-topbar"> <div class="topbar-wrapper"> <div class="topbar-sidebar-divider"></div> <div class="topbar-area topbar-area-start" data-area="start"> <div class="topbar-button topbar-button-sidebar" data-content-empty="disable" data-width-s="show" data-width-m="hide" data-width-l="hide"><button class="topbar-control" onclick="toggleNav()" type="button" title="Menu (CTRL+ALT+n)"><i class="fa-fw fas fa-bars"></i></button> </div> </div> <ol class="topbar-breadcrumbs breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList"><li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="/hugo-theme-relearn/pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="1"> > </li><li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Merrrmaid</span><meta itemprop="position" content="2"></li> </ol> <div class="topbar-area topbar-area-end" data-area="end"> </div> </div> </nav> <div id="R-main-overlay"></div> <main id="R-body-inner" class="highlightable default" tabindex="-1"> <div class="flex-block-wrapper"> <article class="default"> <header class="headline"> </header> <h1 id="merrrmaid">Merrrmaid</h1> <div class="box notices cstyle warning"> <div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Arrr! Pirrrates</div> <div class="box-content"> <p>Fello' pirrrates, grog made us dizzy! Be awarrre <b>some stuff may look weird</b> in this trrranslat'n. Like <b>Merrrmaids</b>, do'n <b>math or chemistrrry</b> and stuff.</p> </div> </div> <p>Th' <code>mermaid</code> shortcode generates diagrams an' flowcharts from text, 'n a similar manner as Marrrkdown us'n th' <a href="https://mermaidjs.github.io/" target="_blank">Merrrmaid</a> library.</p> <pre class="mermaid align-center zoomable"> graph LR; If --> Then Then --> Else </pre> <div class="box notices cstyle note"> <div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Avast</div> <div class="box-content"> <p>This only works 'n modern browsers.</p> </div> </div> <h2 id="usage">Usage</h2> <p>While th' examples be us'n shorrrtcodes wit' named parameter it be recommended t' use codefences instead. This be because more an' more other software supports Merrrmaid codefences (eg. GitHub) an' so yer markdown becomes more port'ble.</p> <p>Ye be free t' also call this shortcode from yer own partials.</p> <div class="tab-panel" data-tab-group="shortcode-parameter"> <div class="tab-nav"> <div class="tab-nav-title">​</div> <button data-tab-item="codefence" class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1" onclick="switchTab('shortcode-parameter','codefence')" > <span class="tab-nav-text">codefence</span> </button> <button data-tab-item="shortcode" class="tab-nav-button tab-panel-style cstyle initial" onclick="switchTab('shortcode-parameter','shortcode')" > <span class="tab-nav-text">shortcode</span> </button> <button data-tab-item="partial" class="tab-nav-button tab-panel-style cstyle initial" onclick="switchTab('shortcode-parameter','partial')" > <span class="tab-nav-text">partial</span> </button> </div> <div class="tab-content-container"> <div data-tab-item="codefence" class="tab-content tab-panel-style cstyle initial active"> <div class="tab-content-text"> <div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">```mermaid { align="center" zoom="true" } </span></span><span class="line"><span class="cl">graph LR; </span></span><span class="line"><span class="cl"> If --> Then </span></span><span class="line"><span class="cl"> Then --> Else </span></span><span class="line"><span class="cl">```</span></span></code></pre></div></div> </div> <div data-tab-item="shortcode" class="tab-content tab-panel-style cstyle initial"> <div class="tab-content-text"> <div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">mermaid</span> <span class="nx">align</span><span class="p">=</span><span class="s">"center"</span> <span class="nx">zoom</span><span class="p">=</span><span class="s">"true"</span> <span class="p">>}}</span> </span></span><span class="line"><span class="cl"><span class="nx">graph</span> <span class="nx">LR</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nx">If</span> <span class="o">--</span><span class="p">></span> <span class="nx">Then</span> </span></span><span class="line"><span class="cl"> <span class="nx">Then</span> <span class="o">--</span><span class="p">></span> <span class="nx">Else</span> </span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">mermaid</span> <span class="p">>}}</span></span></span></code></pre></div></div> </div> <div data-tab-item="partial" class="tab-content tab-panel-style cstyle initial"> <div class="tab-content-text"> <div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">"shortcodes/mermaid.html"</span> <span class="p">(</span><span class="nx">dict</span> </span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span> </span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="s">"graph LR;\nIf --> Then\nThen --> Else"</span> </span></span><span class="line"><span class="cl"> <span class="s">"align"</span> <span class="s">"center"</span> </span></span><span class="line"><span class="cl"> <span class="s">"zoom"</span> <span class="s">"true"</span> </span></span><span class="line"><span class="cl"><span class="p">)}}</span></span></span></code></pre></div></div> </div> </div> </div> <p>Th' generated graphs can be be panned by dragg'n them an' zoomed by us'n th' mousewheel. On mobile devices ye can use finger gestures.</p> <h3 id="parameter">Parameter</h3> <table> <thead> <tr> <th>Name</th> <th>Default</th> <th>Notes</th> </tr> </thead> <tbody> <tr> <td><strong>align</strong></td> <td><code>center</code></td> <td>Allowed values be <code>left</code>, <code>center</code> or <code>right</code>.</td> </tr> <tr> <td><strong>zoom</strong></td> <td>see notes</td> <td>Whether th' graph be pan- an' zoom'ble.<br><br>If not set th' value be determined by th' <code>mermaidZoom</code> sett'n o' th' <a href="/hugo-theme-relearn/pir/shortcodes/mermaid/index.html#global-configuration-file">ship</a> or th' <a href="/hugo-theme-relearn/pir/shortcodes/mermaid/index.html#pages-frontmatter">planks frontmatter</a> or <code>false</code> if not set at all.<br><br>- <code>false</code>: no pan or zoom<br>- <code>true</code>: pan an' zoom active</td> </tr> <tr> <td><em><strong><content></strong></em></td> <td><em><empty></em></td> <td>Yer Merrrmaid graph.</td> </tr> </tbody> </table> <h2 id="configuration">Configurat'n</h2> <p>Merrrmaid be configured wit' default sett'ns. Ye can cust'mize Mermaid’s default sett'ns fer all o' yer files thru a JSON object 'n yer <code>hugo.toml</code>, override these sett'ns per plank thru yer planks frontmatter or override these sett'n per diagramm thru <a href="https://mermaid-js.github.io/mermaid/#/directives?id=directives" target="_blank">diagram directives</a>.</p> <p>Th' JSON object o' yer <code>hugo.toml</code> / frontmatter be forwarded into Mermaid’s <code>mermaid.initialize()</code> funct'n.</p> <p>See <a href="https://mermaid-js.github.io/mermaid/#/Setup?id=mermaidapi-configuration-defaults" target="_blank">Merrrmaid documentat'n</a> fer all allowed sett'ns.</p> <p>Th' <code>theme</code> sett'n can also be set by yer used color variant. This will be th' sitewide default an' can - again - be overridden by yer sett'ns 'n <code>hugo.toml</code>, frontmatter or diagram directives.</p> <h3 id="global-configuration-file">Global Configurat'n File</h3> <div class="tab-panel" data-tab-group="config-code"> <div class="tab-nav"> <div class="tab-nav-title">hugo.</div> <button data-tab-item="toml" class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1" onclick="switchTab('config-code','toml')" > <span class="tab-nav-text">toml</span> </button> <button data-tab-item="yaml" class="tab-nav-button tab-panel-style cstyle initial" onclick="switchTab('config-code','yaml')" > <span class="tab-nav-text">yaml</span> </button> <button data-tab-item="json" class="tab-nav-button tab-panel-style cstyle initial" onclick="switchTab('config-code','json')" > <span class="tab-nav-text">json</span> </button> </div> <div class="tab-content-container"> <div data-tab-item="toml" class="tab-content tab-panel-style cstyle initial active"> <div class="tab-content-text"> <div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="nx">mermaidInitialize</span> <span class="p">=</span> <span class="s1">'{ "theme": "dark" }'</span> </span></span><span class="line"><span class="cl"> <span class="nx">mermaidZoom</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div></div> </div> <div data-tab-item="yaml" class="tab-content tab-panel-style cstyle initial"> <div class="tab-content-text"> <div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">mermaidInitialize</span><span class="p">:</span><span class="w"> </span><span class="s1">'{ "theme": "dark" }'</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">mermaidZoom</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span></span></span></code></pre></div></div> </div> <div data-tab-item="json" class="tab-content tab-panel-style cstyle initial"> <div class="tab-content-text"> <div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">"params"</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">"mermaidInitialize"</span><span class="p">:</span> <span class="s2">"{ \"theme\": \"dark\" }"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"mermaidZoom"</span><span class="p">:</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div></div> </div> </div> </div> <h3 id="pages-frontmatter">Page’s Frontmatter</h3> <div class="tab-panel" data-tab-group="config-code"> <div class="tab-nav"> <div class="tab-nav-title">​</div> <button data-tab-item="toml" class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1" onclick="switchTab('config-code','toml')" > <span class="tab-nav-text">toml</span> </button> <button data-tab-item="yaml" class="tab-nav-button tab-panel-style cstyle initial" onclick="switchTab('config-code','yaml')" > <span class="tab-nav-text">yaml</span> </button> <button data-tab-item="json" class="tab-nav-button tab-panel-style cstyle initial" onclick="switchTab('config-code','json')" > <span class="tab-nav-text">json</span> </button> </div> <div class="tab-content-container"> <div data-tab-item="toml" class="tab-content tab-panel-style cstyle initial active"> <div class="tab-content-text"> <div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span> </span></span><span class="line"><span class="cl"><span class="nx">mermaidInitialize</span> <span class="p">=</span> <span class="s1">'{ "theme": "dark" }'</span> </span></span><span class="line"><span class="cl"><span class="nx">mermaidZoom</span> <span class="p">=</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div></div> </div> <div data-tab-item="yaml" class="tab-content tab-panel-style cstyle initial"> <div class="tab-content-text"> <div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">mermaidInitialize</span><span class="p">:</span><span class="w"> </span><span class="s1">'{ "theme": "dark" }'</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">mermaidZoom</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span></span></span></code></pre></div></div> </div> <div data-tab-item="json" class="tab-content tab-panel-style cstyle initial"> <div class="tab-content-text"> <div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">"mermaidInitialize"</span><span class="p">:</span> <span class="s2">"{ \"theme\": \"dark\" }"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"mermaidZoom"</span><span class="p">:</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div></div> </div> </div> </div> <h2 id="examples">Examples</h2> <h3 id="flowchart-with-yaml-title">Flowchart wit' YAML-Title</h3> <div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">mermaid</span> <span class="p">>}}</span> </span></span><span class="line"><span class="cl"><span class="o">---</span> </span></span><span class="line"><span class="cl"><span class="nx">title</span><span class="p">:</span> <span class="nx">Example</span> <span class="nx">Diagram</span> </span></span><span class="line"><span class="cl"><span class="o">---</span> </span></span><span class="line"><span class="cl"><span class="nx">graph</span> <span class="nx">LR</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nx">A</span><span class="p">[</span><span class="nx">Hard</span> <span class="nx">edge</span><span class="p">]</span> <span class="o">--</span><span class="p">>|</span><span class="nx">Link</span> <span class="nx">text</span><span class="p">|</span> <span class="nf">B</span><span class="p">(</span><span class="nx">Round</span> <span class="nx">edge</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">B</span> <span class="o">--</span><span class="p">></span> <span class="nx">C</span><span class="p">{<</span><span class="nx">strong</span><span class="p">></span><span class="nx">Decision</span><span class="p"><</span><span class="o">/</span><span class="nx">strong</span><span class="p">>}</span> </span></span><span class="line"><span class="cl"> <span class="nx">C</span> <span class="o">--</span><span class="p">>|</span><span class="nx">One</span><span class="p">|</span> <span class="nx">D</span><span class="p">[</span><span class="nx">Result</span> <span class="nx">one</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="nx">C</span> <span class="o">--</span><span class="p">>|</span><span class="nx">Two</span><span class="p">|</span> <span class="nx">E</span><span class="p">[</span><span class="nx">Result</span> <span class="nx">two</span><span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">mermaid</span> <span class="p">>}}</span></span></span></code></pre></div> <pre class="mermaid align-center zoomable"> --- title: Example Diagram --- graph LR; A[Hard edge] -->|Link text| B(Round edge) B --> C{<strong>Decision</strong>} C -->|One| D[Result one] C -->|Two| E[Result two] </pre> <h3 id="sequence-diagram-with-configuration-directive">Sequence Diagram wit' Configurat'n Directive</h3> <div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">mermaid</span> <span class="p">>}}</span> </span></span><span class="line"><span class="cl"><span class="o">%%</span><span class="p">{</span><span class="nx">init</span><span class="p">:{</span><span class="s">"fontFamily"</span><span class="p">:</span><span class="s">"monospace"</span><span class="p">,</span> <span class="s">"sequence"</span><span class="p">:{</span><span class="s">"showSequenceNumbers"</span><span class="p">:</span><span class="kc">true</span><span class="p">}}}</span><span class="o">%%</span> </span></span><span class="line"><span class="cl"><span class="nx">sequenceDiagram</span> </span></span><span class="line"><span class="cl"> <span class="nx">Alice</span><span class="o">->></span><span class="nx">John</span><span class="p">:</span> <span class="nx">Hello</span> <span class="nx">John</span><span class="p">,</span> <span class="nx">how</span> <span class="nx">be</span> <span class="nx">ye</span><span class="err">?</span> </span></span><span class="line"><span class="cl"> <span class="nx">loop</span> <span class="nx">Healthcheck</span> </span></span><span class="line"><span class="cl"> <span class="nx">John</span><span class="o">->></span><span class="nx">John</span><span class="p">:</span> <span class="nx">Fight</span> <span class="nx">against</span> <span class="nx">hypochondria</span> </span></span><span class="line"><span class="cl"> <span class="nx">end</span> </span></span><span class="line"><span class="cl"> <span class="nx">Avast</span> <span class="nx">right</span> <span class="nx">o'</span> <span class="nx">John</span><span class="p">:</span> <span class="nx">Rational</span> <span class="nx">thoughts</span><span class="p">!</span> </span></span><span class="line"><span class="cl"> <span class="nx">John</span><span class="o">-->></span><span class="nx">Alice</span><span class="p">:</span> <span class="nx">Great</span><span class="p">!</span> </span></span><span class="line"><span class="cl"> <span class="nx">John</span><span class="o">->></span><span class="nx">Bob</span><span class="p">:</span> <span class="nx">How</span> <span class="nx">about</span> <span class="nx">ye</span><span class="err">?</span> </span></span><span class="line"><span class="cl"> <span class="nx">Bob</span><span class="o">-->></span><span class="nx">John</span><span class="p">:</span> <span class="nx">Jolly</span> <span class="nx">bloody</span><span class="p">!</span> </span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">mermaid</span> <span class="p">>}}</span></span></span></code></pre></div> <pre class="mermaid align-center zoomable"> %%{init:{"fontFamily":"monospace", "sequence":{"showSequenceNumbers":true}}}%% sequenceDiagram Alice->>John: Hello John, how be ye? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about ye? Bob-->>John: Jolly bloody! </pre> <h3 id="class-diagram-with-codefence-syntax">Class Diagram wit' Codefence Rules</h3> <div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="s">```mermaid </span></span></span><span class="line"><span class="cl"><span class="s">classDiagram </span></span></span><span class="line"><span class="cl"><span class="s"> Animal <|-- Duck </span></span></span><span class="line"><span class="cl"><span class="s"> Animal <|-- Fish </span></span></span><span class="line"><span class="cl"><span class="s"> Animal <|-- Zebra </span></span></span><span class="line"><span class="cl"><span class="s"> Animal : +int age </span></span></span><span class="line"><span class="cl"><span class="s"> Animal : +Str'n gender </span></span></span><span class="line"><span class="cl"><span class="s"> Animal: +isMammal() </span></span></span><span class="line"><span class="cl"><span class="s"> Animal: +mate() </span></span></span><span class="line"><span class="cl"><span class="s"> class Duck{ </span></span></span><span class="line"><span class="cl"><span class="s"> +Str'n beakColor </span></span></span><span class="line"><span class="cl"><span class="s"> +swim() </span></span></span><span class="line"><span class="cl"><span class="s"> +quack() </span></span></span><span class="line"><span class="cl"><span class="s"> } </span></span></span><span class="line"><span class="cl"><span class="s"> class Fish{ </span></span></span><span class="line"><span class="cl"><span class="s"> -int sizeInFeet </span></span></span><span class="line"><span class="cl"><span class="s"> -canEat() </span></span></span><span class="line"><span class="cl"><span class="s"> } </span></span></span><span class="line"><span class="cl"><span class="s"> class Zebra{ </span></span></span><span class="line"><span class="cl"><span class="s"> +bool is_wild </span></span></span><span class="line"><span class="cl"><span class="s"> +run() </span></span></span><span class="line"><span class="cl"><span class="s"> } </span></span></span><span class="line"><span class="cl"><span class="s">```</span></span></span></code></pre></div> <pre class="mermaid align-center zoomable">classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +Str'n gender Animal: +isMammal() Animal: +mate() class Duck{ +Str'n beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() }</pre><h3 id="state-diagram-aligned-to-the-right">State Diagram Aligned t' th' Right</h3> <div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">mermaid</span> <span class="nx">align</span><span class="p">=</span><span class="s">"right"</span> <span class="p">>}}</span> </span></span><span class="line"><span class="cl"><span class="nx">stateDiagram</span><span class="o">-</span><span class="nx">v2</span> </span></span><span class="line"><span class="cl"> <span class="nx">open</span><span class="p">:</span> <span class="nx">Open</span> <span class="nx">Door</span> </span></span><span class="line"><span class="cl"> <span class="nx">closed</span><span class="p">:</span> <span class="nx">Closed</span> <span class="nx">Door</span> </span></span><span class="line"><span class="cl"> <span class="nx">locked</span><span class="p">:</span> <span class="nx">Locked</span> <span class="nx">Door</span> </span></span><span class="line"><span class="cl"> <span class="nx">open</span> <span class="o">--</span><span class="p">></span> <span class="nx">closed</span><span class="p">:</span> <span class="nx">Close</span> </span></span><span class="line"><span class="cl"> <span class="nx">closed</span> <span class="o">--</span><span class="p">></span> <span class="nx">locked</span><span class="p">:</span> <span class="nx">Lock</span> </span></span><span class="line"><span class="cl"> <span class="nx">locked</span> <span class="o">--</span><span class="p">></span> <span class="nx">closed</span><span class="p">:</span> <span class="nx">Unlock</span> </span></span><span class="line"><span class="cl"> <span class="nx">closed</span> <span class="o">--</span><span class="p">></span> <span class="nx">open</span><span class="p">:</span> <span class="nx">Open</span> </span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">mermaid</span> <span class="p">>}}</span></span></span></code></pre></div> <pre class="mermaid align-right zoomable"> stateDiagram-v2 open: Open Door closed: Closed Door locked: Locked Door open --> closed: Close closed --> locked: Lock locked --> closed: Unlock closed --> open: Open </pre> <h3 id="entity-relationship-model-with-non-default-mermaid-theme">Entity Relationship Model wit' Non-Default Merrrmaid Theme</h3> <div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">mermaid</span> <span class="p">>}}</span> </span></span><span class="line"><span class="cl"><span class="o">%%</span><span class="p">{</span><span class="nx">init</span><span class="p">:{</span><span class="s">"theme"</span><span class="p">:</span><span class="s">"forest"</span><span class="p">}}</span><span class="o">%%</span> </span></span><span class="line"><span class="cl"><span class="nx">erDiagram</span> </span></span><span class="line"><span class="cl"> <span class="nx">CUSTOMER</span> <span class="p">}|..|{</span> <span class="nx">DELIVERY</span><span class="o">-</span><span class="nx">ADDRESS</span> <span class="p">:</span> <span class="nx">has</span> </span></span><span class="line"><span class="cl"> <span class="nx">CUSTOMER</span> <span class="o">||--</span><span class="nx">o</span><span class="p">{</span> <span class="nx">ORDER</span> <span class="p">:</span> <span class="nx">places</span> </span></span><span class="line"><span class="cl"> <span class="nx">CUSTOMER</span> <span class="o">||--</span><span class="nx">o</span><span class="p">{</span> <span class="nx">INVOICE</span> <span class="p">:</span> <span class="s">"li'ble for"</span> </span></span><span class="line"><span class="cl"> <span class="nx">DELIVERY</span><span class="o">-</span><span class="nx">ADDRESS</span> <span class="o">||--</span><span class="nx">o</span><span class="p">{</span> <span class="nx">ORDER</span> <span class="p">:</span> <span class="nx">receives</span> </span></span><span class="line"><span class="cl"> <span class="nx">INVOICE</span> <span class="o">||--</span><span class="p">|{</span> <span class="nx">ORDER</span> <span class="p">:</span> <span class="nx">covers</span> </span></span><span class="line"><span class="cl"> <span class="nx">ORDER</span> <span class="o">||--</span><span class="p">|{</span> <span class="nx">ORDER</span><span class="o">-</span><span class="nx">ITEM</span> <span class="p">:</span> <span class="nx">includes</span> </span></span><span class="line"><span class="cl"> <span class="nx">PRODUCT</span><span class="o">-</span><span class="nx">CATEGORY</span> <span class="o">||--</span><span class="p">|{</span> <span class="nx">PRODUCT</span> <span class="p">:</span> <span class="nx">contains</span> </span></span><span class="line"><span class="cl"> <span class="nx">PRODUCT</span> <span class="o">||--</span><span class="nx">o</span><span class="p">{</span> <span class="nx">ORDER</span><span class="o">-</span><span class="nx">ITEM</span> <span class="p">:</span> <span class="s">"ordered in"</span> </span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">mermaid</span> <span class="p">>}}</span></span></span></code></pre></div> <pre class="mermaid align-center zoomable"> %%{init:{"theme":"forest"}}%% erDiagram CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ INVOICE : "li'ble for" DELIVERY-ADDRESS ||--o{ ORDER : receives INVOICE ||--|{ ORDER : covers ORDER ||--|{ ORDER-ITEM : includes PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT ||--o{ ORDER-ITEM : "ordered in" </pre> <h3 id="user-journey">User Journey</h3> <div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">mermaid</span> <span class="p">>}}</span> </span></span><span class="line"><span class="cl"><span class="nx">journey</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span> <span class="nx">My</span> <span class="nx">work'n</span> <span class="nx">day</span> </span></span><span class="line"><span class="cl"> <span class="nx">section</span> <span class="nx">Go</span> <span class="nx">t'</span> <span class="nx">work</span> </span></span><span class="line"><span class="cl"> <span class="nx">Make</span> <span class="nx">tea</span><span class="p">:</span> <span class="mi">5</span><span class="p">:</span> <span class="nx">Me</span> </span></span><span class="line"><span class="cl"> <span class="nx">Go</span> <span class="nx">upstairs</span><span class="p">:</span> <span class="mi">3</span><span class="p">:</span> <span class="nx">Me</span> </span></span><span class="line"><span class="cl"> <span class="nx">Do</span> <span class="nx">work</span><span class="p">:</span> <span class="mi">1</span><span class="p">:</span> <span class="nx">Me</span><span class="p">,</span> <span class="nx">Cat</span> </span></span><span class="line"><span class="cl"> <span class="nx">section</span> <span class="nx">Go</span> <span class="nx">home</span> </span></span><span class="line"><span class="cl"> <span class="nx">Go</span> <span class="nx">downstairs</span><span class="p">:</span> <span class="mi">5</span><span class="p">:</span> <span class="nx">Me</span> </span></span><span class="line"><span class="cl"> <span class="nx">Sit</span> <span class="nx">down</span><span class="p">:</span> <span class="mi">3</span><span class="p">:</span> <span class="nx">Me</span> </span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">mermaid</span> <span class="p">>}}</span></span></span></code></pre></div> <pre class="mermaid align-center zoomable"> journey title My work'n day section Go t' 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 </pre> <h3 id="gantt-chart">GANTT Chart</h3> <div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">mermaid</span> <span class="p">>}}</span> </span></span><span class="line"><span class="cl"><span class="nx">gantt</span> </span></span><span class="line"><span class="cl"> <span class="nx">dateFormat</span> <span class="nx">YYYY</span><span class="o">-</span><span class="nx">MM</span><span class="o">-</span><span class="nx">DD</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span> <span class="nx">Add'n</span> <span class="nx">GANTT</span> <span class="nx">diagram</span> <span class="nx">functionality</span> <span class="nx">t'</span> <span class="nx">Merrrmaid</span> </span></span><span class="line"><span class="cl"> <span class="nx">section</span> <span class="nx">A</span> <span class="nx">section</span> </span></span><span class="line"><span class="cl"> <span class="nx">Completed</span> <span class="nx">task</span> <span class="p">:</span><span class="nx">done</span><span class="p">,</span> <span class="nx">des1</span><span class="p">,</span> <span class="mi">2014</span><span class="o">-</span><span class="mo">01</span><span class="o">-</span><span class="mo">06</span><span class="p">,</span><span class="mi">2014</span><span class="o">-</span><span class="mo">01</span><span class="o">-</span><span class="mi">08</span> </span></span><span class="line"><span class="cl"> <span class="nx">Active</span> <span class="nx">task</span> <span class="p">:</span><span class="nx">active</span><span class="p">,</span> <span class="nx">des2</span><span class="p">,</span> <span class="mi">2014</span><span class="o">-</span><span class="mo">01</span><span class="o">-</span><span class="mi">09</span><span class="p">,</span> <span class="mi">3</span><span class="nx">d</span> </span></span><span class="line"><span class="cl"> <span class="nx">Future</span> <span class="nx">task</span> <span class="p">:</span> <span class="nx">des3</span><span class="p">,</span> <span class="nx">after</span> <span class="nx">des2</span><span class="p">,</span> <span class="mi">5</span><span class="nx">d</span> </span></span><span class="line"><span class="cl"> <span class="nx">Future</span> <span class="nx">task2</span> <span class="p">:</span> <span class="nx">des4</span><span class="p">,</span> <span class="nx">after</span> <span class="nx">des3</span><span class="p">,</span> <span class="mi">5</span><span class="nx">d</span> </span></span><span class="line"><span class="cl"> <span class="nx">section</span> <span class="nx">Critical</span> <span class="nx">tasks</span> </span></span><span class="line"><span class="cl"> <span class="nx">Completed</span> <span class="nx">task</span> <span class="nx">'n</span> <span class="nx">th'</span> <span class="nx">critical</span> <span class="nx">line</span> <span class="p">:</span><span class="nx">crit</span><span class="p">,</span> <span class="nx">done</span><span class="p">,</span> <span class="mi">2014</span><span class="o">-</span><span class="mo">01</span><span class="o">-</span><span class="mo">06</span><span class="p">,</span><span class="mi">24</span><span class="nx">h</span> </span></span><span class="line"><span class="cl"> <span class="nx">Implement</span> <span class="nx">parser</span> <span class="nx">an'</span> <span class="nx">jison</span> <span class="p">:</span><span class="nx">crit</span><span class="p">,</span> <span class="nx">done</span><span class="p">,</span> <span class="nx">after</span> <span class="nx">des1</span><span class="p">,</span> <span class="mi">2</span><span class="nx">d</span> </span></span><span class="line"><span class="cl"> <span class="nx">Create</span> <span class="nx">tests</span> <span class="k">fer</span> <span class="nx">parser</span> <span class="p">:</span><span class="nx">crit</span><span class="p">,</span> <span class="nx">active</span><span class="p">,</span> <span class="mi">3</span><span class="nx">d</span> </span></span><span class="line"><span class="cl"> <span class="nx">Future</span> <span class="nx">task</span> <span class="nx">'n</span> <span class="nx">critical</span> <span class="nx">line</span> <span class="p">:</span><span class="nx">crit</span><span class="p">,</span> <span class="mi">5</span><span class="nx">d</span> </span></span><span class="line"><span class="cl"> <span class="nx">Create</span> <span class="nx">tests</span> <span class="k">fer</span> <span class="nx">renderer</span> <span class="p">:</span><span class="mi">2</span><span class="nx">d</span> </span></span><span class="line"><span class="cl"> <span class="nx">Add</span> <span class="nx">t'</span> <span class="nx">Merrrmaid</span> <span class="p">:</span><span class="mi">1</span><span class="nx">d</span> </span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">mermaid</span> <span class="p">>}}</span></span></span></code></pre></div> <pre class="mermaid align-center zoomable"> gantt dateFormat YYYY-MM-DD title Add'n GANTT diagram functionality t' Merrrmaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task 'n th' critical line :crit, done, 2014-01-06,24h Implement parser an' jison :crit, done, after des1, 2d Create tests fer parser :crit, active, 3d Future task 'n critical line :crit, 5d Create tests fer renderer :2d Add t' Merrrmaid :1d </pre> <h3 id="pie-chart-without-zoom">Pie Chart without Zoom</h3> <div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">mermaid</span> <span class="nx">zoom</span><span class="p">=</span><span class="s">"false"</span> <span class="p">>}}</span> </span></span><span class="line"><span class="cl"><span class="nx">pie</span> <span class="nx">title</span> <span class="nx">Pets</span> <span class="nx">adopted</span> <span class="nx">by</span> <span class="nx">volunteers</span> </span></span><span class="line"><span class="cl"> <span class="s">"Dogs"</span> <span class="p">:</span> <span class="mi">386</span> </span></span><span class="line"><span class="cl"> <span class="s">"Cats"</span> <span class="p">:</span> <span class="mi">85</span> </span></span><span class="line"><span class="cl"> <span class="s">"Rats"</span> <span class="p">:</span> <span class="mi">15</span> </span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">mermaid</span> <span class="p">>}}</span></span></span></code></pre></div> <pre class="mermaid align-center "> pie title Pets adopted by volunteers "Dogs" : 386 "Cats" : 85 "Rats" : 15 </pre> <h3 id="quadrant-chart">Quadrant Chart</h3> <div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">mermaid</span> <span class="p">>}}</span> </span></span><span class="line"><span class="cl"><span class="nx">pie</span> <span class="nx">title</span> <span class="nx">Pets</span> <span class="nx">adopted</span> <span class="nx">by</span> <span class="nx">volunteers</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span> <span class="nx">Reach</span> <span class="nx">an'</span> <span class="nx">engagement</span> <span class="nx">o'</span> <span class="nx">campaigns</span> </span></span><span class="line"><span class="cl"> <span class="nx">x</span><span class="o">-</span><span class="nx">axis</span> <span class="nx">Low</span> <span class="nx">Reach</span> <span class="o">--</span><span class="p">></span> <span class="nx">High</span> <span class="nx">Reach</span> </span></span><span class="line"><span class="cl"> <span class="nx">y</span><span class="o">-</span><span class="nx">axis</span> <span class="nx">Low</span> <span class="nx">Engagement</span> <span class="o">--</span><span class="p">></span> <span class="nx">High</span> <span class="nx">Engagement</span> </span></span><span class="line"><span class="cl"> <span class="nx">quadrant</span><span class="o">-</span><span class="mi">1</span> <span class="nx">We</span> <span class="nx">should</span> <span class="nx">expand</span> </span></span><span class="line"><span class="cl"> <span class="nx">quadrant</span><span class="o">-</span><span class="mi">2</span> <span class="nx">Need</span> <span class="nx">t'</span> <span class="nx">promote</span> </span></span><span class="line"><span class="cl"> <span class="nx">quadrant</span><span class="o">-</span><span class="mi">3</span> <span class="nx">Re</span><span class="o">-</span><span class="nx">evaluate</span> </span></span><span class="line"><span class="cl"> <span class="nx">quadrant</span><span class="o">-</span><span class="mi">4</span> <span class="nx">May</span> <span class="nx">be</span> <span class="nx">improved</span> </span></span><span class="line"><span class="cl"> <span class="nx">Campaign</span> <span class="nx">A</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.3</span><span class="p">,</span> <span class="mf">0.6</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="nx">Campaign</span> <span class="nx">B</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.45</span><span class="p">,</span> <span class="mf">0.23</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="nx">Campaign</span> <span class="nx">C</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.57</span><span class="p">,</span> <span class="mf">0.69</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="nx">Campaign</span> <span class="nx">D</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.78</span><span class="p">,</span> <span class="mf">0.34</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="nx">Campaign</span> <span class="nx">E</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.40</span><span class="p">,</span> <span class="mf">0.34</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="nx">Campaign</span> <span class="nx">F</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.35</span><span class="p">,</span> <span class="mf">0.78</span><span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">mermaid</span> <span class="p">>}}</span></span></span></code></pre></div> <pre class="mermaid align-center zoomable"> quadrantChart title Reach an' engagement o' campaigns x-axis Low Reach --> High Reach y-axis Low Engagement --> High Engagement quadrant-1 We should expand quadrant-2 Need t' promote quadrant-3 Re-evaluate quadrant-4 May be improved Campaign A: [0.3, 0.6] Campaign B: [0.45, 0.23] Campaign C: [0.57, 0.69] Campaign D: [0.78, 0.34] Campaign E: [0.40, 0.34] Campaign F: [0.35, 0.78] </pre> <h3 id="requirement-diagram">Requirement Diagram</h3> <div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">mermaid</span> <span class="p">>}}</span> </span></span><span class="line"><span class="cl"> <span class="nx">requirementDiagram</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">requirement</span> <span class="nx">test_req</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="p">:</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="nx">text</span><span class="p">:</span> <span class="nx">th'</span> <span class="nx">test</span> <span class="nx">text</span><span class="p">.</span> </span></span><span class="line"><span class="cl"> <span class="nx">risk</span><span class="p">:</span> <span class="nx">high</span> </span></span><span class="line"><span class="cl"> <span class="nx">verifymethod</span><span class="p">:</span> <span class="nx">test</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">element</span> <span class="nx">test_entity</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">type</span><span class="p">:</span> <span class="nx">simulat'n</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">test_entity</span> <span class="o">-</span> <span class="nx">satisfies</span> <span class="o">-</span><span class="p">></span> <span class="nx">test_req</span> </span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">mermaid</span> <span class="p">>}}</span></span></span></code></pre></div> <pre class="mermaid align-center zoomable"> requirementDiagram requirement test_req { id: 1 text: th' test text. risk: high verifymethod: test } element test_entity { type: simulat'n } test_entity - satisfies -> test_req </pre> <h3 id="git-graph">Git Graph</h3> <div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">mermaid</span> <span class="p">>}}</span> </span></span><span class="line"><span class="cl"><span class="nx">gitGraph</span> </span></span><span class="line"><span class="cl"> <span class="nx">commit</span> </span></span><span class="line"><span class="cl"> <span class="nx">commit</span> </span></span><span class="line"><span class="cl"> <span class="nx">branch</span> <span class="nx">develop</span> </span></span><span class="line"><span class="cl"> <span class="nx">checkout</span> <span class="nx">develop</span> </span></span><span class="line"><span class="cl"> <span class="nx">commit</span> </span></span><span class="line"><span class="cl"> <span class="nx">commit</span> </span></span><span class="line"><span class="cl"> <span class="nx">checkout</span> <span class="nx">main</span> </span></span><span class="line"><span class="cl"> <span class="nx">merge</span> <span class="nx">develop</span> </span></span><span class="line"><span class="cl"> <span class="nx">commit</span> </span></span><span class="line"><span class="cl"> <span class="nx">commit</span> </span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">mermaid</span> <span class="p">>}}</span></span></span></code></pre></div> <pre class="mermaid align-center zoomable"> gitGraph commit commit branch develop checkout develop commit commit checkout main merge develop commit commit </pre> <h3 id="c4-diagrams">C4 Diagrams</h3> <div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">mermaid</span> <span class="p">>}}</span> </span></span><span class="line"><span class="cl"><span class="nx">C4Context</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span> <span class="nx">System</span> <span class="nx">Context</span> <span class="nx">diagram</span> <span class="k">fer</span> <span class="nx">Internet</span> <span class="nx">Bank'n</span> <span class="nx">System</span> </span></span><span class="line"><span class="cl"> <span class="nf">Enterprise_Boundary</span><span class="p">(</span><span class="nx">b0</span><span class="p">,</span> <span class="s">"BankBoundary0"</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nf">Person</span><span class="p">(</span><span class="nx">customerA</span><span class="p">,</span> <span class="s">"Bank'n Customer A"</span><span class="p">,</span> <span class="s">"A customer o' th' bank, wit' personal bank accounts."</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nf">Person</span><span class="p">(</span><span class="nx">customerB</span><span class="p">,</span> <span class="s">"Bank'n Customer B"</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nf">Person_Ext</span><span class="p">(</span><span class="nx">customerC</span><span class="p">,</span> <span class="s">"Bank'n Customer C"</span><span class="p">,</span> <span class="s">"desc"</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nf">Person</span><span class="p">(</span><span class="nx">customerD</span><span class="p">,</span> <span class="s">"Bank'n Customer D"</span><span class="p">,</span> <span class="s">"A customer o' th' bank, <br/> wit' personal bank accounts."</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nf">System</span><span class="p">(</span><span class="nx">SystemAA</span><span class="p">,</span> <span class="s">"Internet Bank'n System"</span><span class="p">,</span> <span class="s">"Allows customers t' view informat'n about their bank accounts, an' make payments."</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nf">Enterprise_Boundary</span><span class="p">(</span><span class="nx">b1</span><span class="p">,</span> <span class="s">"BankBoundary"</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nf">SystemDb_Ext</span><span class="p">(</span><span class="nx">SystemE</span><span class="p">,</span> <span class="s">"Mainframe Bank'n System"</span><span class="p">,</span> <span class="s">"Stores all o' th' core bank'n informat'n about customers, accounts, transact'ns, etc."</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nf">System_Boundary</span><span class="p">(</span><span class="nx">b2</span><span class="p">,</span> <span class="s">"BankBoundary2"</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nf">System</span><span class="p">(</span><span class="nx">SystemA</span><span class="p">,</span> <span class="s">"Bank'n System A"</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nf">System</span><span class="p">(</span><span class="nx">SystemB</span><span class="p">,</span> <span class="s">"Bank'n System B"</span><span class="p">,</span> <span class="s">"A system o' th' bank, wit' personal bank accounts. next line."</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nf">System_Ext</span><span class="p">(</span><span class="nx">SystemC</span><span class="p">,</span> <span class="s">"E-mail system"</span><span class="p">,</span> <span class="s">"The internal Microsoft Exchange e-mail system."</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nf">SystemDb</span><span class="p">(</span><span class="nx">SystemD</span><span class="p">,</span> <span class="s">"Bank'n System D Database"</span><span class="p">,</span> <span class="s">"A system o' th' bank, wit' personal bank accounts."</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nf">Boundary</span><span class="p">(</span><span class="nx">b3</span><span class="p">,</span> <span class="s">"BankBoundary3"</span><span class="p">,</span> <span class="s">"boundary"</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nf">SystemQueue</span><span class="p">(</span><span class="nx">SystemF</span><span class="p">,</span> <span class="s">"Bank'n System F Queue"</span><span class="p">,</span> <span class="s">"A system o' th' bank."</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nf">SystemQueue_Ext</span><span class="p">(</span><span class="nx">SystemG</span><span class="p">,</span> <span class="s">"Bank'n System G Queue"</span><span class="p">,</span> <span class="s">"A system o' th' bank, wit' personal bank accounts."</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nf">BiRel</span><span class="p">(</span><span class="nx">customerA</span><span class="p">,</span> <span class="nx">SystemAA</span><span class="p">,</span> <span class="s">"Uses"</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nf">BiRel</span><span class="p">(</span><span class="nx">SystemAA</span><span class="p">,</span> <span class="nx">SystemE</span><span class="p">,</span> <span class="s">"Uses"</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nf">Rel</span><span class="p">(</span><span class="nx">SystemAA</span><span class="p">,</span> <span class="nx">SystemC</span><span class="p">,</span> <span class="s">"Sends e-mails"</span><span class="p">,</span> <span class="s">"SMTP"</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nf">Rel</span><span class="p">(</span><span class="nx">SystemC</span><span class="p">,</span> <span class="nx">customerA</span><span class="p">,</span> <span class="s">"Sends e-mails to"</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nf">UpdateElementStyle</span><span class="p">(</span><span class="nx">customerA</span><span class="p">,</span> <span class="err">$</span><span class="nx">fontColor</span><span class="p">=</span><span class="s">"red"</span><span class="p">,</span> <span class="err">$</span><span class="nx">bgColor</span><span class="p">=</span><span class="s">"grey"</span><span class="p">,</span> <span class="err">$</span><span class="nx">borderColor</span><span class="p">=</span><span class="s">"red"</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nf">UpdateRelStyle</span><span class="p">(</span><span class="nx">customerA</span><span class="p">,</span> <span class="nx">SystemAA</span><span class="p">,</span> <span class="err">$</span><span class="nx">textColor</span><span class="p">=</span><span class="s">"blue"</span><span class="p">,</span> <span class="err">$</span><span class="nx">lineColor</span><span class="p">=</span><span class="s">"blue"</span><span class="p">,</span> <span class="err">$</span><span class="nx">offsetX</span><span class="p">=</span><span class="s">"5"</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nf">UpdateRelStyle</span><span class="p">(</span><span class="nx">SystemAA</span><span class="p">,</span> <span class="nx">SystemE</span><span class="p">,</span> <span class="err">$</span><span class="nx">textColor</span><span class="p">=</span><span class="s">"blue"</span><span class="p">,</span> <span class="err">$</span><span class="nx">lineColor</span><span class="p">=</span><span class="s">"blue"</span><span class="p">,</span> <span class="err">$</span><span class="nx">offsetY</span><span class="p">=</span><span class="s">"-10"</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nf">UpdateRelStyle</span><span class="p">(</span><span class="nx">SystemAA</span><span class="p">,</span> <span class="nx">SystemC</span><span class="p">,</span> <span class="err">$</span><span class="nx">textColor</span><span class="p">=</span><span class="s">"blue"</span><span class="p">,</span> <span class="err">$</span><span class="nx">lineColor</span><span class="p">=</span><span class="s">"blue"</span><span class="p">,</span> <span class="err">$</span><span class="nx">offsetY</span><span class="p">=</span><span class="s">"-40"</span><span class="p">,</span> <span class="err">$</span><span class="nx">offsetX</span><span class="p">=</span><span class="s">"-50"</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nf">UpdateRelStyle</span><span class="p">(</span><span class="nx">SystemC</span><span class="p">,</span> <span class="nx">customerA</span><span class="p">,</span> <span class="err">$</span><span class="nx">textColor</span><span class="p">=</span><span class="s">"red"</span><span class="p">,</span> <span class="err">$</span><span class="nx">lineColor</span><span class="p">=</span><span class="s">"red"</span><span class="p">,</span> <span class="err">$</span><span class="nx">offsetX</span><span class="p">=</span><span class="s">"-50"</span><span class="p">,</span> <span class="err">$</span><span class="nx">offsetY</span><span class="p">=</span><span class="s">"20"</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nf">UpdateLayoutConfig</span><span class="p">(</span><span class="err">$</span><span class="nx">c4ShapeInRow</span><span class="p">=</span><span class="s">"3"</span><span class="p">,</span> <span class="err">$</span><span class="nx">c4BoundaryInRow</span><span class="p">=</span><span class="s">"1"</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">mermaid</span> <span class="p">>}}</span></span></span></code></pre></div> <pre class="mermaid align-center zoomable"> C4Context title System Context diagram fer Internet Bank'n System Enterprise_Boundary(b0, "BankBoundary0") { Person(customerA, "Bank'n Customer A", "A customer o' th' bank, wit' personal bank accounts.") Person(customerB, "Bank'n Customer B") Person_Ext(customerC, "Bank'n Customer C", "desc") Person(customerD, "Bank'n Customer D", "A customer o' th' bank, <br/> wit' personal bank accounts.") System(SystemAA, "Internet Bank'n System", "Allows customers t' view informat'n about their bank accounts, an' make payments.") Enterprise_Boundary(b1, "BankBoundary") { SystemDb_Ext(SystemE, "Mainframe Bank'n System", "Stores all o' th' core bank'n informat'n about customers, accounts, transact'ns, etc.") System_Boundary(b2, "BankBoundary2") { System(SystemA, "Bank'n System A") System(SystemB, "Bank'n System B", "A system o' th' bank, wit' personal bank accounts. next line.") } System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") SystemDb(SystemD, "Bank'n System D Database", "A system o' th' bank, wit' personal bank accounts.") Boundary(b3, "BankBoundary3", "boundary") { SystemQueue(SystemF, "Bank'n System F Queue", "A system o' th' bank.") SystemQueue_Ext(SystemG, "Bank'n System G Queue", "A system o' th' bank, wit' 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") UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red") UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5") UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10") UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50") UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20") UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1") </pre> <h3 id="mindmaps">Mindmaps</h3> <div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">mermaid</span> <span class="p">>}}</span> </span></span><span class="line"><span class="cl"><span class="nx">mindmap</span> </span></span><span class="line"><span class="cl"> <span class="nf">root</span><span class="p">((</span><span class="nx">mindmap</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> <span class="nx">Origins</span> </span></span><span class="line"><span class="cl"> <span class="nx">Long</span> <span class="nx">history</span> </span></span><span class="line"><span class="cl"> <span class="p">::</span><span class="nf">ay'con</span><span class="p">(</span><span class="nx">fa</span> <span class="nx">fa</span><span class="o">-</span><span class="nx">book</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">Popularisat'n</span> </span></span><span class="line"><span class="cl"> <span class="nx">British</span> <span class="nx">popular</span> <span class="nx">psychology</span> <span class="nx">author</span> <span class="nx">Tony</span> <span class="nx">Buzan</span> </span></span><span class="line"><span class="cl"> <span class="nx">Research</span> </span></span><span class="line"><span class="cl"> <span class="nx">On</span> <span class="nx">effectiveness</span><span class="p"><</span><span class="nx">br</span><span class="o">/</span><span class="p">></span><span class="nx">an'</span> <span class="nx">features</span> </span></span><span class="line"><span class="cl"> <span class="nx">On</span> <span class="nx">Automatic</span> <span class="nx">creat'n</span> </span></span><span class="line"><span class="cl"> <span class="nx">Uses</span> </span></span><span class="line"><span class="cl"> <span class="nx">Creative</span> <span class="nx">techniques</span> </span></span><span class="line"><span class="cl"> <span class="nx">Strategic</span> <span class="nx">plann'n</span> </span></span><span class="line"><span class="cl"> <span class="nx">Argument</span> <span class="nx">mapp'n</span> </span></span><span class="line"><span class="cl"> <span class="nx">Tools</span> </span></span><span class="line"><span class="cl"> <span class="nx">Pen</span> <span class="nx">an'</span> <span class="nx">paper</span> </span></span><span class="line"><span class="cl"> <span class="nx">Merrrmaid</span> </span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">mermaid</span> <span class="p">>}}</span></span></span></code></pre></div> <pre class="mermaid align-center zoomable"> mindmap root((mindmap)) Origins Long history ::icon(fa fa-book) Popularisat'n British popular psychology author Tony Buzan Research On effectiveness<br/>and features On Automatic creat'n Uses Creative techniques Strategic plann'n Argument mapp'n Tools Pen an' paper Merrrmaid </pre> <h3 id="timeline">Timeline</h3> <div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">mermaid</span> <span class="p">>}}</span> </span></span><span class="line"><span class="cl"><span class="nx">timeline</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span> <span class="nx">History</span> <span class="nx">o'</span> <span class="nx">Social</span> <span class="nx">Media</span> <span class="nx">Platform</span> </span></span><span class="line"><span class="cl"> <span class="mi">2002</span> <span class="p">:</span> <span class="nx">LinkedIn</span> </span></span><span class="line"><span class="cl"> <span class="mi">2004</span> <span class="p">:</span> <span class="nx">Facebook</span> </span></span><span class="line"><span class="cl"> <span class="p">:</span> <span class="nx">Google</span> </span></span><span class="line"><span class="cl"> <span class="mi">2005</span> <span class="p">:</span> <span class="nx">Youtube</span> </span></span><span class="line"><span class="cl"> <span class="mi">2006</span> <span class="p">:</span> <span class="nx">Twitter</span> </span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">mermaid</span> <span class="p">>}}</span></span></span></code></pre></div> <pre class="mermaid align-center zoomable"> timeline title History o' Social Media Platform 2002 : LinkedIn 2004 : Facebook : Google 2005 : Youtube 2006 : Twitter </pre> <h3 id="sankey">Sankey</h3> <div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">mermaid</span> <span class="p">>}}</span> </span></span><span class="line"><span class="cl"><span class="nx">sankey</span><span class="o">-</span><span class="nx">beta</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="o">%%</span> <span class="nx">source</span><span class="p">,</span><span class="nx">target</span><span class="p">,</span><span class="nx">value</span> </span></span><span class="line"><span class="cl"><span class="nx">Electricity</span> <span class="nx">grid</span><span class="p">,</span><span class="nx">Over</span> <span class="nx">generat'n</span> <span class="o">/</span> <span class="nx">exports</span><span class="p">,</span><span class="mf">104.453</span> </span></span><span class="line"><span class="cl"><span class="nx">Electricity</span> <span class="nx">grid</span><span class="p">,</span><span class="nx">Heat'n</span> <span class="nx">an'</span> <span class="nx">cool'n</span> <span class="o">-</span> <span class="nx">homes</span><span class="p">,</span><span class="mf">113.726</span> </span></span><span class="line"><span class="cl"><span class="nx">Electricity</span> <span class="nx">grid</span><span class="p">,</span><span class="nx">H2</span> <span class="nx">conversion</span><span class="p">,</span><span class="mf">27.14</span> </span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">mermaid</span> <span class="p">>}}</span></span></span></code></pre></div> <pre class="mermaid align-center zoomable"> sankey-beta %% source,target,value Electricity grid,Over generat'n / exports,104.453 Electricity grid,Heat'n an' cool'n - homes,113.726 Electricity grid,H2 conversion,27.14 </pre> <h2 id="xychart">XYChart</h2> <div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">mermaid</span> <span class="p">>}}</span> </span></span><span class="line"><span class="cl"><span class="nx">xychart</span><span class="o">-</span><span class="nx">beta</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span> <span class="s">"Sales Revenue"</span> </span></span><span class="line"><span class="cl"> <span class="nx">x</span><span class="o">-</span><span class="nx">axis</span> <span class="p">[</span><span class="nx">jan</span><span class="p">,</span> <span class="nx">feb</span><span class="p">,</span> <span class="nx">mar</span><span class="p">,</span> <span class="nx">apr</span><span class="p">,</span> <span class="nx">may</span><span class="p">,</span> <span class="nx">jun</span><span class="p">,</span> <span class="nx">jul</span><span class="p">,</span> <span class="nx">aug</span><span class="p">,</span> <span class="nx">sep</span><span class="p">,</span> <span class="nx">oct</span><span class="p">,</span> <span class="nx">nov</span><span class="p">,</span> <span class="nx">dec</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="nx">y</span><span class="o">-</span><span class="nx">axis</span> <span class="s">"Revenue (in $)"</span> <span class="mi">4000</span> <span class="o">--</span><span class="p">></span> <span class="mi">11000</span> </span></span><span class="line"><span class="cl"> <span class="nx">bar</span> <span class="p">[</span><span class="mi">5000</span><span class="p">,</span> <span class="mi">6000</span><span class="p">,</span> <span class="mi">7500</span><span class="p">,</span> <span class="mi">8200</span><span class="p">,</span> <span class="mi">9500</span><span class="p">,</span> <span class="mi">10500</span><span class="p">,</span> <span class="mi">11000</span><span class="p">,</span> <span class="mi">10200</span><span class="p">,</span> <span class="mi">9200</span><span class="p">,</span> <span class="mi">8500</span><span class="p">,</span> <span class="mi">7000</span><span class="p">,</span> <span class="mi">6000</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="nx">line</span> <span class="p">[</span><span class="mi">5000</span><span class="p">,</span> <span class="mi">6000</span><span class="p">,</span> <span class="mi">7500</span><span class="p">,</span> <span class="mi">8200</span><span class="p">,</span> <span class="mi">9500</span><span class="p">,</span> <span class="mi">10500</span><span class="p">,</span> <span class="mi">11000</span><span class="p">,</span> <span class="mi">10200</span><span class="p">,</span> <span class="mi">9200</span><span class="p">,</span> <span class="mi">8500</span><span class="p">,</span> <span class="mi">7000</span><span class="p">,</span> <span class="mi">6000</span><span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">mermaid</span> <span class="p">>}}</span></span></span></code></pre></div> <pre class="mermaid align-center zoomable"> xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis "Revenue (in $)" 4000 --> 11000 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] </pre> <footer class="footline"> </footer> </article> </div> </main> </div> <script src="/hugo-theme-relearn/js/clipboard.min.js?1710189845" defer></script> <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1710189845" defer></script> <script src="/hugo-theme-relearn/js/d3/d3-color.min.js?1710189845" defer></script> <script src="/hugo-theme-relearn/js/d3/d3-dispatch.min.js?1710189845" defer></script> <script src="/hugo-theme-relearn/js/d3/d3-drag.min.js?1710189845" defer></script> <script src="/hugo-theme-relearn/js/d3/d3-ease.min.js?1710189845" defer></script> <script src="/hugo-theme-relearn/js/d3/d3-interpolate.min.js?1710189845" defer></script> <script src="/hugo-theme-relearn/js/d3/d3-selection.min.js?1710189845" defer></script> <script src="/hugo-theme-relearn/js/d3/d3-timer.min.js?1710189845" defer></script> <script src="/hugo-theme-relearn/js/d3/d3-transition.min.js?1710189845" defer></script> <script src="/hugo-theme-relearn/js/d3/d3-zoom.min.js?1710189845" defer></script> <script src="/hugo-theme-relearn/js/js-yaml.min.js?1710189845" defer></script> <script src="/hugo-theme-relearn/js/mermaid.min.js?1710189845" defer></script> <script> window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }"); </script> <script src="/hugo-theme-relearn/js/theme.js?1710189845" defer></script> </body> </html>