簡易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にすこし憧れる

FON2405EのGPIOでキャラクタ液晶を制御する（WEB制御）

目的

前回、送達確認を拡張して受信機能(PICマイコンからFONに対してコマンドを出せる）ようにした。
今回は、コマンドラインの操作をWEBから行えるように変更した。

概要

WEBからクリア、行移動、文字出力を行う。
PICからの受信は次回の課題。

結果

FON2405EのGPIOでキャラクタ液晶を制御する（受信機能追加2）

目的

前回、受信機能を追加したが、1Byteのみだった。
今回は、複数Byteの受信を拡張した。

結果

前回同様に１秒毎に顔文字「Adeno(^o^)mm-ss」※mm-ssは分-秒を送信し続けると、
400回のコマンド送信に対して、送信NGは52回　13%くらい
なんか前よりも増えた気がする…。
受信の方は、PICから「Hello!!」を送信。100回中NGは5回　5%くらいか
こっちはこんなもんか？？

これで、双方向の複数バイトデータを扱えるようになった。
ようやくここまで来た。
ラズベリーパイでも良いのだけれど、ちょっと高い。
このFONならば、中古だけど、ACアダプタと本体で 500円〜なので、
心置きなく遊び倒せる。

何をやったか

電文

変更点