フローチャート図を書けるmermaid.jsを使ってみた

いい加減、仕事でワークフロー図なんかを作るのに、ExcelやWordから脱却したいと思っていた。
Visioとか入れればいいんだけど、入れてくれないんですよね。
ので、mermaid.jsについて勉強してみた。

mermaid.jsとは

GitHubから冒頭の文を日本語訳して引用。
マークダウンと同じ方法でテキストから図やフローチャートを生成します。
実際には、マークダウンというより、独自構文といったほうがいいけれど、HTMLタグやスクリプトは必要ない単純な構文で図を作成できるスクリプト。

  • フローチャート図
  • シーケンス図
  • クラス図
  • ガントチャート 
なんかが作れる。

フローチャート図を作ってみた

構文としては、以下のような感じで

graph TD;
  スーパーに入る --> 品物をかごに入れる
  品物をかごに入れる --> レジに並ぶ
  レジに並ぶ --> お金を払う
  お金を払う --> 袋詰する
  袋詰する --> 帰る

簡単にコードを組んで、mermaid.jsに通すと以下のような画像がでる。
実際には、svgで作られるのだけど、Bloggerでうまく埋め込めなかったので、スクリーンショット止まり…。


実際にサイトに埋め込んで使うときは、GitHubやGitBookを参考にmermaid.min.jsとmermaid.min.cssを導入して、HTMLに埋め込んでやればいい。
以下は、一番シンプルな例。

<html lang="en">
<head>  
  <link href="mermaid.min.css" rel="stylesheet"></link>
</head>
<body>
  <div class="mermaid">

graph TD;
  スーパーに入る --> 品物をかごに入れる
  品物をかごに入れる --> レジに並ぶ
  レジに並ぶ --> お金を払う
  お金を払う --> 袋詰する
  袋詰する --> 帰る

</div>
<script src="mermaid.min.js"></script>
  <script>mermaid.initialize({startOnLoad:true});</script>
</body>
</html>

これで簡単にフローチャート図なども書ける。
レンダリングをmermaid.jsに任せればいいので、とにかく思ったままのことがすぐに書ける。
理想はそのままHTMLで閲覧できるようにすればいいんだけども、スクリーンショットを取るでもいいので、まあ仕事で使えるかな、とは思う。

オンラインでも作れるので、インターネット接続の問題とかがないならばこれをそのまま使えばいい。
https://mermaidjs.github.io/mermaid-live-editor/#/


コメント

コメントを投稿

このブログの人気の投稿

リモートワークをLogicoolのマウスとキーボードで複数ＰＣ切り替えて優勝した

イメージ
デバイス多すぎるんやが問題 仕事上シンクライアントPCを支給されているのだけれども、当然キーボードとマウスが増えるのでとても面倒くさい。 シンクライアントPCはノートPCなのでノートのキーボード使えやって話でもあるけど、使いにくいでしょ？ ということで、自前のをつないでいるんだけれど、メインPCでも調べごとしながらしているとなかなか作業場が厄介になる。 メインで使っているのはMXREGOじゃない 上図のマウス１に当たる部分はLogicoolのMX REGOというトラックボールマウスである 「そういえばこれPC2台接続できるじゃない？ ということで、ついでにキーボードも切り替えできるものとしてK375sを購入した Logicool K375s Multi-Device Wireless Keyboard & Stand Combo 構成 問題点 シンクライアントPCにLogicoolのソフト入れられない シンクライアントPCなのでLogicoolのPCにUnifyingソフトウェアを入れることができない。 つまり設定することができない つまり詰んだ？ ぴえん🥺 解決法 「聞こえますか…UnifyingはBIOSで認識できるのです...」 アラサーおじさんが泣いていると直接脳内に声が聞こえました。 アメージング！ Unifyingレシーバーは直接デバイスとペアリングしているのです！ ここらへんの仕様を調べたのですが、Logicoolのホワイトペーパーとかも見当たらないし、今ひとつつかめないんですよね。 同じような無線仕様のBluetoothはアプリケーションレベルで解決してるっぽい？のですが、Unifyingはハードウェアレベルで解決してるようですね。 話はそれましたが、解決法はこうです。 メインPCに2つ目のレシーバーを挿す 通常どおりペアリングする そのレシーバーを外しメインPCには元のレシーバーを挿す シンクラPCに2つ目のレシーバーを挿す これで解決できました。レシーバー上にペアリング情報が残るのですね。なので、こういった他PCでペアリングして指し直して使うという取り回しができるようですね。 リモートワークも一組のキーボードとマウスですむようになった
続きを読む

