mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-23 15:57:57 +00:00
869 lines
83 KiB
HTML
869 lines
83 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr" itemscope itemtype="http://schema.org/Article">
|
|
<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.133.1">
|
|
<meta name="generator" content="Relearn 6.1.1+tip">
|
|
<meta name="description" content="Generate diagrams and flowcharts from text">
|
|
<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="Mermaid :: Hugo Relearn Theme">
|
|
<meta name="twitter:description" content="Generate diagrams and flowcharts from text">
|
|
<meta property="og:url" content="https://mcshelby.github.io/hugo-theme-relearn/shortcodes/mermaid/index.html">
|
|
<meta property="og:site_name" content="Hugo Relearn Theme">
|
|
<meta property="og:title" content="Mermaid :: Hugo Relearn Theme">
|
|
<meta property="og:description" content="Generate diagrams and flowcharts from text">
|
|
<meta property="og:locale" content="en">
|
|
<meta property="og:type" content="article">
|
|
<meta property="article:section" content="Shortcodes">
|
|
<meta property="og:image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
|
|
<meta itemprop="name" content="Mermaid :: Hugo Relearn Theme">
|
|
<meta itemprop="description" content="Generate diagrams and flowcharts from text">
|
|
<meta itemprop="wordCount" content="2032">
|
|
<meta itemprop="image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
|
|
<title>Mermaid :: Hugo Relearn 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-x-pir">
|
|
<link href="https://mcshelby.github.io/hugo-theme-relearn/shortcodes/mermaid/index.html" rel="canonical" type="text/html" title="Mermaid :: Hugo Relearn Theme">
|
|
<link href="/hugo-theme-relearn/shortcodes/mermaid/index.xml" rel="alternate" type="application/rss+xml" title="Mermaid :: Hugo Relearn Theme">
|
|
<link href="/hugo-theme-relearn/images/logo.svg?1724706541" rel="icon" type="image/svg+xml">
|
|
<link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1724706541" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1724706541" rel="stylesheet"></noscript>
|
|
<link href="/hugo-theme-relearn/css/nucleus.css?1724706541" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/auto-complete.css?1724706541" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/auto-complete.css?1724706541" rel="stylesheet"></noscript>
|
|
<link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1724706541" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/fonts.css?1724706541" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fonts.css?1724706541" rel="stylesheet"></noscript>
|
|
<link href="/hugo-theme-relearn/css/theme.css?1724706541" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/theme-relearn-auto.css?1724706541" rel="stylesheet" id="R-variant-style">
|
|
<link href="/hugo-theme-relearn/css/chroma-relearn-auto.css?1724706541" rel="stylesheet" id="R-variant-chroma-style">
|
|
<link href="/hugo-theme-relearn/css/variant.css?1724706541" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/print.css?1724706541" rel="stylesheet" media="print">
|
|
<link href="/hugo-theme-relearn/css/format-print.css?1724706541" rel="stylesheet">
|
|
<script src="/hugo-theme-relearn/js/variant.js?1724706541"></script>
|
|
<script>
|
|
window.relearn = window.relearn || {};
|
|
window.relearn.relBasePath='..\/..';
|
|
window.relearn.relBaseUri='..\/..\/..';
|
|
window.relearn.absBaseUri='https:\/\/mcshelby.github.io\/hugo-theme-relearn';
|
|
window.relearn.disableAnchorCopy=false;
|
|
window.relearn.disableAnchorScrolling=false;
|
|
window.index_js_url="/hugo-theme-relearn/index.search.js?1724706541";
|
|
// variant stuff
|
|
window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'retro-auto', 'neon', 'learn', 'blue', 'green', 'red' ] );
|
|
// translations
|
|
window.T_Copy_to_clipboard = `Copy to clipboard`;
|
|
window.T_Copied_to_clipboard = `Copied to clipboard!`;
|
|
window.T_Copy_link_to_clipboard = `Copy link to clipboard`;
|
|
window.T_Link_copied_to_clipboard = `Copied link to clipboard!`;
|
|
window.T_Reset_view = `Reset view`;
|
|
window.T_View_reset = `View reset!`;
|
|
window.T_No_results_found = `No results found for "{0}"`;
|
|
window.T_N_results_found = `{1} results found for "{0}"`;
|
|
</script>
|
|
<style>
|
|
#R-body img.bg-white {
|
|
background-color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="mobile-support print disableInlineCopyToClipboard" data-url="/hugo-theme-relearn/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/shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="1"> > </li><li
|
|
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Mermaid</span><meta itemprop="position" content="2"></li>
|
|
</ol>
|
|
<div class="topbar-area topbar-area-end" data-area="end">
|
|
<div class="topbar-button topbar-button-prev" data-content-empty="disable" data-width-s="show" data-width-m="show" data-width-l="show"><a class="topbar-control" href="/hugo-theme-relearn/shortcodes/math/index.html" title="Math (🡐)"><i class="fa-fw fas fa-chevron-left"></i></a>
|
|
</div>
|
|
<div class="topbar-button topbar-button-next" data-content-empty="disable" data-width-s="show" data-width-m="show" data-width-l="show"><a class="topbar-control" href="/hugo-theme-relearn/shortcodes/notice/index.html" title="Notice (🡒)"><i class="fa-fw fas fa-chevron-right"></i></a>
|
|
</div>
|
|
</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="mermaid">Mermaid</h1>
|
|
|
|
<p>The <code>mermaid</code> shortcode generates diagrams and flowcharts from text, in a similar manner as Markdown using the <a href="https://mermaidjs.github.io/" rel="external" target="_self">Mermaid</a> library.</p>
|
|
|
|
<pre class="mermaid align-center zoomable">
|
|
graph LR;
|
|
If --> Then
|
|
Then --> Else
|
|
</pre>
|
|
<h2 id="usage">Usage</h2>
|
|
<p>While the examples are using shortcodes with named parameter it is recommended to use Markdown codefences instead. This is because more and more other software supports Mermaid Markdown codefences (eg. GitHub) and so your markdown becomes more portable.</p>
|
|
<p>You are free to also call this shortcode from your 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="markdown"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('shortcode-parameter','markdown')"
|
|
>
|
|
<span class="tab-nav-text">markdown</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="markdown"
|
|
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>The generated graphs can be panned by dragging them and zoomed by using the mousewheel. On mobile devices you 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 are <code>left</code>, <code>center</code> or <code>right</code>.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>zoom</strong></td>
|
|
<td>see notes</td>
|
|
<td>Whether the graph is pan- and zoomable.<br><br>If not set the value is determined by the <code>mermaidZoom</code> setting of the <a href="/hugo-theme-relearn/shortcodes/mermaid/index.html#global-configuration-file">site</a> or the <a href="/hugo-theme-relearn/shortcodes/mermaid/index.html#pages-frontmatter">pages 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 and zoom active</td>
|
|
</tr>
|
|
<tr>
|
|
<td><em><strong><content></strong></em></td>
|
|
<td><em><empty></em></td>
|
|
<td>Your Mermaid graph.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<h2 id="configuration">Configuration</h2>
|
|
<p>Mermaid is configured with default settings. You can customize Mermaid’s default settings for all of your files through a JSON object in your <code>hugo.toml</code>, override these settings per page through your pages frontmatter or override these setting per diagramm through <a href="https://mermaid-js.github.io/mermaid/#/directives?id=directives" rel="external" target="_self">diagram directives</a>.</p>
|
|
<p>The JSON object of your <code>hugo.toml</code> / frontmatter is forwarded into Mermaid’s <code>mermaid.initialize()</code> function.</p>
|
|
<p>See <a href="https://mermaid-js.github.io/mermaid/#/Setup?id=mermaidapi-configuration-defaults" rel="external" target="_self">Mermaid documentation</a> for all allowed settings.</p>
|
|
<p>The <code>theme</code> setting can also be set by your used color variant. This will be the sitewide default and can - again - be overridden by your settings in <code>hugo.toml</code>, frontmatter or diagram directives.</p>
|
|
<h3 id="global-configuration-file">Global Configuration 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 with 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 with Configuration 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">are</span> <span class="nx">you</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">Note</span> <span class="nx">right</span> <span class="nx">of</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">you</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">good</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 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!
|
|
</pre>
|
|
<h3 id="class-diagram-with-markdown-codefence-syntax">Class Diagram with Markdown Codefence Syntax</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 : +String 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"> +String 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 : +String gender
|
|
Animal: +isMammal()
|
|
Animal: +mate()
|
|
class Duck{
|
|
+String 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 to the 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 with Non-Default Mermaid 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">"liable 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 : "liable 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">working</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">to</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 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
|
|
</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">Adding</span> <span class="nx">GANTT</span> <span class="nx">diagram</span> <span class="nx">functionality</span> <span class="nx">to</span> <span class="nx">Mermaid</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">in</span> <span class="nx">the</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">and</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">for</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">in</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">for</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">to</span> <span class="nx">Mermaid</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 Adding GANTT diagram functionality to Mermaid
|
|
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 in the critical line :crit, done, 2014-01-06,24h
|
|
Implement parser and jison :crit, done, after des1, 2d
|
|
Create tests for parser :crit, active, 3d
|
|
Future task in critical line :crit, 5d
|
|
Create tests for renderer :2d
|
|
Add to Mermaid :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">and</span> <span class="nx">engagement</span> <span class="nx">of</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">to</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 and engagement of campaigns
|
|
x-axis Low Reach --> High Reach
|
|
y-axis Low Engagement --> High Engagement
|
|
quadrant-1 We should expand
|
|
quadrant-2 Need to 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">the</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">simulation</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: the test text.
|
|
risk: high
|
|
verifymethod: test
|
|
}
|
|
|
|
element test_entity {
|
|
type: simulation
|
|
}
|
|
|
|
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">for</span> <span class="nx">Internet</span> <span class="nx">Banking</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">"Banking Customer A"</span><span class="p">,</span> <span class="s">"A customer of the bank, with 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">"Banking 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">"Banking 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">"Banking Customer D"</span><span class="p">,</span> <span class="s">"A customer of the bank, <br/> with 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 Banking System"</span><span class="p">,</span> <span class="s">"Allows customers to view information about their bank accounts, and 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 Banking System"</span><span class="p">,</span> <span class="s">"Stores all of the core banking information about customers, accounts, transactions, 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">"Banking 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">"Banking System B"</span><span class="p">,</span> <span class="s">"A system of the bank, with 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">"Banking System D Database"</span><span class="p">,</span> <span class="s">"A system of the bank, with 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">"Banking System F Queue"</span><span class="p">,</span> <span class="s">"A system of the 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">"Banking System G Queue"</span><span class="p">,</span> <span class="s">"A system of the bank, with 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 for Internet Banking System
|
|
Enterprise_Boundary(b0, "BankBoundary0") {
|
|
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", "desc")
|
|
|
|
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
|
|
|
|
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
|
|
|
|
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. next line.")
|
|
}
|
|
|
|
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.")
|
|
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")
|
|
|
|
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">icon</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">Popularisation</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">and</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">creation</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">planning</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">Argument</span> <span class="nx">mapping</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">and</span> <span class="nx">paper</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">Mermaid</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)
|
|
Popularisation
|
|
British popular psychology author Tony Buzan
|
|
Research
|
|
On effectiveness<br/>and features
|
|
On Automatic creation
|
|
Uses
|
|
Creative techniques
|
|
Strategic planning
|
|
Argument mapping
|
|
Tools
|
|
Pen and paper
|
|
Mermaid
|
|
</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">of</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 of 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">generation</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">Heating</span> <span class="nx">and</span> <span class="nx">cooling</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 generation / exports,104.453
|
|
Electricity grid,Heating and cooling - homes,113.726
|
|
Electricity grid,H2 conversion,27.14
|
|
</pre>
|
|
<h3 id="xychart">XYChart</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">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>
|
|
<h3 id="block-diagram">Block 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">block</span><span class="o">-</span><span class="nx">beta</span>
|
|
</span></span><span class="line"><span class="cl"><span class="nx">columns</span> <span class="mi">1</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nf">db</span><span class="p">((</span><span class="s">"DB"</span><span class="p">))</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">blockArrowId6</span><span class="p"><[</span><span class="s">"&nbsp;&nbsp;&nbsp;"</span><span class="p">]>(</span><span class="nx">down</span><span class="p">)</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">block</span><span class="p">:</span><span class="nx">ID</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">A</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">B</span><span class="p">[</span><span class="s">"A wide one in the middle"</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">C</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">space</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">D</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">ID</span> <span class="o">--</span><span class="p">></span> <span class="nx">D</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">D</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">style</span> <span class="nx">B</span> <span class="nx">fill</span><span class="p">:</span><span class="err">#</span><span class="mi">969</span><span class="p">,</span><span class="nx">stroke</span><span class="p">:</span><span class="err">#</span><span class="mi">333</span><span class="p">,</span><span class="nx">stroke</span><span class="o">-</span><span class="nx">width</span><span class="p">:</span><span class="mi">4</span><span class="nx">px</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">
|
|
block-beta
|
|
columns 1
|
|
db(("DB"))
|
|
blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
|
|
block:ID
|
|
A
|
|
B["A wide one in the middle"]
|
|
C
|
|
end
|
|
space
|
|
D
|
|
ID --> D
|
|
C --> D
|
|
style B fill:#969,stroke:#333,stroke-width:4px
|
|
</pre>
|
|
|
|
<footer class="footline">
|
|
</footer>
|
|
</article>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<script src="/hugo-theme-relearn/js/clipboard.min.js?1724706541" defer></script>
|
|
<script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1724706541" defer></script>
|
|
<script src="/hugo-theme-relearn/js/d3/d3-color.min.js?1724706541" defer></script>
|
|
<script src="/hugo-theme-relearn/js/d3/d3-dispatch.min.js?1724706541" defer></script>
|
|
<script src="/hugo-theme-relearn/js/d3/d3-drag.min.js?1724706541" defer></script>
|
|
<script src="/hugo-theme-relearn/js/d3/d3-ease.min.js?1724706541" defer></script>
|
|
<script src="/hugo-theme-relearn/js/d3/d3-interpolate.min.js?1724706541" defer></script>
|
|
<script src="/hugo-theme-relearn/js/d3/d3-selection.min.js?1724706541" defer></script>
|
|
<script src="/hugo-theme-relearn/js/d3/d3-timer.min.js?1724706541" defer></script>
|
|
<script src="/hugo-theme-relearn/js/d3/d3-transition.min.js?1724706541" defer></script>
|
|
<script src="/hugo-theme-relearn/js/d3/d3-zoom.min.js?1724706541" defer></script>
|
|
<script src="/hugo-theme-relearn/js/js-yaml.min.js?1724706541" defer></script>
|
|
<script src="/hugo-theme-relearn/js/mermaid.min.js?1724706541" defer></script>
|
|
<script>
|
|
window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
|
|
</script>
|
|
<script src="/hugo-theme-relearn/js/theme.js?1724706541" defer></script>
|
|
</body>
|
|
</html>
|