blockdiag の Web API サーバとライブプレビューをする WebUI を作りました

はじめに

• blockdiag をリアルタイムでプレビューできたら素敵だな、ということで作ってみました。
• 公式でも http://interactive.blockdiag.com/ が用意されていますが、 ブラウザ側での SVG ダウンロード機能や CodeMirror を導入したかったため、自作することにしました。

そもそも blockdiag って？

特定の書式でテキストを記述すると、図として出力してくれるダイアグラムジェネレータです。
詳しくはこちら ( http://blockdiag.com/ja/ )

個人的には packetdiag や seqdiag あたりが気に入っています。

デモ

実装に使った言語やライブラリ

API サーバ側

• Python 3.6.5
• sanic ( https://github.com/channelcat/sanic )
  • そこそこ快適にプレビューしたかったので、速度面は若干気にしました
  • japronto の次に速いフレームワークだそうです。 ( 負荷試験のためのノウハウと Webフレームワークの負荷試験 (Python,Node,Go,PHP) )
  • Flask-like に書けることもなかなかに良さげと思い、採用に至りました

WebUI 側

こちらはあまりこだわりはありません

• javascript (ES6)
• React.js
• webpack4 + webpack-dev-server
• reactstrap
• bootstrap4
• CodeMirror
• etc ...

ソースコード & デモサイト

以下で公開しています

• ソースコード
  • https://github.com/kaishuu0123/blockdiag-api
• デモ
  • https://blockdiag-api.com/

所感

• 最近の Python Web フレームワークを調べる機会が無かったので良い機会になった
• 利用したいライブラリに合わせて、言語を選んで実装する、という流れはなかなか楽しい
• python アプリの docker コンテナ化は思ったよりお手軽だった