VBAでのInterfaceやキャスト

前段 個人的に、Excel VBAを仕事で組む機会がある。 自由に組んでいるので、いろいろと設計方法、実装方法を考える。 VBAのインターフェース VBAにはJavaでいうextendsのような継承はない。 Interfaceがあるので、ポリモーフィズムを実現するときは、これを使うのが一つの方法論だ。 ただ、インターフェースは、というか、VBAはクラスのキャストができない。 インターフェイス自体が、そうする性質のものではないのだが、つい欲しくなるときがある。 Object型 さて、話は変わるが、VBAには、Object型というものがある。 平たく言うと、あらゆるクラスに適する型である。あらゆるクラスのスーパークラスと思うと話が早い。 そして、Objcet型からは元のクラスで実装したプロシージャを呼ぶことができる。ObjectによるポリモーフィズムもVBAでは可能、といえる。 なので、ダウンキャストを実現するために、インターフェイスでインスタンスが自己をObjectで出力するためのメソッドを定義してあげることで、スーパークラスからサブクラスへのキャストを実現する。 実装例 Class InterfaceClass '' プロパティ Public porp as String　 '' イミディエイトウィンドウに出力する Public Sub printOut() As String End Sub '' 自己をObject型で出力する Public Function Object() As Object End Function Class ImplementClass '' InterfaceClassを実装する Implements InterfaceClass '' スーパークラスのGet,Letのため、 '' 値を保持しておくためのプロパティ Private prop As String '' Getter Public Property Get InterfaceClass_prop() As String InterfaceClass_prop = prop End Property
続きを読む

SUPERHOTがいかにSUPERHOTか語りたい

イメージ
注意 ただの感想の垂れ流しです 全世界が驚愕した待望したゲーム性 SUPER HOT は、今までで3作でている。 SUPER HOT （以下SUPERHOT） SUPER HOT VR（以下VR） SUPER HOT : MIND CONTROL DELETE（以下DELETE） SUPERHOTは2013年にKickStarterでクラウンドファンディングされて、見事成立させできたゲームだ。 このゲーム性は、シンプルかつ非常に魅力的なものだった。 「自分が動いている間だけ時間が進む。自分が動かなければ（ほとんど）すべてが止まる」 映画MATRIXの有名な場面のように 弾丸が止まって見える を体現したゲームだったのだ。 死角から弾丸が発射されても、軌道を見てから紙一重で避けて、反撃する。そんな映画みたいな演出を実体験できる。 ブラウザでできるプロトタイプからそれが実現できていた。 プロトタイプを再生する-SUPERHOT クラウンドファンディングが成功して当然のゲームなのだ。 質実剛健なグラフィック SUPERHOTが発売されたものは、グラフィック自体は特に凝っているわけではなかった。すべて３Ｄグラフィックだが、ポリゴンチックで２０１３年当時でもきめ細かいグラフィックとは言えない。 ただ、その表現が非常にゲームとしてシンプルかつ機能美を追求したものだった。 敵は赤色 武器は黒色 ステージなどその他は白色 直感的でゲームを理解できる。そして、敵キャラクターはほとんど同じ造形のポリゴン。ただの記号だ。 ゲームはゲーム。下手な感情移入など不要。そう言わんばかりの作りだ。 先の「映画的な楽しみ方」を１００％没頭させるゲームなのだ。 シンプルなゲーム性に高い戦略性 しかし、一言でいうとこのゲーム「死にゲー」である。 ルールハシンプルだが、かなりの高い戦略性を求められる。 1対1で射撃戦を講じるなら余裕だろう。しかし、このゲーム敵がわんさか出て、１対多を必然的に求められる。 ３６０度どこから弾丸が飛んでくるか分からない。故に、全体を見渡しての状況把握が必要となる。 そうやって視点を動かしている間に背後を取られる、などというのもしばしば起こる。 そして、「ゲームオーバー」 さながら、ワンマンアーミーの過酷さ
続きを読む