St_Hakky’s blog

Data Science / Human Resources / Web Applicationについて書きます

データフロー図(Data Flow Diagram, DFD)をAtom上でMarkdownで書く方法を調べたのでまとめた(mermaid.js)

Atom Data Science

こんにちは。

今やっているデータ分析のデータフローが結構ややこしいので、しっかりとDFDを作ることにしました。

とはいえオブジェクトをGUIでグリグリ編集するのめんどくせぇので、Atomで書けるツールみたいなので、Markdownとかで気軽に編集できるものがないかなーと思って調べたらあったので、そもそもDFDってなんやねんみたいなところからまとめてみました。

○まとめ

つまりこの記事はどういうことかというと以下の３行です。

  • DFDはデータの処理フローを可視化する方法
  • AtomでもDFDはmermaid.jsにより書ける
  • Markdown上に埋め込むなら、Markdown Preview EnhancedというAtomのパッケージが便利そう

○データフロー図(Data Flow Diagram, DFD)とは

DFDとは、システム間のデータの流れを、記号を用いて示す方法のことです(UMLみたいな感じ)。

データに対して行う様々な処理や、その状態など(発生・吸収・処理・蓄積という状態)を、流れを示す矢印で作成するものです。

データの処理のフローを、視覚的に表現することで、データの流れがすごくわかりやすくなることがメリットです。

■参考サイト

○mermaid.js

mermaid.jsは、Javascript製のフローチャート作成ライブラリです。

どんなものかはひと目でわかるので、本家のサイトを眺めることをおすすめします。

独自の記法により、大抵のチャートなら書くことができます。

■参考サイト

○mermaid.jsをAtomでプレビュー

この素晴らしいmermaid.jsなのですが、これをAtomでプレビューできればいいのになぁと思っていました(専用のエディターもあるようですが、そのためにエディターって起動するのめんどくさいしなぁ、、、みたいな笑)。


そしたらありました。


作っていただいた方、圧倒的Coolですね、、、。


いやぁ、すごい。marmaidのsyntaxをサポートしてくれるプラグインもあるので、これもついでに入れると便利になるかと。


しかし、ちょっと私が少し触った感じでは、Markdown上にこれがあると、うまくパースできないようで(というかどうすればいいかわからなかったので)、こまったなぁと思っていました。


そしたら、Markdown Preview EnhancedというAtomのパッケージでmermaidをサポートしているのを見つけました。

これを使うと、

ここらへんに普通にMarkdownを書く。

```mermaid

--ここにmermaidの記法でフローチャートを書く

```

ここらへんに普通にMarkdownを書く。

って感じで書いて、プレビューすると、フローチャートも可視化できるみたいです(というかできました)。


これを探した理由は、mermaidの公式サイトにMarkdown plusに対応していますと書いてあって、それを元に検索したら、issueでMarkdown-preview-plusでは対応してないけど、Markdown Preview Enhancedでは対応しているよというのでたどり着きました。issueの最終更新履歴が2016年の5月なので、今はわかりませんが、、、(今どうなっているか詳しい方はお知らせください)。

とりあえずみたいな感じで使いたかったので、ひとまずこれでオッケーかなと。

○まとめ(再掲)

いろいろ書きましたが、まとめると以下のとおりです。

  • DFDはデータの処理フローを可視化する方法
  • AtomでもDFDはmermaid.jsにより書ける
  • Markdown上に埋め込むなら、Markdown Preview EnhancedというAtomのパッケージが便利そう
■その他の参考サイト