簡易Markdownエディタにmermaid.jsを導入してフローチャートを表示する

しばらくバタバタしており、更新が滞ってしまった。
でも続けることはやめてはいない。

最近、Markdownが気になる。流行に乗り遅れてしまった感があるけど、
このページを見て心踊ったからだ。
http://qiita.com/uzuki_aoba/items/a01f8b0b52ced69c8092

ここで紹介されている「Haroopad」は良さそうなのだけど、
こればかりに頼ってしまうのもなんだかなので、
勉強を兼ねてwebベースの簡易エディタを作ってみたいと思う。

 概要

webベース
リアルタイム更新
Markdown表記
コードのハイライト表示
mermaid.js対応

準備

 ディレクトリ作成

今回はmdeとした。

インストール

 １．jQuery
　　　これだけ[npm install jquery]
 ２．Markdownパーサー(marked)
　　　これだけ [npm install marked]
 ３．ハイライト(highlight.js)
　　　これだけ[npm install highlightjs]
 ４．Mermaid.js
　　　これだけ[npm install mermaid --save-dev]

プログラム

 １．[mde.php]
　　　※phpにしたのは、phpの簡易サーバーで動作確認したかったから
　　　　他意はない。

 ２．[mde.js]

動かし方

作成した ディレクトリで[php -S 127.0.0.1:8080]とする
　すると
あ、フローチャートって書いたけど、シーケンス図だ…Orz

参考

以下のリンクがものすごく参考になった。
http://qiita.com/opengl-8080/items/56b4b6a9d31bac0cb3e2
http://clmpractice.org/2015/05/21/rational-team-concert-open-social-widget-with-mermaid-markdown/
knsv.github.io/mermaid/
http://knsv.github.io/mermaid/usage.html
http://kannokanno.hatenablog.com/entry/2013/06/19/132042
http://qiita.com/amay077/items/704d48130e5cf17e8654

雑感

Qiitaにすこし憧れる