テキストファイルから様々なダイアグラムを作成する

はじめに

この Web サイトを作るきっかけは Heritage と名付けた自分の疾患の 30 年に渡る知見をまとめたサイトを作り、それを訪問看護の看護師さんに見せたことにあります。

話の流れでダイアグラムを描くのに使っているツールを教えて欲しいと看護師さんにお願いされました。PlantUMLGraphViz ですよとツール名はお伝えしました。ですがそれだけではあまりにも不親切です。また他の IT 技術者がこれらのツールを仕事で使う場合にも役立つことが充分予想されます。そのためにどのようにそれらのツールを使えばいいのかということを、いま一度整理するのも悪くないと考えました。

Heritage には PlantUMLGraphViz というソフトウェアで作成した svg フォーマットのダイアグラムが描かれています。これらのソフトウェアはテキストエディタで作成したテキストファイルを svg、png、jpeg などの画像ファイルに変換します。

これらのツールではダイアグラムのレイアウトはほぼ全てをソフトウェアに任せるということになります。ダイアグラムのレイアウトをユーザが自由自在に操るということは基本的にできません。

システムエンジニアやプログラマーは時間に追われる職種です。なるべくならシステムの要件整理やシステムの最適化、システムの設計、システムの実装などの頭脳労働に重点的に時間を割り振りたいと願うようになる人種です。そのためソフトウェアに任せることができることは任せてしまえと考える人間が非常に多い職種でもあります。筆者もその一人です。

Photoshop などの画像編集ソフトはたしかに思い通りの美しいダイアグラムを作ることができます。ですがそのような画像作成ソフトウェアには、忙しい私達にとって 1 つだけ無視できない非常に大きな欠点があります。画像の作成や編集といったソフトウェアのオペレーションに時間を取られ過ぎてしまうのです。

私達はソフトウェアのオペレーションが好きですが、できればソフトウェアのこまかいオペレーションよりも、本来考えないといけないテーマに思考を集中したいのです。本来の目的の思考を何にも邪魔されたくないのです。

システムエンジニアやプログラマーに、もしなにかの成果物を最も早く作れるものは何かと問われたら十中八九それはテキストファイルだと答えるでしょう。

そのように考える先人はたくさんいたに違いありません。そのようなニーズを持つ先人たちが作り上げ、今も改良などのメンテナンスが続けられているのが先に述べた PlantUMLGraphViz、あるいはこのサイトの後半で紹介する mermaidD2 などのツールになります。

これらのツールを使うということは、ダイアグラムのレイアウトを多少犠牲にしたとしても、思考を中断しないという最も重要なことに集中することになります。このサイトがあなたの思考の速度でダイアグラムを作成する助けになるなら幸いです。

さて、これらのツールを使う前提として、ユーザは以下の手順でダイアグラムを得ることになる、ということを知っておかねばなりません。

  1. ユーザはツールごとに決められた書式のテキストファイルを作成する
  2. それらのツールを使ってテキストファイルからダイアグラムを生成する
図 作業手順概念図 (D2 により作成)
クリックまたはタップすると新しいタブで表示され拡大等しやすくなります。
図のソースファイルはここです。

変換作業があるので一見手間がかかりそうな気がするかもしれません。ですが実際には変換自体はプログラムが行うので、変換中の図を作っている本人の手間はまったくありません。

それだけではなくテキストファイルの編集の過程で自分自身の思考に集中できます。これは大きなメリットです。思考の集中と深化に伴ってさまざまな事柄を思い出したり、新しい知見が発現することすらあるので、テーマに対する知見がますます広がったり深まるという効果もあります。

筆者はマインドマップやロジックツリー、KJ 法、その他ブレインストーミングのための技法など、様々な非 IT メソッドを仕事で活用してきました。それらの仕事の様々な場面で活用されている各種メソッドが、実は人生の様々な局面で非常に役立っていると強く感じています。そのようなこともあり、テキストファイルを利用した思考整理は非 IT エンジニアにも是非ともお勧めしたいところです。

更に述べるのならテキストファイルで思考を整理するのもかなり有効なのですが、そのテキストファイルを元にして自分の思考をダイアグラムの形で可視化することは、自身の思考を俯瞰するのに非常に適しています。

