【コードで図を書きながら、カオスを目に見える形で整理しよう！】

はじめに

情報が溢れる時代、私たちは複雑な知識やアイデアをどう整理するかが大きな課題です

断片的な知識はすぐに忘れられ、共有も難しくなります

そこで重要になるのが「概念整理」

情報を階層化し、構造として見える化することで理解が深まり、再現性が高まり、そして教育的価値も生まれます
そして、この概念整理をシンプルに実現できるのが Mermaidです

テキストで図を描けるこのツールは、マインドマップ、フローチャート、クラス図など多様な表現を可能にし、知識を「見える化」する強力な味方です

Meramidコードとは？

このオープンソースの仕組みを利用すれば「コード」を書きながら「わかりやすい」図を書いていけます

初心者の方は以下のサイトから始めるのがいいと思います

• Mermaid.js(画面右上にOpenEditorがあります)
• KROKI

当ブログでは以前、シーケンス図の書き方も紹介しています

Mermaidコードを触れるのがはじめての方をこちらの記事からはじめるのがいいかもしれません

ここからは本題のマインドマップ、フローチャート、クラス図などの実際の書き方を紹介します

フローチャート図

単なる業務手順の整理だけでなく、概念を順序立てて理解するための構造化ツールとして使えます

Mermaidコードで概念整理するのに一番難易度は低いです

書き方

まず最初に図の種類を「flowchart」と宣言します

その後、セミコロン;を使用して登場する図（ノード）を指定しておきます

flowchart TD
    A[第一階層];B[第二階層1];C[第二階層2]

1行目にTDという表現がありますが、これは図の流れを意味します

詳細は後述します

話をもとに戻します

上のコードで作成される図は以下になります

横に並列に並んでしまっているので、階層を以下のコードで表現できるようにします

flowchart TD
    A[第一階層];B[第二階層1];C[第二階層2]
    A-->B
    A-->C

A–＞BとA–Cと表現することで、AとBそしてCの位置づけが表現できています

マインドマップ

Mindmapは「中心となる概念」から枝を広げ、階層的に情報を整理する図です

人間の思考の広がり方を模した構造で、直感的に理解できます

上の図は野球をポジションを切り口に概念整理した図です

この事例をもとにマインドマップの書き方を解説していきます

書き方

まず「mindmap」と図の種類を宣言した後に最初に起点となる「野球」をマインドマップに入れます

mindmap
  野球

これで下の図のように中心に「野球」の文字列が登場する図ができます

次に上の図に「投手」「野手」を加えます

mindmap
  野球
    投手
    野手

これでマインドマップが拡大します

ちなみに以下のように書くと図の構成がかわります

mindmap
  野球
    投手
        野手

上の図では投手の下に野手があり、前の図とは違って投手と野手が同列ではありません

なぜなら野手が投手の「下」にありかつ「右」の位置にあるからです

ですので以下の書き方の場合だと位置のずれがあるものの、投手と野手は同列です

mindmap
  野球
        投手
    野手

なぜなら投手や野手の右にありますが、上の位置にあるからです

それでは本題に戻して、2階層目を追加してみましょう

mindmap
  野球
    投手
      先発投手
      中継ぎ投手
      抑え投手
    野手
      捕手
      内野手
      外野手

上のコードだと右の位置に3階層目が追加されたので、マインドマップ図も以下のように拡大しています

＋アルファ

図の形

上の事例だと図の形は指定していません

図の形を指定するときには各種括弧を組み合わせます

[]の場合 ⇒ 四角

()の場合 ⇒ 角が丸の四角

(野球)の場合

(())の場合 ⇒ 円

((野球))の場合

{{}}の場合 ⇒ ヘキサゴン

{{野球}}の場合

))((の場合 ⇒ ギザギザ

  ))野球((の場合

解説を加える

マインドマップの場合は解説を付ける方法はありません

ですが、代替する方法は２つあります

まず一つ目ですが、解説用の図（ノード）を加えることです

以下のような形で（）の中に””を使用して解説を加えます

＞投手コメント(“投手は試合の流れを左右する”)

*上の画像では絵文字が入っていますが、Wordpressの仕様で表示できません

2つ目は図（ノード）自体に解説を加えることです

この図の中に解説を加えるには以下のように「\n」を使用します

投手(“投手\n チームの守備の要”)

クラス図

ここからはかなり応用編と言えます

あくまで概念整理のための解説です（オブジェクト指向プロミングの話とは切り離して理解してください）

クラス図とは、システムや概念を「構造」として整理し、要素間の関係を視覚的に示す図です

概念整理の観点では、複雑な情報を抽象化・一般化し、理解しやすい形にまとめるための強力なツールになります

構成

• クラス名（概念の名前）
• 属性（静的な特徴やデータ）
• 操作（動的な振る舞い）

• 関連（association）: クラス同士の意味的なつながり
• 汎化（generalization）: 上位概念と下位概念の関係（例: 哺乳類 → ヒト/ネコ/イヌ）
• 集約（aggregation）/コンポジション: 全体と部分の関係（例: 車 → タイヤ）

図を書いてみる（関連性なし）

まずは預金口座と預金者をクラス図で表しましょう

最初にclassDiagramという風に図の種類を宣言してからコードを書きます

classDiagram
 class 預金口座{

 }
 class 預金者{

 }

上のコードで2つの図ができます

それでは次に、静的な内容や動的な内容を加えましょう

属性（静的な内容）

classDiagram
 class 預金口座{
    預金者
    残高
    引出()
    預入()
 }
 class 預金者{
    名前
    年齢
    歩く()
    話す()
 }

これで２つの図に意味合いが吹き込まれます

図の間に関連性を描く

上記の内容で図（ノード）が２つできました

クラス図で重要なのは「関係性」を線で描くことです

プログラミングの観点だと数種類あるのですが、今回は単なる線と矢印付きでの表現のみを紹介します

単なる線

線の種類がいずれにしろ、線を図の間に引くときには図を描いた後に引きます

    歩く()
    話す()
 }
 預金口座--預金者

単なる線の時には両クラス図間を—で結びます

矢印付き

以下は線の両端に矢印を付ける方法ですが、片方だけにすることもできます

    歩く()
    話す()
 }
 預金口座<-->預金者

矢印の種類は「|」を付けるかつけないで調整できます

|を付けない–>の場合は以下です

|を付ける–|>の場合は以下になります

＜まとめ＞

今回はMermaidコードでの概念整理の表現方法を紹介させて頂きました

図の種類としてはフローチャート図、マインドマップ図とクラス図の３つを紹介させて頂きました

それぞれの図の詳細な内容についてはまた別の記事で書きたいと思います