!mermaidが使えるようにしてみた

最近お仕事でQiitaを使ったりしているが、図の管理が一緒に出来なくて困っている。
せっかく文書はバージョン管理が出来て、だれでもWeb上で編集が出来るのに、図に関しては、別のソフトで書いたものを貼り付けるだけ。という現状はあまりよろしくないと思っている。

そこでテキストを使って図を記述することで、図も文書と同様にバージョン管理や編集が出来る方法を探していた。

数年前にも同じことを思ってsphinx界隈で使われているblockdiagを物色していたことがある。
ただしblockdiagはpythonで記述されており、Pure JavaScriptで書かれているこのWikiでは上手く扱うことが出来なかった。

ということでその時にblockdiagをJavaScriptで書きなおしたのであった。

こちら → http://inajob.dip.jp/blockdiagjs/blockdiagjs.html

あれから随分経ったのでもう一度探してみた所最近はmermaid.jsというのがあるらしい、というのを知った。

これは便利そう

http://knsv.github.io/mermaid/index.html

jsをインクルードするだけと書いてあったが、実際にはスタイルも入れないと動かなかったので注意。

>> mermaid
graph TD
勇者 --倒す--> 魔王
魔王 --養う--> 魔物
勇者 --救う--> 世界
魔物 --襲う--> 勇者
<<

記法はこんな感じ

>>PRE pre
>> mermaid
graph TD
勇者 --倒す--> 魔王
魔王 --養う--> 魔物
勇者 --救う--> 世界
魔物 --襲う--> 勇者
<<
<<PRE

他にもPlantUML( http://ja.plantuml.com )というツールがあるようだがアレは確かJavaで書かれているため、このWiki使うにはやはりmermaid一択といったところか・・ 

ブラウザではJavaScriptしか動かないけど、こういうアルゴリズムベースのライブラリは何の言語で書いてあっても環境依存要素は少ないと思うので、なんかこう自動的にJavaScriptに変換するような仕組みがほしい。 Python on JSみたいなのどこまでまともに動くんだろう・・

!このwikiの自慢

Pure JavaScriptで書かれているこのWikiでは他にも様々なものを埋め込むことが出来る

!!数式
>> math
\begin{equation}
raw = 
\begin{pmatrix}
0 & 1 & 1 & 1\\
1 & 1 & 0 & 0\\
0 & 1 & 0 & 0
\end{pmatrix}
\end{equation}
<<

>>PRE pre
>> math
\begin{equation}
raw = 
\begin{pmatrix}
0 & 1 & 1 & 1\\
1 & 1 & 0 & 0\\
0 & 1 & 0 & 0
\end{pmatrix}
\end{equation}
<<
<<PRE


!!ソースコード
>> code javascript
 function hello(){
   alert("hello world")
 }
<<
>>PRE pre
>> code javascript
 function hello(){
   alert("hello world")
 }
<<
<<PRE
!!Amazon
{{amz B00G6E90RS http://ecx.images-amazon.com/images/I/51ueOGAnEyL._SL160_.jpg http://www.amazon.co.jp/%E3%81%AA%E3%82%8C%E3%82%8B-SE-%E3%83%95%E3%82%A1%E3%83%9F%E9%80%9A%E3%82%AF%E3%83%AA%E3%82%A2%E3%82%B3%E3%83%9F%E3%83%83%E3%82%AF%E3%82%B9-ebook/dp/B00G6E90RS%3FSubscriptionId%3D0XWJJHYBK2E3MDJAQ9G2%26tag%3Dinajob-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3DB00G6E90RS なれる!SE(1)<なれる!SE> (ファミ通クリアコミックス)}}

>> pre
{{amz B00G6E90RS http://ecx.images-amazon.com/images/I/51ueOGAnEyL._SL160_.jpg http://www.amazon.co.jp/%E3%81%AA%E3%82%8C%E3%82%8B-SE-%E3%83%95%E3%82%A1%E3%83%9F%E9%80%9A%E3%82%AF%E3%83%AA%E3%82%A2%E3%82%B3%E3%83%9F%E3%83%83%E3%82%AF%E3%82%B9-ebook/dp/B00G6E90RS%3FSubscriptionId%3D0XWJJHYBK2E3MDJAQ9G2%26tag%3Dinajob-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3DB00G6E90RS なれる!SE(1)<なれる!SE> (ファミ通クリアコミックス)}}
<<

!!地図
{{map 139.70355740 35.69384330 17}}
>> pre
{{map 139.70355740 35.69384330 17}}
<<

!!Twitter
{{embed https://twitter.com/ina_ani/status/701393979665846272}}

>> pre
{{embed https://twitter.com/ina_ani/status/701393979665846272}}
<<

!!RSS
>> styled box
{{rss http://d.hatena.ne.jp/inajob/rss}}
<<

>>PRE pre
>> styled box
{{rss http://d.hatena.ne.jp/inajob/rss}}
<<
<<PRE

!!魔法陣

>> mce4
lw(5)
 circle(1)
 poly(5,2)
<<

>>PRE pre
>> mce4
lw(5)
 circle(1)
 poly(5,2)
<<
<<PRE

!まとめ
自分のWikiエンジンを持ってると色々楽しい。
5643382
wiki
1456641008