読者です 読者をやめる 読者になる 読者になる

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

mermaid Javascript

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

コードは次。

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/mermaid/0.5.8/mermaid.js'></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

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

マニュアル。

mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown.

cdnjs.com

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

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