<mermaid, Javascript> mermaidを使ってみた。

2018/08/01... ちとアップデート。
知らない間に、charset='UTF-8'スクリプトを呼ぶ時に追加しないと、動かなくなっていた。。。

mermaidを使ってみた。いいねー。

コードは次。

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/mermaid/0.5.8/mermaid.js' charset='UTF-8'></script>
<link rel='stylesheet', type='text/css'  href='https://cdnjs.cloudflare.com/ajax/libs/mermaid/0.5.8/mermaid.css'>
<div class='mermaid'>
graph LR;
subgraph Hage Kingdom
HageRed--> |2|HageBlue
HageYellow--> |3|HageGreen
HageYellow--> |3|HageOrange
end
subgraph Rainbow
HageOrange-->|2|HageBrown
end
</div>

で、こうなる。

graph LR; subgraph Hage Kingdom HageRed--> |2|HageBlue HageYellow--> |3|HageGreen HageYellow--> |3|HageOrange end subgraph Rainbow HageOrange-->|2|HageBrown end

なんかはてな上だと表示が少しずれる??? まいいか。

マニュアル。

cdnjs.com

Webでコードチェックできる。

http://knsv.github.io/mermaid/live_editor/

2018/08/01...参考にさせてもらいました。
qiita.com