それはまるで山を登ったり国内外を旅するときに地図を大きく目の前に広げて、自分の現在位置やこれまで歩んできた道、これから歩むべき道、その地形や困難さ、容易さなどを俯瞰するようなものです。

自分自身の思考でここはおかしんじゃないか?とか、これは間違ってるなとか、ここは過剰ではないか?とか、そもそも進むべき道を間違えてるとか、そのような自身の考えの間違いや、望ましくない考えや、望ましくない考えの強度にも気が付きやすくなります。

単純化して言うなら一連の作業は自分自身の思考の整理と見える化、そしてアップデートに非常に有効だということになります。

単に仕事に使うだけでなく、是非とも人生の困難な局面でも応用して、その困難を乗り越えるための補助的な杖として利用してください。きっとあたなの人生の助けになるものと確信しています。

なおコンテンツは随時追加していきますので気長にお待ちください。

目次

  1. GraphViz 編
    1. はじめに
    2. インストール
    3. 実行方法
    4. 対象レイアウトエンジン
    5. ノード
    6. エッジ
    7. graph と digraph
    8. subgraph
    9. クラスター
    10. ノードの形状などの属性
    11. ノードへの画像の埋め込み
    12. エッジの形状などの属性
    13. クラスターの属性
    14. 資料
  2. PlantUML 編
    1. PlantUML の本来の目的
    2. インストール
      1. Linux の場合
      2. jar ファイル
      3. 実行バイナリ
    3. このサイトで取り上げるダイアグラム
    4. デプロイメント図 (UML 図)
      1. デプロイメント図とは
      2. エレメント
      3. リンク
      4. エレメントの形状などの属性
      5. Creole 記法 (Wiki 記法)
      6. エレメントへの外部画像の埋め込み
      7. リンクの形状などの属性
      8. エレメントの入れ子について
      9. レイアウト調整
      10. レイアウトエンジン
        1. 種類
        2. ELK (Eclipse Layout Kernel)
        3. Sudoku
    5. Work Breakdown Structur
      1. Work Breakdown Structur とは
      2. ソースの基本的な書き方
      3. 方向の指定
      4. ノードを消して文字だけにする
      5. レイアウトのアレンジ
      6. 複数行のノード
      7. バックグラウンドカラー
        1. インライン指定
        2. スタイルを使う方法
      8. スタイル
      9. ノードの最大幅
      10. WBS 要素間への矢印の追加
      11. Creole 記法 (Wiki 記法)
      12. ノードへの外部画像の埋め込み
    6. MindMap
      1. ソースの基本的な書き方
        1. OrgMode
        2. MarkDown
        3. 算術記号
      2. 複数行
      3. マルチルート
      4. バックグラウンドカラー
        1. インライン指定
        2. スタイルを使う方法
      5. ノードを消して文字だけにする
      6. 方向の指定
      7. スタイル
        1. node と depth
        2. boxless
        3. ノードの最大幅
        4. Creole 記法 (Wiki 記法)
        5. ノードへの外部画像の埋め込み
    7. GraphViz ダイアグラム
      1. ソースの基本的な書き方
    8. 資料
  3. Mermaid 編
    1. 使用方法
      1. Mermaid Live Editor
      2. Mermaid Chart Editor
      3. MarkDown への埋め込み
      4. html への埋め込み
        1. CDN
        2. npm インストールl
      5. CLI ツール
    2. フローチャート
    3. 円グラフ
    4. 象限マトリクス
    5. マインドマップ
    6. 二次元グラフ
    7. レーダーチャート
  4. D2 編
    1. インストール
    2. 実行方法
    3. オブジェクト
      1. シェイプ
      2. コネクション
      3. コンテナ
      4. テキスト
      5. アイコンとイメージ
      6. グリッド
    4. カスタマイズ
      1. テーマ
      2. スタイル
      3. クラス
      4. サイズ
      5. ポジション
      6. スケッチ
      7. インタラクティブ
        1. ツールチップ
        2. リンク
        3. フォント
    5. レイアウト
      1. レイアウトエンジン
        1. 種類
        2. Dagre
        3. ELK (Eclipse Layout Kernel)
        4. TARA
      2. 方向
      3. コンテナ内の方向 (TERA のみ)