List of Mermaid - text.Baldanders.info
tag:text.Baldanders.info,2022-04-10:/tags
2022-04-10T10:03:14+09:00
帰ってきた「しっぽのさきっちょ」
https://text.baldanders.info/images/avatar.jpg
https://text.baldanders.info/images/avatar.jpg
Mermaid.js の Git コミット図が正式版になった
tag:text.Baldanders.info,2022-04-10:/remark/2022/04/git-graph-with-mermaid/
2022-04-10T01:03:14+00:00
2022-04-10T01:42:02+00:00
個人的には縦向きに対応して欲しい。
Spiegel
https://baldanders.info/profile/
<p>先日 <a href="http://mermaid-js.github.io/mermaid/" title="mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">mermaid</a> 9.0.0 がリリースされたが <code>gitGraph</code> がアルファ版から昇格したようだ。</p>
<figure lang="en">
<blockquote>Moving the gitGraph from experimental alpha status to a fully supported diagram type which handles theming and directives. The grammar has changed slightly from the alpha version, and no longer supports reset operations and some internal fast-forwarding has been removed for simplicity. Some few GitGraphs based on the alpha version might break with the update. <strong>This is the reason for the major version number update</strong>.</blockquote>
<figcaption><div>via <q><a href="https://github.com/mermaid-js/mermaid/releases/tag/9.0.0">Release 9.0.0 · mermaid-js/mermaid</a></q></div></figcaption>
</figure>
<p>詳しい使い方は</p>
<ul>
<li><a href="http://mermaid-js.github.io/mermaid/#/gitgraph">Gitgraph Diagrams</a></li>
</ul>
<p>を参照してもらうとして,たとえば</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">%%{init: { 'gitGraph': {'mainBranchName': 'main','showCommitLabel': false}} }%%
</span></span><span class="line"><span class="cl">gitGraph
</span></span><span class="line"><span class="cl"> commit tag:"v1.0.0" type:REVERSE
</span></span><span class="line"><span class="cl"> branch featureA
</span></span><span class="line"><span class="cl"> commit
</span></span><span class="line"><span class="cl"> checkout main
</span></span><span class="line"><span class="cl"> branch hotfix
</span></span><span class="line"><span class="cl"> commit
</span></span><span class="line"><span class="cl"> commit type: HIGHLIGHT
</span></span><span class="line"><span class="cl"> checkout main
</span></span><span class="line"><span class="cl"> merge hotfix
</span></span><span class="line"><span class="cl"> commit tag:"v1.0.1"
</span></span><span class="line"><span class="cl"> checkout featureA
</span></span><span class="line"><span class="cl"> merge hotfix
</span></span><span class="line"><span class="cl"> commit type: HIGHLIGHT
</span></span><span class="line"><span class="cl"> checkout main
</span></span><span class="line"><span class="cl"> merge featureA
</span></span><span class="line"><span class="cl"> commit tag:"v1.1.0"
</span></span></code></pre></div><p>などと書けば</p>
<div class="mermaid">
%%{init: { 'gitGraph': {'mainBranchName': 'main','showCommitLabel': false}} }%%
gitGraph
commit tag:"v1.0.0" type:REVERSE
branch featureA
commit
checkout main
branch hotfix
commit
commit type: HIGHLIGHT
checkout main
merge hotfix
commit tag:"v1.0.1"
checkout featureA
merge hotfix
commit type: HIGHLIGHT
checkout main
merge featureA
commit tag:"v1.1.0"
</div><p>と展開される<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>。
何故かマージに対してタグが打てないが,まぁいいか。
Git 操作手順に近い感じで記述していけばグラフ化してくれるのがいい感じだよね。</p>
<p>個人的には縦向きに対応して欲しいところである。
でも,まずはめでたい!</p>
<!-- eof -->
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>ちなみに <code>mainBranchName</code> の既定値は <code>main</code> なので,本来は <code>'mainBranchName':'main'</code> と明示しなくても大丈夫。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>
Hugo で Markdeep な記述ができるようになった
tag:text.Baldanders.info,2022-03-06:/remark/2022/03/markdeep-with-hugo/
2022-03-06T01:53:56+00:00
2022-04-10T01:39:23+00:00
レンダー・フックを使って Mermaid にも対応できる。
Spiegel
https://baldanders.info/profile/
<p>先日 <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> v0.93 がリリースされたが,このバージョンで <a href="http://casual-effects.com/markdeep/">Markdeep</a> な記述にネイティブ対応したそうだ。</p>
<figure lang="en">
<blockquote><strong>Markdown diagrams and code block render hooks.</strong> Now it’s possible create custom templates for Markdown code blocks, either for all or just for specific programming languages. This can also be used to render diagrams from Markdown code blocks. We provide GoAT (Go ASCII Tool) natively from Hugo, but you can also add your own template to get <a href="https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/">Mermaid</a> support. The implementation of GoAT is a Go implementation by <a href="https://github.com/gohugoio/hugo/releases/tag/v0.93.0">@blampe</a> of <a href="https://github.com/gohugoio/hugo/releases/tag/v0.93.0">markdeep.mini.js</a>’ diagrams. See the <a href="https://gohugo.io/content-management/diagrams/">diagram documentation</a> for details.</blockquote>
<figcaption><div>via <q><a href="https://github.com/gohugoio/hugo/releases/tag/v0.93.0">Release v0.93.0 · gohugoio/hugo</a></q></div></figcaption>
</figure>
<p><a href="https://github.com/bep/goat" title="bep/goat: Render ASCII art as SVG diagrams">GoAT (Go ASCII Tool)</a> は <a href="http://casual-effects.com/markdeep/">Markdeep</a> を Go で実装し直したものだそうで,たとえば</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">```goat
</span></span><span class="line"><span class="cl">+-------------------+ ^ .---.
</span></span><span class="line"><span class="cl">| A Box |__.--.__ __.--> | .-. | |
</span></span><span class="line"><span class="cl">| | '--' v | * |<--- | |
</span></span><span class="line"><span class="cl">+-------------------+ '-' | |
</span></span><span class="line"><span class="cl"> Round *---(-. |
</span></span><span class="line"><span class="cl"> .-----------------. .-------. .----------. .-------. | | |
</span></span><span class="line"><span class="cl"> | Mixed Rounded | | | / Diagonals \ | | | | | |
</span></span><span class="line"><span class="cl"> | & Square Corners | '--. .--' / \ |---+---| '-)-' .--------.
</span></span><span class="line"><span class="cl"> '--+------------+-' .--. | '-------+--------' | | | | / Search /
</span></span><span class="line"><span class="cl"> | | | | '---. | '-------' | '-+------'
</span></span><span class="line"><span class="cl"> |<---------->| | | | v Interior | ^
</span></span><span class="line"><span class="cl"> ' <---' '----' .-----------. ---. .--- v |
</span></span><span class="line"><span class="cl"> .------------------. Diag line | .-------. +---. \ / . |
</span></span><span class="line"><span class="cl"> | if (a > b) +---. .--->| | | | | Curved line \ / / \ |
</span></span><span class="line"><span class="cl"> | obj->fcn() | \ / | '-------' |<--' + / \ |
</span></span><span class="line"><span class="cl"> '------------------' '--' '--+--------' .--. .--. | .-. +Done?+-'
</span></span><span class="line"><span class="cl"> .---+-----. | ^ |\ | | /| .--+ | | \ /
</span></span><span class="line"><span class="cl"> | | | Join \|/ | | Curved | \| |/ | | \ | \ /
</span></span><span class="line"><span class="cl"> | | +----> o --o-- '-' Vertical '--' '--' '-- '--' + .---.
</span></span><span class="line"><span class="cl"> <--+---+-----' | /|\ | | 3 |
</span></span><span class="line"><span class="cl"> v not:line 'quotes' .-' '---'
</span></span><span class="line"><span class="cl"> .-. .---+--------. / A || B *bold* | ^
</span></span><span class="line"><span class="cl"> | | | Not a dot | <---+---<-- A dash--is not a line v |
</span></span><span class="line"><span class="cl"> '-' '---------+--' / Nor/is this. ---
</span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
<p>てな感じにコード・ブロックで囲って <code>goat</code> キーワードを付ければ</p>
<div class="box">
<div class="goat svg-container ">
<svg
xmlns="http://www.w3.org/2000/svg"
font-family="Menlo,Lucida Console,monospace"
viewBox="0 0 752 393"
>
<g transform='translate(8,16)'>
<path d='M 0,0 L 160,0' fill='none' stroke='currentColor'></path>
<path d='M 568,0 L 600,0' fill='none' stroke='currentColor'></path>
<path d='M 184,16 L 208,16' fill='none' stroke='currentColor'></path>
<path d='M 280,16 L 304,16' fill='none' stroke='currentColor'></path>
<path d='M 232,32 L 256,32' fill='none' stroke='currentColor'></path>
<path d='M 472,32 L 496,32' fill='none' stroke='currentColor'></path>
<path d='M 0,48 L 160,48' fill='none' stroke='currentColor'></path>
<path d='M 536,64 L 568,64' fill='none' stroke='currentColor'></path>
<path d='M 568,64 L 584,64' fill='none' stroke='currentColor'></path>
<path d='M 24,80 L 160,80' fill='none' stroke='currentColor'></path>
<path d='M 192,80 L 240,80' fill='none' stroke='currentColor'></path>
<path d='M 288,80 L 376,80' fill='none' stroke='currentColor'></path>
<path d='M 456,80 L 520,80' fill='none' stroke='currentColor'></path>
<path d='M 192,112 L 200,112' fill='none' stroke='currentColor'></path>
<path d='M 232,112 L 240,112' fill='none' stroke='currentColor'></path>
<path d='M 464,112 L 488,112' fill='none' stroke='currentColor'></path>
<path d='M 488,112 L 512,112' fill='none' stroke='currentColor'></path>
<path d='M 568,112 L 584,112' fill='none' stroke='currentColor'></path>
<path d='M 584,112 L 600,112' fill='none' stroke='currentColor'></path>
<path d='M 664,112 L 736,112' fill='none' stroke='currentColor'></path>
<path d='M 8,128 L 32,128' fill='none' stroke='currentColor'></path>
<path d='M 32,128 L 136,128' fill='none' stroke='currentColor'></path>
<path d='M 136,128 L 144,128' fill='none' stroke='currentColor'></path>
<path d='M 184,128 L 192,128' fill='none' stroke='currentColor'></path>
<path d='M 264,128 L 328,128' fill='none' stroke='currentColor'></path>
<path d='M 328,128 L 400,128' fill='none' stroke='currentColor'></path>
<path d='M 232,144 L 248,144' fill='none' stroke='currentColor'></path>
<path d='M 456,144 L 520,144' fill='none' stroke='currentColor'></path>
<path d='M 648,144 L 664,144' fill='none' stroke='currentColor'></path>
<path d='M 664,144 L 720,144' fill='none' stroke='currentColor'></path>
<path d='M 40,160 L 128,160' fill='none' stroke='currentColor'></path>
<path d='M 128,176 L 152,176' fill='none' stroke='currentColor'></path>
<path d='M 224,176 L 248,176' fill='none' stroke='currentColor'></path>
<path d='M 288,176 L 384,176' fill='none' stroke='currentColor'></path>
<path d='M 504,176 L 528,176' fill='none' stroke='currentColor'></path>
<path d='M 576,176 L 600,176' fill='none' stroke='currentColor'></path>
<path d='M 8,192 L 160,192' fill='none' stroke='currentColor'></path>
<path d='M 304,192 L 368,192' fill='none' stroke='currentColor'></path>
<path d='M 384,192 L 408,192' fill='none' stroke='currentColor'></path>
<path d='M 160,208 L 192,208' fill='none' stroke='currentColor'></path>
<path d='M 248,208 L 280,208' fill='none' stroke='currentColor'></path>
<path d='M 304,224 L 368,224' fill='none' stroke='currentColor'></path>
<path d='M 392,224 L 408,224' fill='none' stroke='currentColor'></path>
<path d='M 8,240 L 160,240' fill='none' stroke='currentColor'></path>
<path d='M 208,240 L 232,240' fill='none' stroke='currentColor'></path>
<path d='M 288,240 L 312,240' fill='none' stroke='currentColor'></path>
<path d='M 312,240 L 384,240' fill='none' stroke='currentColor'></path>
<path d='M 440,240 L 464,240' fill='none' stroke='currentColor'></path>
<path d='M 480,240 L 504,240' fill='none' stroke='currentColor'></path>
<path d='M 688,240 L 696,240' fill='none' stroke='currentColor'></path>
<path d='M 32,256 L 64,256' fill='none' stroke='currentColor'></path>
<path d='M 64,256 L 112,256' fill='none' stroke='currentColor'></path>
<path d='M 536,256 L 552,256' fill='none' stroke='currentColor'></path>
<path d='M 112,288 L 152,288' fill='none' stroke='currentColor'></path>
<path d='M 216,288 L 232,288' fill='none' stroke='currentColor'></path>
<path d='M 232,288 L 248,288' fill='none' stroke='currentColor'></path>
<path d='M 440,288 L 464,288' fill='none' stroke='currentColor'></path>
<path d='M 480,288 L 504,288' fill='none' stroke='currentColor'></path>
<path d='M 536,288 L 544,288' fill='none' stroke='currentColor'></path>
<path d='M 568,288 L 584,288' fill='none' stroke='currentColor'></path>
<path d='M 688,288 L 720,288' fill='none' stroke='currentColor'></path>
<path d='M 8,304 L 32,304' fill='none' stroke='currentColor'></path>
<path d='M 32,304 L 64,304' fill='none' stroke='currentColor'></path>
<path d='M 64,304 L 112,304' fill='none' stroke='currentColor'></path>
<path d='M 688,320 L 720,320' fill='none' stroke='currentColor'></path>
<path d='M 152,336 L 176,336' fill='none' stroke='currentColor'></path>
<path d='M 176,336 L 240,336' fill='none' stroke='currentColor'></path>
<path d='M 312,352 L 344,352' fill='none' stroke='currentColor'></path>
<path d='M 344,352 L 376,352' fill='none' stroke='currentColor'></path>
<path d='M 376,352 L 392,352' fill='none' stroke='currentColor'></path>
<path d='M 152,368 L 224,368' fill='none' stroke='currentColor'></path>
<path d='M 224,368 L 240,368' fill='none' stroke='currentColor'></path>
<path d='M 624,368 L 640,368' fill='none' stroke='currentColor'></path>
<path d='M 160,24 L 184,24' fill='none' stroke='currentColor'></path>
<path d='M 208,24 L 232,24' fill='none' stroke='currentColor'></path>
<path d='M 256,24 L 280,24' fill='none' stroke='currentColor'></path>
<path d='M 0,0 L 0,48' fill='none' stroke='currentColor'></path>
<path d='M 8,96 L 8,128' fill='none' stroke='currentColor'></path>
<path d='M 8,192 L 8,240' fill='none' stroke='currentColor'></path>
<path d='M 32,128 L 32,176' fill='none' stroke='currentColor'></path>
<path d='M 32,256 L 32,304' fill='none' stroke='currentColor'></path>
<path d='M 64,256 L 64,304' fill='none' stroke='currentColor'></path>
<path d='M 112,256 L 112,288' fill='none' stroke='currentColor'></path>
<path d='M 112,288 L 112,304' fill='none' stroke='currentColor'></path>
<path d='M 136,128 L 136,160' fill='none' stroke='currentColor'></path>
<path d='M 160,0 L 160,48' fill='none' stroke='currentColor'></path>
<path d='M 160,80 L 160,112' fill='none' stroke='currentColor'></path>
<path d='M 160,192 L 160,208' fill='none' stroke='currentColor'></path>
<path d='M 160,208 L 160,240' fill='none' stroke='currentColor'></path>
<path d='M 168,144 L 168,160' fill='none' stroke='currentColor'></path>
<path d='M 176,288 L 176,320' fill='none' stroke='currentColor'></path>
<path d='M 176,320 L 176,336' fill='none' stroke='currentColor'></path>
<path d='M 208,144 L 208,160' fill='none' stroke='currentColor'></path>
<path d='M 232,272 L 232,288' fill='none' stroke='currentColor'></path>
<path d='M 232,288 L 232,304' fill='none' stroke='currentColor'></path>
<path d='M 288,176 L 288,240' fill='none' stroke='currentColor'></path>
<path d='M 304,192 L 304,224' fill='none' stroke='currentColor'></path>
<path d='M 312,240 L 312,272' fill='none' stroke='currentColor'></path>
<path d='M 328,128 L 328,160' fill='none' stroke='currentColor'></path>
<path d='M 344,256 L 344,272' fill='none' stroke='currentColor'></path>
<path d='M 368,192 L 368,224' fill='none' stroke='currentColor'></path>
<path d='M 384,0 L 384,32' fill='none' stroke='currentColor'></path>
<path d='M 384,176 L 384,192' fill='none' stroke='currentColor'></path>
<path d='M 384,192 L 384,240' fill='none' stroke='currentColor'></path>
<path d='M 440,240 L 440,288' fill='none' stroke='currentColor'></path>
<path d='M 456,80 L 456,144' fill='none' stroke='currentColor'></path>
<path d='M 464,240 L 464,288' fill='none' stroke='currentColor'></path>
<path d='M 472,328 L 472,344' fill='none' stroke='currentColor'></path>
<path d='M 480,240 L 480,288' fill='none' stroke='currentColor'></path>
<path d='M 480,328 L 480,344' fill='none' stroke='currentColor'></path>
<path d='M 488,96 L 488,112' fill='none' stroke='currentColor'></path>
<path d='M 488,112 L 488,128' fill='none' stroke='currentColor'></path>
<path d='M 504,240 L 504,288' fill='none' stroke='currentColor'></path>
<path d='M 520,80 L 520,144' fill='none' stroke='currentColor'></path>
<path d='M 552,224 L 552,256' fill='none' stroke='currentColor'></path>
<path d='M 568,0 L 568,48' fill='none' stroke='currentColor'></path>
<path d='M 568,80 L 568,112' fill='none' stroke='currentColor'></path>
<path d='M 584,64 L 584,96' fill='none' stroke='currentColor'></path>
<path d='M 584,128 L 584,144' fill='none' stroke='currentColor'></path>
<path d='M 600,0 L 600,112' fill='none' stroke='currentColor'></path>
<path d='M 600,256 L 600,272' fill='none' stroke='currentColor'></path>
<path d='M 632,336 L 632,352' fill='none' stroke='currentColor'></path>
<path d='M 664,144 L 664,176' fill='none' stroke='currentColor'></path>
<path d='M 664,176 L 664,192' fill='none' stroke='currentColor'></path>
<path d='M 664,288 L 664,304' fill='none' stroke='currentColor'></path>
<path d='M 688,288 L 688,320' fill='none' stroke='currentColor'></path>
<path d='M 704,336 L 704,352' fill='none' stroke='currentColor'></path>
<path d='M 712,160 L 712,224' fill='none' stroke='currentColor'></path>
<path d='M 720,288 L 720,320' fill='none' stroke='currentColor'></path>
<path d='M 264,128 L 288,80' fill='none' stroke='currentColor'></path>
<path d='M 232,240 L 248,208' fill='none' stroke='currentColor'></path>
<path d='M 224,304 L 232,288' fill='none' stroke='currentColor'></path>
<path d='M 232,288 L 240,272' fill='none' stroke='currentColor'></path>
<path d='M 336,368 L 344,352' fill='none' stroke='currentColor'></path>
<path d='M 344,352 L 352,336' fill='none' stroke='currentColor'></path>
<path d='M 480,288 L 504,240' fill='none' stroke='currentColor'></path>
<path d='M 552,224 L 576,176' fill='none' stroke='currentColor'></path>
<path d='M 648,144 L 664,112' fill='none' stroke='currentColor'></path>
<path d='M 640,240 L 664,192' fill='none' stroke='currentColor'></path>
<path d='M 720,144 L 736,112' fill='none' stroke='currentColor'></path>
<path d='M 664,288 L 688,240' fill='none' stroke='currentColor'></path>
<path d='M 192,208 L 208,240' fill='none' stroke='currentColor'></path>
<path d='M 224,272 L 232,288' fill='none' stroke='currentColor'></path>
<path d='M 232,288 L 240,304' fill='none' stroke='currentColor'></path>
<path d='M 440,240 L 464,288' fill='none' stroke='currentColor'></path>
<path d='M 376,80 L 400,128' fill='none' stroke='currentColor'></path>
<path d='M 552,256 L 568,288' fill='none' stroke='currentColor'></path>
<path d='M 528,176 L 552,224' fill='none' stroke='currentColor'></path>
<path d='M 640,240 L 664,288' fill='none' stroke='currentColor'></path>
<path d='M 664,192 L 688,240' fill='none' stroke='currentColor'></path>
<path d='M 136,160 L 136,168' fill='none' stroke='currentColor'></path>
<path d='M 184,16 L 184,24' fill='none' stroke='currentColor'></path>
<path d='M 208,16 L 208,24' fill='none' stroke='currentColor'></path>
<path d='M 232,24 L 232,32' fill='none' stroke='currentColor'></path>
<path d='M 256,24 L 256,32' fill='none' stroke='currentColor'></path>
<path d='M 280,16 L 280,24' fill='none' stroke='currentColor'></path>
<path d='M 488,88 L 488,96' fill='none' stroke='currentColor'></path>
<path d='M 488,128 L 488,136' fill='none' stroke='currentColor'></path>
<polygon points='16.000000,304.000000 4.000000,298.399994 4.000000,309.600006' fill='currentColor' transform='rotate(180.000000, 8.000000, 304.000000)'></polygon>
<polygon points='48.000000,160.000000 36.000000,154.399994 36.000000,165.600006' fill='currentColor' transform='rotate(180.000000, 40.000000, 160.000000)'></polygon>
<polygon points='136.000000,160.000000 124.000000,154.399994 124.000000,165.600006' fill='currentColor' transform='rotate(0.000000, 128.000000, 160.000000)'></polygon>
<polygon points='136.000000,176.000000 124.000000,170.399994 124.000000,181.600006' fill='currentColor' transform='rotate(180.000000, 128.000000, 176.000000)'></polygon>
<polygon points='160.000000,288.000000 148.000000,282.399994 148.000000,293.600006' fill='currentColor' transform='rotate(0.000000, 152.000000, 288.000000)'></polygon>
<path d='M 176,320 L 176,328' fill='none' stroke='currentColor'></path>
<polygon points='192.000000,320.000000 180.000000,314.399994 180.000000,325.600006' fill='currentColor' transform='rotate(90.000000, 176.000000, 320.000000)'></polygon>
<polygon points='288.000000,208.000000 276.000000,202.399994 276.000000,213.600006' fill='currentColor' transform='rotate(0.000000, 280.000000, 208.000000)'></polygon>
<polygon points='312.000000,16.000000 300.000000,10.400000 300.000000,21.600000' fill='currentColor' transform='rotate(0.000000, 304.000000, 16.000000)'></polygon>
<polygon points='320.000000,352.000000 308.000000,346.399994 308.000000,357.600006' fill='currentColor' transform='rotate(180.000000, 312.000000, 352.000000)'></polygon>
<path d='M 328,160 L 328,168' fill='none' stroke='currentColor'></path>
<polygon points='344.000000,160.000000 332.000000,154.399994 332.000000,165.600006' fill='currentColor' transform='rotate(90.000000, 328.000000, 160.000000)'></polygon>
<path d='M 344,248 L 344,256' fill='none' stroke='currentColor'></path>
<polygon points='360.000000,256.000000 348.000000,250.399994 348.000000,261.600006' fill='currentColor' transform='rotate(270.000000, 344.000000, 256.000000)'></polygon>
<polygon points='384.000000,352.000000 372.000000,346.399994 372.000000,357.600006' fill='currentColor' transform='rotate(180.000000, 376.000000, 352.000000)'></polygon>
<polygon points='392.000000,0.000000 380.000000,-5.600000 380.000000,5.600000' fill='currentColor' transform='rotate(270.000000, 384.000000, 0.000000)'></polygon>
<polygon points='392.000000,32.000000 380.000000,26.400000 380.000000,37.599998' fill='currentColor' transform='rotate(90.000000, 384.000000, 32.000000)'></polygon>
<polygon points='400.000000,224.000000 388.000000,218.399994 388.000000,229.600006' fill='currentColor' transform='rotate(180.000000, 392.000000, 224.000000)'></polygon>
<polygon points='480.000000,32.000000 468.000000,26.400000 468.000000,37.599998' fill='currentColor' transform='rotate(180.000000, 472.000000, 32.000000)'></polygon>
<path d='M 632,352 L 632,360' fill='none' stroke='currentColor'></path>
<polygon points='648.000000,352.000000 636.000000,346.399994 636.000000,357.600006' fill='currentColor' transform='rotate(90.000000, 632.000000, 352.000000)'></polygon>
<path d='M 664,176 L 664,184' fill='none' stroke='currentColor'></path>
<polygon points='680.000000,176.000000 668.000000,170.399994 668.000000,181.600006' fill='currentColor' transform='rotate(90.000000, 664.000000, 176.000000)'></polygon>
<path d='M 704,328 L 704,336' fill='none' stroke='currentColor'></path>
<polygon points='720.000000,336.000000 708.000000,330.399994 708.000000,341.600006' fill='currentColor' transform='rotate(270.000000, 704.000000, 336.000000)'></polygon>
<path d='M 712,152 L 712,160' fill='none' stroke='currentColor'></path>
<polygon points='728.000000,160.000000 716.000000,154.399994 716.000000,165.600006' fill='currentColor' transform='rotate(270.000000, 712.000000, 160.000000)'></polygon>
<path d='M 448,16 A 16,16 0 0,0 432,32' fill='none' stroke='currentColor'></path>
<path d='M 448,16 A 16,16 0 0,1 464,32' fill='none' stroke='currentColor'></path>
<path d='M 432,32 A 16,16 0 0,0 448,48' fill='none' stroke='currentColor'></path>
<path d='M 464,32 A 16,16 0 0,1 448,48' fill='none' stroke='currentColor'></path>
<path d='M 24,80 A 16,16 0 0,0 8,96' fill='none' stroke='currentColor'></path>
<path d='M 192,80 A 16,16 0 0,0 176,96' fill='none' stroke='currentColor'></path>
<path d='M 240,80 A 16,16 0 0,1 256,96' fill='none' stroke='currentColor'></path>
<path d='M 176,96 A 16,16 0 0,0 192,112' fill='none' stroke='currentColor'></path>
<path d='M 200,112 A 16,16 0 0,1 216,128' fill='none' stroke='currentColor'></path>
<path d='M 232,112 A 16,16 0 0,0 216,128' fill='none' stroke='currentColor'></path>
<path d='M 256,96 A 16,16 0 0,1 240,112' fill='none' stroke='currentColor'></path>
<path d='M 160,112 A 16,16 0 0,1 144,128' fill='none' stroke='currentColor'></path>
<path d='M 184,128 A 16,16 0 0,0 168,144' fill='none' stroke='currentColor'></path>
<path d='M 192,128 A 16,16 0 0,1 208,144' fill='none' stroke='currentColor'></path>
<path d='M 216,128 A 16,16 0 0,0 232,144' fill='none' stroke='currentColor'></path>
<path d='M 248,144 A 16,16 0 0,1 264,160' fill='none' stroke='currentColor'></path>
<path d='M 168,160 A 16,16 0 0,1 152,176' fill='none' stroke='currentColor'></path>
<path d='M 208,160 A 16,16 0 0,0 224,176' fill='none' stroke='currentColor'></path>
<path d='M 264,160 A 16,16 0 0,1 248,176' fill='none' stroke='currentColor'></path>
<path d='M 408,192 A 16,16 0 0,1 424,208' fill='none' stroke='currentColor'></path>
<path d='M 424,208 A 16,16 0 0,1 408,224' fill='none' stroke='currentColor'></path>
<path d='M 584,240 A 16,16 0 0,0 568,256' fill='none' stroke='currentColor'></path>
<path d='M 584,240 A 16,16 0 0,1 600,256' fill='none' stroke='currentColor'></path>
<path d='M 712,224 A 16,16 0 0,1 696,240' fill='none' stroke='currentColor'></path>
<path d='M 536,256 A 16,16 0 0,0 520,272' fill='none' stroke='currentColor'></path>
<path d='M 312,272 A 16,16 0 0,0 328,288' fill='none' stroke='currentColor'></path>
<path d='M 344,272 A 16,16 0 0,1 328,288' fill='none' stroke='currentColor'></path>
<path d='M 520,272 A 16,16 0 0,0 536,288' fill='none' stroke='currentColor'></path>
<path d='M 600,272 A 16,16 0 0,1 584,288' fill='none' stroke='currentColor'></path>
<path d='M 648,320 A 16,16 0 0,0 632,336' fill='none' stroke='currentColor'></path>
<path d='M 664,304 A 16,16 0 0,1 648,320' fill='none' stroke='currentColor'></path>
<path d='M 24,336 A 16,16 0 0,0 8,352' fill='none' stroke='currentColor'></path>
<path d='M 24,336 A 16,16 0 0,1 40,352' fill='none' stroke='currentColor'></path>
<path d='M 152,336 A 16,16 0 0,0 136,352' fill='none' stroke='currentColor'></path>
<path d='M 240,336 A 16,16 0 0,1 256,352' fill='none' stroke='currentColor'></path>
<path d='M 8,352 A 16,16 0 0,0 24,368' fill='none' stroke='currentColor'></path>
<path d='M 40,352 A 16,16 0 0,1 24,368' fill='none' stroke='currentColor'></path>
<path d='M 136,352 A 16,16 0 0,0 152,368' fill='none' stroke='currentColor'></path>
<path d='M 256,352 A 16,16 0 0,1 240,368' fill='none' stroke='currentColor'></path>
<circle cx='176' cy='288' r='6' stroke='currentColor' fill='#fff'></circle>
<circle cx='232' cy='288' r='6' stroke='currentColor' fill='#fff'></circle>
<circle cx='448' cy='32' r='6' stroke='currentColor' fill='currentColor'></circle>
<circle cx='536' cy='64' r='6' stroke='currentColor' fill='currentColor'></circle>
<path d='M 568,48 L 568,56' fill='none' stroke='currentColor'></path>
<path d='M 568,72 L 568,80' fill='none' stroke='currentColor'></path>
<path d='M 568,56 A 9,9 0 0,0 568,72' fill='none' stroke='currentColor'></path>
<path d='M 584,96 L 584,104' fill='none' stroke='currentColor'></path>
<path d='M 584,120 L 584,128' fill='none' stroke='currentColor'></path>
<path d='M 584,104 A 9,9 0 0,1 584,120' fill='none' stroke='currentColor'></path>
<text text-anchor='middle' x='24' y='116' fill='currentColor' style='font-size:1em'>&</text>
<text text-anchor='middle' x='40' y='20' fill='currentColor' style='font-size:1em'>A</text>
<text text-anchor='middle' x='40' y='100' fill='currentColor' style='font-size:1em'>M</text>
<text text-anchor='middle' x='40' y='116' fill='currentColor' style='font-size:1em'>S</text>
<text text-anchor='middle' x='40' y='212' fill='currentColor' style='font-size:1em'>i</text>
<text text-anchor='middle' x='40' y='228' fill='currentColor' style='font-size:1em'>o</text>
<text text-anchor='middle' x='48' y='100' fill='currentColor' style='font-size:1em'>i</text>
<text text-anchor='middle' x='48' y='116' fill='currentColor' style='font-size:1em'>q</text>
<text text-anchor='middle' x='48' y='212' fill='currentColor' style='font-size:1em'>f</text>
<text text-anchor='middle' x='48' y='228' fill='currentColor' style='font-size:1em'>b</text>
<text text-anchor='middle' x='56' y='20' fill='currentColor' style='font-size:1em'>B</text>
<text text-anchor='middle' x='56' y='100' fill='currentColor' style='font-size:1em'>x</text>
<text text-anchor='middle' x='56' y='116' fill='currentColor' style='font-size:1em'>u</text>
<text text-anchor='middle' x='56' y='228' fill='currentColor' style='font-size:1em'>j</text>
<text text-anchor='middle' x='64' y='20' fill='currentColor' style='font-size:1em'>o</text>
<text text-anchor='middle' x='64' y='100' fill='currentColor' style='font-size:1em'>e</text>
<text text-anchor='middle' x='64' y='116' fill='currentColor' style='font-size:1em'>a</text>
<text text-anchor='middle' x='64' y='212' fill='currentColor' style='font-size:1em'>(</text>
<text text-anchor='middle' x='64' y='228' fill='currentColor' style='font-size:1em'>-</text>
<text text-anchor='middle' x='72' y='20' fill='currentColor' style='font-size:1em'>x</text>
<text text-anchor='middle' x='72' y='100' fill='currentColor' style='font-size:1em'>d</text>
<text text-anchor='middle' x='72' y='116' fill='currentColor' style='font-size:1em'>r</text>
<text text-anchor='middle' x='72' y='212' fill='currentColor' style='font-size:1em'>a</text>
<text text-anchor='middle' x='72' y='228' fill='currentColor' style='font-size:1em'>></text>
<text text-anchor='middle' x='80' y='116' fill='currentColor' style='font-size:1em'>e</text>
<text text-anchor='middle' x='80' y='228' fill='currentColor' style='font-size:1em'>f</text>
<text text-anchor='middle' x='88' y='100' fill='currentColor' style='font-size:1em'>R</text>
<text text-anchor='middle' x='88' y='212' fill='currentColor' style='font-size:1em'>></text>
<text text-anchor='middle' x='88' y='228' fill='currentColor' style='font-size:1em'>c</text>
<text text-anchor='middle' x='96' y='100' fill='currentColor' style='font-size:1em'>o</text>
<text text-anchor='middle' x='96' y='116' fill='currentColor' style='font-size:1em'>C</text>
<text text-anchor='middle' x='96' y='228' fill='currentColor' style='font-size:1em'>n</text>
<text text-anchor='middle' x='104' y='100' fill='currentColor' style='font-size:1em'>u</text>
<text text-anchor='middle' x='104' y='116' fill='currentColor' style='font-size:1em'>o</text>
<text text-anchor='middle' x='104' y='212' fill='currentColor' style='font-size:1em'>b</text>
<text text-anchor='middle' x='104' y='228' fill='currentColor' style='font-size:1em'>(</text>
<text text-anchor='middle' x='112' y='100' fill='currentColor' style='font-size:1em'>n</text>
<text text-anchor='middle' x='112' y='116' fill='currentColor' style='font-size:1em'>r</text>
<text text-anchor='middle' x='112' y='212' fill='currentColor' style='font-size:1em'>)</text>
<text text-anchor='middle' x='112' y='228' fill='currentColor' style='font-size:1em'>)</text>
<text text-anchor='middle' x='120' y='100' fill='currentColor' style='font-size:1em'>d</text>
<text text-anchor='middle' x='120' y='116' fill='currentColor' style='font-size:1em'>n</text>
<text text-anchor='middle' x='128' y='100' fill='currentColor' style='font-size:1em'>e</text>
<text text-anchor='middle' x='128' y='116' fill='currentColor' style='font-size:1em'>e</text>
<text text-anchor='middle' x='128' y='276' fill='currentColor' style='font-size:1em'>J</text>
<text text-anchor='middle' x='136' y='100' fill='currentColor' style='font-size:1em'>d</text>
<text text-anchor='middle' x='136' y='116' fill='currentColor' style='font-size:1em'>r</text>
<text text-anchor='middle' x='136' y='276' fill='currentColor' style='font-size:1em'>o</text>
<text text-anchor='middle' x='144' y='116' fill='currentColor' style='font-size:1em'>s</text>
<text text-anchor='middle' x='144' y='276' fill='currentColor' style='font-size:1em'>i</text>
<text text-anchor='middle' x='152' y='276' fill='currentColor' style='font-size:1em'>n</text>
<text text-anchor='middle' x='168' y='356' fill='currentColor' style='font-size:1em'>N</text>
<text text-anchor='middle' x='176' y='356' fill='currentColor' style='font-size:1em'>o</text>
<text text-anchor='middle' x='184' y='68' fill='currentColor' style='font-size:1em'>R</text>
<text text-anchor='middle' x='184' y='196' fill='currentColor' style='font-size:1em'>D</text>
<text text-anchor='middle' x='184' y='356' fill='currentColor' style='font-size:1em'>t</text>
<text text-anchor='middle' x='192' y='68' fill='currentColor' style='font-size:1em'>o</text>
<text text-anchor='middle' x='192' y='196' fill='currentColor' style='font-size:1em'>i</text>
<text text-anchor='middle' x='200' y='68' fill='currentColor' style='font-size:1em'>u</text>
<text text-anchor='middle' x='200' y='196' fill='currentColor' style='font-size:1em'>a</text>
<text text-anchor='middle' x='200' y='356' fill='currentColor' style='font-size:1em'>a</text>
<text text-anchor='middle' x='208' y='68' fill='currentColor' style='font-size:1em'>n</text>
<text text-anchor='middle' x='208' y='196' fill='currentColor' style='font-size:1em'>g</text>
<text text-anchor='middle' x='216' y='68' fill='currentColor' style='font-size:1em'>d</text>
<text text-anchor='middle' x='216' y='356' fill='currentColor' style='font-size:1em'>d</text>
<text text-anchor='middle' x='224' y='196' fill='currentColor' style='font-size:1em'>l</text>
<text text-anchor='middle' x='224' y='356' fill='currentColor' style='font-size:1em'>o</text>
<text text-anchor='middle' x='232' y='196' fill='currentColor' style='font-size:1em'>i</text>
<text text-anchor='middle' x='232' y='356' fill='currentColor' style='font-size:1em'>t</text>
<text text-anchor='middle' x='240' y='196' fill='currentColor' style='font-size:1em'>n</text>
<text text-anchor='middle' x='248' y='196' fill='currentColor' style='font-size:1em'>e</text>
<text text-anchor='middle' x='296' y='100' fill='currentColor' style='font-size:1em'>D</text>
<text text-anchor='middle' x='304' y='100' fill='currentColor' style='font-size:1em'>i</text>
<text text-anchor='middle' x='312' y='100' fill='currentColor' style='font-size:1em'>a</text>
<text text-anchor='middle' x='320' y='100' fill='currentColor' style='font-size:1em'>g</text>
<text text-anchor='middle' x='328' y='100' fill='currentColor' style='font-size:1em'>o</text>
<text text-anchor='middle' x='336' y='100' fill='currentColor' style='font-size:1em'>n</text>
<text text-anchor='middle' x='344' y='100' fill='currentColor' style='font-size:1em'>a</text>
<text text-anchor='middle' x='352' y='100' fill='currentColor' style='font-size:1em'>l</text>
<text text-anchor='middle' x='360' y='100' fill='currentColor' style='font-size:1em'>s</text>
<text text-anchor='middle' x='360' y='276' fill='currentColor' style='font-size:1em'>C</text>
<text text-anchor='middle' x='360' y='292' fill='currentColor' style='font-size:1em'>V</text>
<text text-anchor='middle' x='368' y='276' fill='currentColor' style='font-size:1em'>u</text>
<text text-anchor='middle' x='368' y='292' fill='currentColor' style='font-size:1em'>e</text>
<text text-anchor='middle' x='376' y='276' fill='currentColor' style='font-size:1em'>r</text>
<text text-anchor='middle' x='376' y='292' fill='currentColor' style='font-size:1em'>r</text>
<text text-anchor='middle' x='384' y='276' fill='currentColor' style='font-size:1em'>v</text>
<text text-anchor='middle' x='384' y='292' fill='currentColor' style='font-size:1em'>t</text>
<text text-anchor='middle' x='392' y='276' fill='currentColor' style='font-size:1em'>e</text>
<text text-anchor='middle' x='392' y='292' fill='currentColor' style='font-size:1em'>i</text>
<text text-anchor='middle' x='400' y='276' fill='currentColor' style='font-size:1em'>d</text>
<text text-anchor='middle' x='400' y='292' fill='currentColor' style='font-size:1em'>c</text>
<text text-anchor='middle' x='408' y='292' fill='currentColor' style='font-size:1em'>a</text>
<text text-anchor='middle' x='416' y='292' fill='currentColor' style='font-size:1em'>l</text>
<text text-anchor='middle' x='416' y='324' fill='currentColor' style='font-size:1em'>n</text>
<text text-anchor='middle' x='424' y='324' fill='currentColor' style='font-size:1em'>o</text>
<text text-anchor='middle' x='432' y='324' fill='currentColor' style='font-size:1em'>t</text>
<text text-anchor='middle' x='432' y='356' fill='currentColor' style='font-size:1em'>A</text>
<text text-anchor='middle' x='432' y='372' fill='currentColor' style='font-size:1em'>N</text>
<text text-anchor='middle' x='440' y='212' fill='currentColor' style='font-size:1em'>C</text>
<text text-anchor='middle' x='440' y='324' fill='currentColor' style='font-size:1em'>:</text>
<text text-anchor='middle' x='440' y='372' fill='currentColor' style='font-size:1em'>o</text>
<text text-anchor='middle' x='448' y='212' fill='currentColor' style='font-size:1em'>u</text>
<text text-anchor='middle' x='448' y='324' fill='currentColor' style='font-size:1em'>l</text>
<text text-anchor='middle' x='448' y='356' fill='currentColor' style='font-size:1em'>d</text>
<text text-anchor='middle' x='448' y='372' fill='currentColor' style='font-size:1em'>r</text>
<text text-anchor='middle' x='456' y='212' fill='currentColor' style='font-size:1em'>r</text>
<text text-anchor='middle' x='456' y='324' fill='currentColor' style='font-size:1em'>i</text>
<text text-anchor='middle' x='456' y='340' fill='currentColor' style='font-size:1em'>A</text>
<text text-anchor='middle' x='456' y='356' fill='currentColor' style='font-size:1em'>a</text>
<text text-anchor='middle' x='456' y='372' fill='currentColor' style='font-size:1em'>/</text>
<text text-anchor='middle' x='464' y='164' fill='currentColor' style='font-size:1em'>I</text>
<text text-anchor='middle' x='464' y='212' fill='currentColor' style='font-size:1em'>v</text>
<text text-anchor='middle' x='464' y='324' fill='currentColor' style='font-size:1em'>n</text>
<text text-anchor='middle' x='464' y='356' fill='currentColor' style='font-size:1em'>s</text>
<text text-anchor='middle' x='464' y='372' fill='currentColor' style='font-size:1em'>i</text>
<text text-anchor='middle' x='472' y='164' fill='currentColor' style='font-size:1em'>n</text>
<text text-anchor='middle' x='472' y='212' fill='currentColor' style='font-size:1em'>e</text>
<text text-anchor='middle' x='472' y='324' fill='currentColor' style='font-size:1em'>e</text>
<text text-anchor='middle' x='472' y='356' fill='currentColor' style='font-size:1em'>h</text>
<text text-anchor='middle' x='472' y='372' fill='currentColor' style='font-size:1em'>s</text>
<text text-anchor='middle' x='480' y='164' fill='currentColor' style='font-size:1em'>t</text>
<text text-anchor='middle' x='480' y='212' fill='currentColor' style='font-size:1em'>d</text>
<text text-anchor='middle' x='480' y='356' fill='currentColor' style='font-size:1em'>-</text>
<text text-anchor='middle' x='488' y='164' fill='currentColor' style='font-size:1em'>e</text>
<text text-anchor='middle' x='488' y='356' fill='currentColor' style='font-size:1em'>-</text>
<text text-anchor='middle' x='488' y='372' fill='currentColor' style='font-size:1em'>t</text>
<text text-anchor='middle' x='496' y='164' fill='currentColor' style='font-size:1em'>r</text>
<text text-anchor='middle' x='496' y='212' fill='currentColor' style='font-size:1em'>l</text>
<text text-anchor='middle' x='496' y='340' fill='currentColor' style='font-size:1em'>B</text>
<text text-anchor='middle' x='496' y='356' fill='currentColor' style='font-size:1em'>i</text>
<text text-anchor='middle' x='496' y='372' fill='currentColor' style='font-size:1em'>h</text>
<text text-anchor='middle' x='504' y='164' fill='currentColor' style='font-size:1em'>i</text>
<text text-anchor='middle' x='504' y='212' fill='currentColor' style='font-size:1em'>i</text>
<text text-anchor='middle' x='504' y='356' fill='currentColor' style='font-size:1em'>s</text>
<text text-anchor='middle' x='504' y='372' fill='currentColor' style='font-size:1em'>i</text>
<text text-anchor='middle' x='512' y='164' fill='currentColor' style='font-size:1em'>o</text>
<text text-anchor='middle' x='512' y='212' fill='currentColor' style='font-size:1em'>n</text>
<text text-anchor='middle' x='512' y='324' fill='currentColor' style='font-size:1em'>'</text>
<text text-anchor='middle' x='512' y='372' fill='currentColor' style='font-size:1em'>s</text>
<text text-anchor='middle' x='520' y='164' fill='currentColor' style='font-size:1em'>r</text>
<text text-anchor='middle' x='520' y='212' fill='currentColor' style='font-size:1em'>e</text>
<text text-anchor='middle' x='520' y='324' fill='currentColor' style='font-size:1em'>q</text>
<text text-anchor='middle' x='520' y='356' fill='currentColor' style='font-size:1em'>n</text>
<text text-anchor='middle' x='520' y='372' fill='currentColor' style='font-size:1em'>.</text>
<text text-anchor='middle' x='528' y='324' fill='currentColor' style='font-size:1em'>u</text>
<text text-anchor='middle' x='528' y='340' fill='currentColor' style='font-size:1em'>*</text>
<text text-anchor='middle' x='528' y='356' fill='currentColor' style='font-size:1em'>o</text>
<text text-anchor='middle' x='536' y='324' fill='currentColor' style='font-size:1em'>o</text>
<text text-anchor='middle' x='536' y='340' fill='currentColor' style='font-size:1em'>b</text>
<text text-anchor='middle' x='536' y='356' fill='currentColor' style='font-size:1em'>t</text>
<text text-anchor='middle' x='544' y='324' fill='currentColor' style='font-size:1em'>t</text>
<text text-anchor='middle' x='544' y='340' fill='currentColor' style='font-size:1em'>o</text>
<text text-anchor='middle' x='552' y='324' fill='currentColor' style='font-size:1em'>e</text>
<text text-anchor='middle' x='552' y='340' fill='currentColor' style='font-size:1em'>l</text>
<text text-anchor='middle' x='552' y='356' fill='currentColor' style='font-size:1em'>a</text>
<text text-anchor='middle' x='560' y='324' fill='currentColor' style='font-size:1em'>s</text>
<text text-anchor='middle' x='560' y='340' fill='currentColor' style='font-size:1em'>d</text>
<text text-anchor='middle' x='568' y='324' fill='currentColor' style='font-size:1em'>'</text>
<text text-anchor='middle' x='568' y='340' fill='currentColor' style='font-size:1em'>*</text>
<text text-anchor='middle' x='568' y='356' fill='currentColor' style='font-size:1em'>l</text>
<text text-anchor='middle' x='576' y='356' fill='currentColor' style='font-size:1em'>i</text>
<text text-anchor='middle' x='584' y='356' fill='currentColor' style='font-size:1em'>n</text>
<text text-anchor='middle' x='592' y='356' fill='currentColor' style='font-size:1em'>e</text>
<text text-anchor='middle' x='648' y='244' fill='currentColor' style='font-size:1em'>D</text>
<text text-anchor='middle' x='656' y='244' fill='currentColor' style='font-size:1em'>o</text>
<text text-anchor='middle' x='664' y='244' fill='currentColor' style='font-size:1em'>n</text>
<text text-anchor='middle' x='672' y='132' fill='currentColor' style='font-size:1em'>S</text>
<text text-anchor='middle' x='672' y='244' fill='currentColor' style='font-size:1em'>e</text>
<text text-anchor='middle' x='680' y='132' fill='currentColor' style='font-size:1em'>e</text>
<text text-anchor='middle' x='680' y='244' fill='currentColor' style='font-size:1em'>?</text>
<text text-anchor='middle' x='688' y='132' fill='currentColor' style='font-size:1em'>a</text>
<text text-anchor='middle' x='696' y='132' fill='currentColor' style='font-size:1em'>r</text>
<text text-anchor='middle' x='704' y='132' fill='currentColor' style='font-size:1em'>c</text>
<text text-anchor='middle' x='704' y='308' fill='currentColor' style='font-size:1em'>3</text>
<text text-anchor='middle' x='712' y='132' fill='currentColor' style='font-size:1em'>h</text>
</g>
</svg>
</div>
</div>
<p>と SVG 画像に変換してくれる。
ページのスタイルに合わせてくれるのも嬉しい。</p>
<p>また <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> のレンダー・フックを使って <a href="https://mermaid-js.github.io/mermaid/" title="mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">Mermaid</a> にも対応できる。</p>
<p>まず,各 Web ページの <code><body></code> 要素内にあらかじめ</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> ...
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">script</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="nx">mermaid</span><span class="p">.</span><span class="nx">initialize</span><span class="p">({</span><span class="nx">startOnLoad</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">fontFamily</span><span class="o">:</span> <span class="s2">"sans-serif"</span><span class="p">,</span> <span class="nx">theme</span><span class="o">:</span> <span class="s2">"dark"</span><span class="p">,</span> <span class="nx">sequence</span><span class="o">:</span> <span class="p">{</span><span class="nx">height</span><span class="o">:</span> <span class="mi">40</span><span class="p">,</span> <span class="nx">mirrorActors</span><span class="o">:</span> <span class="kc">false</span><span class="p">}});</span>
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">script</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span></code></pre></div><p>と記述し <a href="https://mermaid-js.github.io/mermaid/" title="mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">Mermaid</a> を有効にしておくこと。
次に <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> 環境の <code>layouts/_default/_markup/</code> フォルダ(ない場合は作成)に <code>render-codeblock-mermaid.html</code> というファイルを作って</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mermaid"</span><span class="p">></span>
</span></span><span class="line"><span class="cl">{{- .Inner | safeHTML }}
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span></code></pre></div><p>と定義しておく。
これでコード・ブロックを使って</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">```mermaid
</span></span><span class="line"><span class="cl">sequenceDiagram
</span></span><span class="line"><span class="cl"> カバ->>+カバン: あなた,泳げまして?
</span></span><span class="line"><span class="cl"> カバン-->>-カバ: いえ
</span></span><span class="line"><span class="cl"> カバ->>+カバン: 空は飛べるんですの?
</span></span><span class="line"><span class="cl"> カバン-->>-カバ: いえ
</span></span><span class="line"><span class="cl"> カバ->>+カバン: じゃあ,足が速いとか?
</span></span><span class="line"><span class="cl"> カバン-->>-カバ: いえ
</span></span><span class="line"><span class="cl"> カバ->>カバン: あなた,何にもできないのねぇ
</span></span><span class="line"><span class="cl"> loop
</span></span><span class="line"><span class="cl"> カバン->>カバン: ううっ
</span></span><span class="line"><span class="cl"> end
</span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
<p>などと記述すれば</p>
<div class="box"><div class="mermaid">
sequenceDiagram
カバ->>+カバン: あなた,泳げまして?
カバン-->>-カバ: いえ
カバ->>+カバン: 空は飛べるんですの?
カバン-->>-カバ: いえ
カバ->>+カバン: じゃあ,足が速いとか?
カバン-->>-カバ: いえ
カバ->>カバン: あなた,何にもできないのねぇ
loop
カバン->>カバン: ううっ
end
</div></div>
<p>と展開される。
<a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> ドキュメントの <a href="https://gohugo.io/content-management/diagrams/" title="Diagrams | Hugo">Diagrams</a> の項にもう少し賢い記述が載ってるので参考にどうぞ。</p>
<p><a href="https://mermaid-js.github.io/mermaid/" title="mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">Mermaid</a> 記法は自作の shortcode で対応していたが,コード・ブロックで書けるなら今後はそっちにするかな。</p>
<h2>ブックマーク</h2>
<ul>
<li><a href="https://github.com/gohugoio/hugo/releases/tag/v0.93.1">Release v0.93.1 · gohugoio/hugo · GitHub</a></li>
<li><a href="https://github.com/gohugoio/hugo/releases/tag/v0.93.2">Release v0.93.2 · gohugoio/hugo · GitHub</a></li>
</ul>
そうだ,シーケンス図を描こう! (一応クラス図も描けるよ)
tag:text.Baldanders.info,2017-09-21:/remark/2017/09/sequence-diagram/
2017-09-21T07:54:32+00:00
2022-04-10T04:54:10+00:00
久しぶりに本ブログをいじくって mermaid でシーケンス図を描けるようにしてみる。
Spiegel
https://baldanders.info/profile/
<p>久しぶりに<a href="https://text.baldanders.info/" title="text.Baldanders.info">本ブログ</a>をいじくって <a href="https://mermaidjs.github.io/">mermaid</a> でシーケンス図を描けるようにしてみる。</p>
<h2>シーケンス図とは</h2>
<p>一応説明しておくと,シーケンス図というのは複数の「もの」の間でのやり取りを時系列で表現したものである。
「もの」は相互作用するものなら何でもよく,以下のような会話も表現できる。</p>
<figure style='margin:0 auto;text-align:center;'>
<div class="mermaid">
sequenceDiagram
カバ->>+カバン: あなた,泳げまして?
カバン-->>-カバ: いえ
カバ->>+カバン: 空は飛べるんですの?
カバン-->>-カバ: いえ
カバ->>+カバン: じゃあ,足が速いとか?
カバン-->>-カバ: いえ
カバ->>カバン: あなた,何にもできないのねぇ
loop ひとりヘコむ
カバン->>カバン: ううっ
end
</div>
<figcaption><div>カバとカバン</div></figcaption>
</figure>
<p>縦のラインを「ライフライン<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>」と呼び(上から下に時間が流れる),横向きの矢印を「メッセージ」と呼ぶ。
“loop” で囲まれている部分は「複合フラグメント」と呼ばれるもので,シーケンス内の処理のかたまりを指す。
“loop” は文字通り繰り返し処理のこと。
カバンはカバに「何もできない」と言われて悶々としてしまったわけですね(笑)</p>
<p>シーケンス図はオブジェクト指向設計ではとても重宝されている。
クラス間の相互作用を記述するだけじゃなくて,要件定義で「登場人物(人間とは限らない)」の関係を記述するのにも使われる(もちろん UML で使われる図はシーケンス図だけじゃないけどね)。</p>
<p>ただ,これを手描きで作図するのは結構面倒くさい(図を描きながら試行錯誤するし)。
企業向けなら <a href="http://astah.change-vision.com/" title="astah システム設計、ソフトウェア開発支援ツール | Astah">Astah*</a> のような開発支援ツールを使う手もあるけれど,個人では手にあまるものだし,どうせ描くならテキスト入力でサクッとやりたいよね。</p>
<h2>Mermaid 記法と mermaid.js</h2>
<p>そうした需要に応えてくれるのが <a href="https://mermaidjs.github.io/">mermaid</a> である。</p>
<ul>
<li><a href="https://mermaidjs.github.io/">mermaid</a></li>
<li><a href="https://github.com/knsv/mermaid">knsv/mermaid: Generation of diagram and flowchart from text in a similar manner as markdown</a> : こちらのドキュメントのほうが詳しい</li>
</ul>
<p>たとえば,先程の「カバとカバン」のやり取りは <a href="https://mermaidjs.github.io/">mermaid</a> 記法で以下のように表せる。
直感的で分かりやすいでしょ<sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup>。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">sequenceDiagram
</span></span><span class="line"><span class="cl"> カバ->>+カバン: あなた、泳げまして?
</span></span><span class="line"><span class="cl"> カバン-->>-カバ: いえ
</span></span><span class="line"><span class="cl"> カバ->>+カバン: 空は飛べるんですの?
</span></span><span class="line"><span class="cl"> カバン-->>-カバ: いえ
</span></span><span class="line"><span class="cl"> カバ->>+カバン: じゃあ、足が速いとか?
</span></span><span class="line"><span class="cl"> カバン-->>-カバ: いえ
</span></span><span class="line"><span class="cl"> カバ->>カバン: あなた、何にもできないのねぇ
</span></span><span class="line"><span class="cl"> loop ひとりヘコむ
</span></span><span class="line"><span class="cl"> カバン->>カバン: ううっ
</span></span><span class="line"><span class="cl"> end
</span></span></code></pre></div><p>この記述をもとに Web ページ上で描画を行うには mermaid.js を使う。</p>
<h3>mermaid.js の設定</h3>
<p>まず mermaid.js のセットアップは以下の通り。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://unpkg.com/mermaid/dist/mermaid.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="nx">mermaid</span><span class="p">.</span><span class="nx">initialize</span><span class="p">({</span><span class="nx">startOnLoad</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">theme</span><span class="o">:</span> <span class="s1">'neutral'</span><span class="p">});</span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">script</span><span class="p">></span>
</span></span></code></pre></div><p>この記述を HTML の末尾(<code></body></code> タグの直前)に記述する。</p>
<p>mermaid.js は <a href="https://unpkg.com/mermaid/">CDN (Content Delivery Network) が用意されている</a>ので利用することをお勧めする。
バージョンを指定する場合は</p>
<ul>
<li><a href="https://unpkg.com/mermaid@7.1.0/dist/mermaid.min.js">https://unpkg.com/mermaid@7.1.0/dist/mermaid.min.js</a></li>
</ul>
<p>のように記述する。</p>
<p><code>mermaid.initialize()</code> 関数は初期化と描画を行う。
ページロード時に描画を行う場合は <code>startOnLoad</code> を true にする。
また <code>theme</code> は今(v7.1.0)のところ以下の4つが用意されている。
お好みでどうぞ。</p>
<ul>
<li><code>dark</code></li>
<li><code>default</code></li>
<li><code>forest</code></li>
<li><code>neutral</code></li>
</ul>
<p>さらに mermaid.js に記述部分を認識させるために <code><div class="mermaid"> ... </div></code> で囲む。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mermaid"</span><span class="p">></span>
</span></span><span class="line"><span class="cl">sequenceDiagram
</span></span><span class="line"><span class="cl"> カバ->>+カバン: あなた、泳げまして?
</span></span><span class="line"><span class="cl"> カバン-->>-カバ: いえ
</span></span><span class="line"><span class="cl"> カバ->>+カバン: 空は飛べるんですの?
</span></span><span class="line"><span class="cl"> カバン-->>-カバ: いえ
</span></span><span class="line"><span class="cl"> カバ->>+カバン: じゃあ、足が速いとか?
</span></span><span class="line"><span class="cl"> カバン-->>-カバ: いえ
</span></span><span class="line"><span class="cl"> カバ->>カバン: あなた、何にもできないのねぇ
</span></span><span class="line"><span class="cl"> loop ひとりヘコむ
</span></span><span class="line"><span class="cl"> カバン->>カバン: ううっ
</span></span><span class="line"><span class="cl"> end
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span></code></pre></div><p>これで最初に挙げたシーケンス図を描画してくれる。</p>
<h3>Hugo 用の shortcode</h3>
<div class="box"><p><strong>【2022-03-06 追記】</strong> Hugo 0.93 からコード・ブロックで mermaid 記法が使えるようになった。
使い方は以下の記事の後半部分を参考にどうぞ。</p>
<ul>
<li><a href="https://text.baldanders.info/remark/2022/03/markdeep-with-hugo/">Hugo で Markdeep な記述ができるようになった</a></li>
</ul></div>
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> 用に shortcode を作ってみた。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">figure</span> <span class="na">style</span><span class="o">=</span><span class="s">'margin:0 auto;text-align:center;'</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mermaid"</span><span class="p">></span>{{ .Inner }}<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl">{{ if .Get "title"}}<span class="p"><</span><span class="nt">figcaption</span><span class="p">></span>{{ with .Get "link"}}<span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"{{.}}"</span><span class="p">></span>{{ end }}{{ .Get "title" }}{{ with .Get "link"}}<span class="p"></</span><span class="nt">a</span><span class="p">></span>{{ end }}<span class="p"></</span><span class="nt">figcaption</span><span class="p">></span>{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">figure</span><span class="p">></span>
</span></span></code></pre></div><p>この shortcode を使うなら以下のように記述すればよい。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{{< fig-mermaid title="カバとカバン" >}}
</span></span><span class="line"><span class="cl">sequenceDiagram
</span></span><span class="line"><span class="cl"> カバ->>+カバン: あなた,泳げまして?
</span></span><span class="line"><span class="cl"> カバン-->>-カバ: いえ
</span></span><span class="line"><span class="cl"> カバ->>+カバン: 空は飛べるんですの?
</span></span><span class="line"><span class="cl"> カバン-->>-カバ: いえ
</span></span><span class="line"><span class="cl"> カバ->>+カバン: じゃあ,足が速いとか?
</span></span><span class="line"><span class="cl"> カバン-->>-カバ: いえ
</span></span><span class="line"><span class="cl"> カバ->>カバン: あなた,何にもできないのねぇ
</span></span><span class="line"><span class="cl"> loop ひとりヘコむ
</span></span><span class="line"><span class="cl"> カバン->>カバン: ううっ
</span></span><span class="line"><span class="cl"> end
</span></span><span class="line"><span class="cl">{{< /fig-mermaid >}}
</span></span></code></pre></div><p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> を使っておられる方は参考にどうぞ。</p>
<h2>複雑な関係を分かりやすくする</h2>
<p><a href="https://text.baldanders.info/" title="text.Baldanders.info">本ブログ</a>にシーケンス図を組み込もうと思ったのは徳島県のチケット売買詐欺事件のシーケンスが分かりにくかったからだ。</p>
<ul>
<li><a href="http://d.hatena.ne.jp/Kango/20170910/1505065248">徳島県警察の誤認逮捕事件についてまとめてみた - piyolog</a></li>
</ul>
<p>で,リンク先の図を元にしてシーケンス図を起こしてみたのがこれ。</p>
<figure style='margin:0 auto;text-align:center;'>
<div class="mermaid">
sequenceDiagram
participant A as 愛知県女性A
participant Tw as Twitter
participant B as 京都女子中学生B
participant C as 徳島県女子高生C
participant D as 和歌山県女性D
participant Tk as チケット売買サイト
participant E as 関東女性E
A->>Tw: チケット売ります
C->>Tw: 購入希望
D->>Tw: 購入希望
B->>+Tw:
Tw-->>-B: A,B,Cのやり取りを発見
B->>+A: 売買交渉:8万円で購入希望
B->>+C: Aとして売買交渉:Aの口座に4万円送金指示
B->>+D: Aとして売買交渉:Aの口座に4万円送金指示
B->>+Tk: A名義でチケット出品
C-->>-A: 4万円振込
D-->>-A: 4万円振込
E->>Tk: 6万5千円で落札,送金
B->>A: 送付先をEの住所へ指示
A-->>-E: チケット送付
Tk-->>-B: 約6万円入金
</div>
<figcaption><div><a href="http://d.hatena.ne.jp/Kango/20170910/1505065248">「[徳島県警察の誤認逮捕事件についてまとめてみた」より</a></div></figcaption>
</figure>
<p><a href="https://mermaidjs.github.io/">mermaid</a> 記法ではこんな感じになる。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">sequenceDiagram
</span></span><span class="line"><span class="cl"> participant A as 愛知県女性A
</span></span><span class="line"><span class="cl"> participant Tw as Twitter
</span></span><span class="line"><span class="cl"> participant B as 京都女子中学生B
</span></span><span class="line"><span class="cl"> participant C as 徳島県女子高生C
</span></span><span class="line"><span class="cl"> participant D as 和歌山県女性D
</span></span><span class="line"><span class="cl"> participant Tk as チケット売買サイト
</span></span><span class="line"><span class="cl"> participant E as 関東女性E
</span></span><span class="line"><span class="cl"> A->>Tw: チケット売ります
</span></span><span class="line"><span class="cl"> C->>Tw: 購入希望
</span></span><span class="line"><span class="cl"> D->>Tw: 購入希望
</span></span><span class="line"><span class="cl"> B->>+Tw:
</span></span><span class="line"><span class="cl"> Tw-->>-B: A,B,Cのやり取りを発見
</span></span><span class="line"><span class="cl"> B->>+A: 売買交渉:8万円で購入希望
</span></span><span class="line"><span class="cl"> B->>+C: Aとして売買交渉:Aの口座に4万円送金指示
</span></span><span class="line"><span class="cl"> B->>+D: Aとして売買交渉:Aの口座に4万円送金指示
</span></span><span class="line"><span class="cl"> B->>+Tk: A名義でチケット出品
</span></span><span class="line"><span class="cl"> C-->>-A: 4万円振込
</span></span><span class="line"><span class="cl"> D-->>-A: 4万円振込
</span></span><span class="line"><span class="cl"> E->>Tk: 6万5千円で落札,送金
</span></span><span class="line"><span class="cl"> B->>A: 送付先をEの住所へ指示
</span></span><span class="line"><span class="cl"> A-->>-E: チケット送付
</span></span><span class="line"><span class="cl"> Tk-->>-B: 約6万円入金
</span></span></code></pre></div><p>しかし,改めて見るとホンマ凄いよねぇ。
これを本当に一人で考えて実行したのならちょとした天才かもしれん。</p>
<h2>シーケンス図以外の図も描けるよ</h2>
<p>さて,今(v7.1.0)のところ <a href="https://mermaidjs.github.io/">mermaid</a> 記法および mermaid.js は以下の図をサポートしている。</p>
<ul>
<li>フローチャート</li>
<li>シーケンス図</li>
<li>ガント図</li>
<li>クラス図(experimental)</li>
<li>Git グラフ(experimental)</li>
</ul>
<p>たとえば,クラス図は以下のように記述する。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">classDiagram
</span></span><span class="line"><span class="cl"> friends<|--serval
</span></span><span class="line"><span class="cl"> friends<|--raccoon
</span></span><span class="line"><span class="cl"> friends<|--fennec
</span></span><span class="line"><span class="cl"> serval : +Waai()
</span></span><span class="line"><span class="cl"> raccoon : +Omakase-nanoda()
</span></span><span class="line"><span class="cl"> fennec : +Haiyo()
</span></span></code></pre></div><p>これを mermaid.js で描画すると以下のようになる。</p>
<figure style='margin:0 auto;text-align:center;'>
<div class="mermaid">
classDiagram
friends<|--serval
friends<|--raccoon
friends<|--fennec
serval : +Waai()
raccoon : +Omakase-nanoda()
fennec : +Haiyo()
</div>
<figcaption><div>フレンズ</div></figcaption>
</figure>
<p>んー。
クラス図を描くなら多重度は必須なんだがなぁ(たとえば多対多の関係は実装できないため「設計が間違っている」と断言できる)。
これに関しては「これからに期待」といったところか。</p>
<h2>考えながら描く</h2>
<p>クラス図やシーケンス図といったものは試行錯誤しながら描いていくものなので,切ったり貼ったりあるいは結合を変えたりといったことが簡単にできないと意味がない。
したがって,とにかく記述が簡単で見た目が直感的であるというのが大事になってくるわけだ,多少は機能を落としてでも。</p>
<p>そういう意味で <a href="https://mermaidjs.github.io/">mermaid</a> はバランスのいい製品と言える。
まぁ,<a href="https://text.baldanders.info/" title="text.Baldanders.info">本ブログ</a>では頻繁に使うものではないかもしれないが,使える道具はあるに越したことはないだろう。</p>
<h2>ブックマーク</h2>
<ul>
<li>
<p><a href="http://www.itsenka.com/contents/development/uml/sequence.html">シーケンス図(Sequence Diagram) - UML入門 - IT専科</a></p>
</li>
<li>
<p><a href="http://www.itsenka.com/contents/development/uml/class.html">クラス図(Class Diagram) - UML入門 - IT専科</a></p>
</li>
<li>
<p><a href="https://qiita.com/rana_kualu/items/da394fd33ce019bf0ba7">簡単にガントチャートとかクラス図とか書けるやつ - Qiita</a></p>
</li>
<li>
<p><a href="https://qiita.com/ririli/items/64320ed2918b1982f89d">ちょっとしたシーケンス図を書くのにatom-mermaidが便利すぎる話 - Qiita</a></p>
</li>
<li>
<p><a href="http://www.tonyballantyne.com/graphs.html">Drawing Graphs using Dot and Graphviz</a> : 図にこだわるのであれば <a href="http://graphviz.org/" title="Graphviz - Graph Visualization Software">Graphviz</a> の DOT 言語を使う手もある</p>
<ul>
<li><a href="https://qiita.com/rubytomato@github/items/51779135bc4b77c8c20d">Graphvizとdot言語でグラフを描く方法のまとめ - Qiita</a></li>
</ul>
</li>
<li>
<p><a href="https://text.baldanders.info/remark/2017/04/hackmd/">エディタ以上ワープロ未満の HackMD</a></p>
</li>
<li>
<p><a href="https://text.baldanders.info/remark/2022/04/git-graph-with-mermaid/">Mermaid.js の Git コミット図が正式版になった</a></p>
</li>
</ul>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>UML 的にはライフラインは破線じゃないといけないのだけど,どういうわけか <a href="https://mermaidjs.github.io/">mermaid</a> では実線になっている。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:2">
<p>複合フラグメントは loop 以外には alt, opt, par のみサポートされているようだ。個人的には ref と critical (par があるなら critical は必要)くらいは入れて欲しいところであるが… <a href="#fnref:2" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>