はてなブログでフローチャートチャートをマークダウンで記述できないものでしょうか

質問内容

はてなブログの記事内にフローチャートをマークダウンで記述したいです。何か方法はないのでしょうか。

やりたいこと

普段はてなブログの記事を、マークダウン方式で記述しています。
余計なマウスの操作をしたくないからです。

そこで、フローチャートなどの簡易な図もマークダウンなどの記述式で書けたらいいなと思っているところです。

自分で調べたところ

flowchart.js というライブラリを使用すれば記述ができそう、ということがわかりましたが
http://qiita.com/ka215/items/a709665cb34c505ccf1f
結局のところライブラリのはてなブログでの利用方法がわからず行き詰まっています。

何か良い方法はないでしょうか。解決の糸口程度でも構わないのでご教示いただきたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

マークダウン方式を採用されているということで、
はてなブログ側でjs(CDN)を直接読み込んで実行できると思います。
※ はてなブログのマークダウン方式の場合、HTMLも直接記述できます。

==============
提示頂いた、URLを元に自分のはてなでも実行してみました。
キャプチャを添付しておきます。

貼り付けたソース

html
1<script src="https://cdn.rawgit.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
2<script src="http://adrai.github.io/flowchart.js/flowchart-latest.js"></script>
3
4<pre id="sample-uml" style="display: none;">
5st=>start: Start:>http://www.google.com[blank]
6e=>end:>http://www.google.com
7op1=>operation: My Operation
8sub1=>subroutine: My Subroutine
9cond=>condition: Yes
10or No?:>http://www.google.com
11io=>inputoutput: catch something...
12
13st->op1->cond
14cond(yes)->io->e
15cond(no)->sub1(right)->op1
16</pre>
17<div id="diagram"></div>
18<script>
19  var source = document.getElementById( 'sample-uml' ).innerText;
20  var diagram = flowchart.parse( source );
21  diagram.drawSVG( 'diagram' );
22</script>