アイデアを形に！Markdown AI × Mermaidで広がる視覚化の可能性

はじめに

皆さんは、早口言葉に挑戦して、つい舌を噛んでしまったり、友達と笑いながら競争したりした経験はありませんか？また、子どもの頃、紙と鉛筆で迷路を描いて遊んだ思い出はありませんか？せっかく迷路の醍醐味を味わってほしかったのに、ゴールから逆に解いた『迷路オタ』や、鉛筆を走らせすぎてルートがぐちゃぐちゃに絡まり、迷路が迷子になってしまったり… 😵‍💫
そんなこともありましたよね。

本記事では、そんな懐かしい題材をテーマに、Markdown AI と Mermaid記法 を活用して、早口言葉の「なぜ噛んでしまうのか？」という謎を視覚化し、迷路の作成を楽しむ方法をご紹介します。
デジタルならではのメリット（再現性も配布も簡単！）を活かしつつ、新たな視覚化の楽しさを一緒に体験してみてください！

Markdown AIとは？

Markdown AI は、Markdown形式で簡単にWebページや記事を作成できるプラットフォームです。特に、視覚的な表現をサポートするMermaid記法を活用することで、誰でも魅力的な図やグラフを簡単に作成できます。
公式のチュートリアルも参考にできます：Markdown AI チュートリアル

Mermaidとは？

Mermaid は、テキストベースの記法を使って、フローチャートやタイムライン、ガントチャートなどを描けるツールです。コードを書く感覚で視覚的な図を作成できるため、特に教育現場や子どもたちの学びにも適しています。

この記事では、Mermaidを使った2つの活用例をお届けします。

1. 早口言葉の可視化: 音のリズムを視覚化する発声練習のサポート
2. Mermaidでアルファベット迷路に挑戦: 身近な迷路を作成する発想力と創造性の刺激

1. 早口言葉の可視化

早口言葉でつまずくのはなぜでしょう？リズムに乗り切れない？それとも音の繰り返しに惑わされる？そんな疑問を、グラフで視覚化してみると見えてくるものがあります。まずは誰もが知る早口言葉、「生麦生米生卵」を以下のようにグラフ化してみました。

Mermaidコードを見る

```mermaid
graph LR
    な --> ま
    ま --> む
    む --> ぎ
    ぎ --> な
    な --> ま
    ま --> ご
    ご --> め
    め --> な
    な --> ま
    ま --> た
    た --> ま
    ま --> ご
```

このグラフを見てみると、「な」と「ま」が頻繁に繰り返されていることが一目瞭然です。リズムが早いと、これらの音が脳内で混乱を引き起こし、つい噛んでしまう原因になるのかもしれません。

次に、別の早口言葉「隣の客はよく柿食う客だ」をグラフにしてみました。

Mermaidコードを見る

```mermaid
graph LR
    と --> な
    な --> り
    り --> の
    の --> きゃ
    きゃ --> く
    く --> は
    は --> よ
    よ --> く
    く --> か
    か --> き
    き --> く
    く --> う
    う --> きゃ
    きゃ --> く
    く --> だ
```

こちらも「きゃ」や「く」といった音が頻出していることがわかります。音が重複すると、スムーズに発音するのが難しくなる要因の一つかもしれません。こうして視覚化してみると、噛む原因やリズムのポイントが浮き彫りになりますね。

早口言葉をグラフにするだけで、意外な発見があるかもしれません。あなたもお気に入りの早口言葉をグラフ化してみてはいかがでしょう？

早口言葉をMermaidジェネレータをMarkdown AIで共有

早口言葉の好みは十人十色ですが、この記事にすべてを書ききることはできません。そこで、Markdown AI を活用し、早口言葉を入力するだけでMermaid記法のソースコードを生成するWebツールを作成しました。楽しく、簡単に視覚化を試してみてください！

👉 こちらのリンク からアクセスできます。

2. Mermaidでアルファベット迷路に挑戦

子どもの頃に紙と鉛筆で作った迷路。友達に解いてもらおうとしたら、汚れて見えにくくなったり、線が重なってぐちゃぐちゃになったり…そんな経験はもう必要ありません！Mermaidを使えば、デジタルで綺麗な迷路を簡単に作成でき、友達にも手軽に公開できます。

例えば、以下のような アルファベット迷路 を作成してみましょう。

Mermaidコードを見る

```mermaid
graph TD
    M <--> A:::thick
    A <--> R:::thick
    R <--> K:::thick
    K <--> D:::thick
    D <--> O:::thick
    O <--> W:::thick
    W <--> N:::thick
    N <--> A:::thick
    A <--> I:::thick
    I <--> M:::thick

    A <--> B
    B <--> C
    C <--> D
    D <--> E
    E <--> F
    F <--> G
    G <--> H
    H <--> I
    I <--> J
    J <--> K
    K <--> L
    L <--> M
    M <--> N
    N <--> O
    O <--> P
    P <--> Q
    Q <--> R
    R <--> S
    S <--> T
    T <--> U
    U <--> V
    V <--> W
    W <--> X
    X <--> Y
    Y <--> Z
    A[A: Start]
    Z[Z: Goal]
    classDef thick stroke-width:3px,stroke:#000;
```

迷路の遊び方

1. スタート地点の A からゴールの Z を目指しましょう。
2. 独自のルートやループを追加して、自分だけのオリジナル迷路を作ることも楽しめます。

迷路の遊び方はシンプルですが、進む道を自由に選ぶことで、新たなルートを見つけたり、攻略法を工夫する楽しさがあります。

Mermaidの特徴

1. 柔軟性の高いグラフ作成
   Mermaidでは、記述した順番に応じて迷路のレイアウトが自動的に決まります。そのため、コードの順序を変えるだけで、同じ迷路でも異なるデザインを楽しむことができます。
   この例では、「MARKDOWN AI」を先に配置することで、迷路内で目立つ位置に表示されるよう工夫しています。

2. 教育的な可能性
   Mermaidを使えば、迷路に学びの要素を加えることができます。たとえば、迷路内のポイントに 動物の名前、歴史用語、学んだ英単語 を設定することで、遊びながら知識を強化できます。
   また、「MARKDOWN AI」のように特定の言葉を強調表示することで、学習内容を視覚的に目立たせることができます。これにより、迷路が単なるゲームではなく、学びのツールとしても活用可能です。

3. カスタマイズのしやすさ
   Mermaidでは、迷路のルートやポイントを自由に編集できるため、自分だけのオリジナル迷路を作成できます。

   • アルファベット順に接続すれば、初心者でも楽しめるシンプルな迷路を作成可能です。（実は、上の例もアルファベット順で接続されています。）
   • 遠回りのルートやループを追加することで、探索や挑戦が楽しい複雑な迷路にもできます。

---

次のステップ: 最短経路を探してみよう！

アルファベット迷路の基本的な遊び方を楽しんだら、次は「最短経路」を見つけてみましょう。
Pythonには、こうしたグラフを解析するのに便利な NetworkX というライブラリがあります。このライブラリを使えば、迷路の最短経路を簡単に計算できます。さらに、その結果を Mermaid形式 で視覚化することで、どの道が最短だったかを一目で確認できます。

このコードでできること

1. 最短経路の計算

   • 開始地点からゴールまでの最短経路の自動計算
   • 複数の最短経路がある場合、そのすべての表示

2. 結果の出力

   • 最短経路数と各経路の詳細のコンソール出力

3. Mermaid形式での視覚化

   • 赤色の太線で強調表示した最短経路のMermaid形式での生成
   • Mermaidコードを含むHTMLファイルの自動生成

必要なライブラリ

NetworkXを使います。以下のコマンドでインストールしてください。

pip install networkx

サンプルコード

以下のPythonコードは、以下の手順を実行します。

1. Mermaid形式の迷路から最短経路の計算
2. 計算結果を強調表示したMermaid形式ソースコードの生成（Markdown AIへの直接貼り付け可能）
3. Mermaid形式をHTML形式に変換して保存（ブラウザで簡易プレビューの視覚確認用）

このコードの大きな特徴は、NetworkXの all_shortest_paths() を使って、複数の最短経路を効率的に計算できることです。複雑な経路計算を気にせず、どなたでも簡単に最短経路を計算し、活用できます。

最短経路の計算コード

import os
import base64
import networkx as nx
import webbrowser

def parse_mermaid_to_graph(mermaid_code):
    """
    Mermaid形式のグラフをNetworkXグラフに変換します。
    """
    G = nx.Graph()
    lines = mermaid_code.strip().split("\n")
    for line in lines:
        line = line.strip()
        if "<-->" in line:
            nodes = line.split("<-->")
            node1 = nodes[0].split(":::")[0].strip()
            node2 = nodes[1].split(":::")[0].strip()
            G.add_edge(node1, node2)
    return G

def generate_mermaid_for_path(mermaid_code, path):
    """
    指定された1つの経路を強調したMermaidコードを生成します。

    param mermaid_code: str, 元のMermaid形式のコード。
    param path: list, 強調する経路のノードリスト。
    return: str, Mermaid形式のコード。
    """
    lines = mermaid_code.strip().split("\n")
    result = []

    # 経路のエッジをセットに変換
    path_edges = set(zip(path, path[1:]))

    for line in lines:
        line = line.strip()
        if "<-->" in line:
            nodes = line.split("<-->")
            node1 = nodes[0].split(":::")[0].strip()
            node2 = nodes[1].split(":::")[0].strip()
            if (node1, node2) in path_edges or (node2, node1) in path_edges:
                result.append(f"    {node1}:::highlight <--> {node2}:::highlight")
            else:
                result.append(f"    {node1} <--> {node2}")
        elif "classDef" in line:
            continue
        else:
            result.append(line)

    # 強調表示スタイルを追加
    result.append("classDef highlight stroke:#ff0000,stroke-width:3px;")
    return "\n".join(result)

def save_mermaid_to_html(mermaid_code, filename):
    """
    MermaidコードをHTMLファイルとして保存する。

    param mermaid_code: str, Mermaid形式のコード。
    param filename: str, 保存するHTMLファイル名。
    """
    html_content = f"""
    <!DOCTYPE html>
    <html>
    <head>
        <script src=\"https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js\"></script>
        <script>mermaid.initialize({{startOnLoad:true}});</script>
    </head>
    <body>
        <div class=\"mermaid\">
        {mermaid_code}
        </div>
    </body>
    </html>
    """
    with open(filename, "w", encoding="utf-8") as file:
        file.write(html_content)
    abs_path = os.path.abspath(filename)
    webbrowser.open(f"file://{abs_path}")

# Mermaidのコードを入力
mermaid_code = """
graph TD
    M <--> A:::thick
    A <--> R:::thick
    R <--> K:::thick
    K <--> D:::thick
    D <--> O:::thick
    O <--> W:::thick
    W <--> N:::thick
    N <--> A:::thick
    A <--> I:::thick
    I <--> M:::thick

    A <--> B
    B <--> C
    C <--> D
    D <--> E
    E <--> F
    F <--> G
    G <--> H
    H <--> I
    I <--> J
    J <--> K
    K <--> L
    L <--> M
    M <--> N
    N <--> O
    O <--> P
    P <--> Q
    Q <--> R
    R <--> S
    S <--> T
    T <--> U
    U <--> V
    V <--> W
    W <--> X
    X <--> Y
    Y <--> Z
    A[A: Start]
    Z[Z: Goal]
    classDef thick stroke-width:3px,stroke:#000;
"""

# グラフ解析
G = parse_mermaid_to_graph(mermaid_code)
all_paths = list(nx.all_shortest_paths(G, source="A", target="Z"))

# 最短経路情報を取得
num_paths = len(all_paths)
path_length = len(all_paths[0])

# 最短経路の数と一覧を出力
print(f"最短経路数: {num_paths}")
print(f"最短経路長: {path_length}")
print("最短経路一覧:")
for i, path in enumerate(all_paths, start=1):
    print(f"最短経路{i}:", " --> ".join(path))

# 経路ごとにMermaidコードを生成してHTMLに保存
for i, path in enumerate(all_paths, start=1):
    highlighted_code = generate_mermaid_for_path(mermaid_code, path)
    filename = f"shortest_path_{i}.html"
    save_mermaid_to_html(highlighted_code, filename)
    print(f"経路{i}のHTMLを保存しました: {filename}")

コード概要

• parse_mermaid_to_graph()
  Mermaid形式のコードからNetworkXグラフへの変換処理

• generate_mermaid_for_path()
  最短経路を強調表示したMermaid形式ソースコードの生成

• save_mermaid_to_html()
  Mermaid形式のコードをHTMLファイルに変換し保存

出力例

たとえば、上で紹介した迷路では次の結果が得られます。

• 最短経路数：1
• 最短経路長：6
• 最短経路：A --> N --> W --> X --> Y --> Z
• Mermaid形式の視覚化：赤色の太線 で強調表示されたグラフ

Mermaidコードを見る

```mermaid
graph TD
    M <--> A
    A <--> R
    R <--> K
    K <--> D
    D <--> O
    O <--> W
    W:::highlight <--> N:::highlight
    N:::highlight <--> A:::highlight
    A <--> I
    I <--> M

    A <--> B
    B <--> C
    C <--> D
    D <--> E
    E <--> F
    F <--> G
    G <--> H
    H <--> I
    I <--> J
    J <--> K
    K <--> L
    L <--> M
    M <--> N
    N <--> O
    O <--> P
    P <--> Q
    Q <--> R
    R <--> S
    S <--> T
    T <--> U
    U <--> V
    V <--> W
    W:::highlight <--> X:::highlight
    X:::highlight <--> Y:::highlight
    Y:::highlight <--> Z:::highlight
A[A: Start]
Z[Z: Goal]
classDef highlight stroke:#ff0000,stroke-width:3px;
```

アルファベット迷路をMarkdown AIで共有

アルファベット迷路は、遊びながらアルファベット順やルート探索の楽しさを学べるシンプルで魅力的なチャレンジです。Markdown AI を活用して、初級・中級・上級の3種類をご用意しました。自分のレベルに合わせて、ぜひ挑戦してみてください！

👉 こちらのリンク からアクセスできます。

Markdown AI × Mermaidの魅力

最後に、Markdown AIとMermaidがどのような価値を提供するかを振り返ります。

Markdown AI × Mermaidで広がる世界✨

• ⚙️ 誰でも簡単に操作できる
  Mermaid記法を使えば、直感的に図表やグラフを作成可能。子どもから大人まで楽しめる、シンプルで親しみやすい環境を提供します。

• 📊 複雑な概念も視覚的に整理
  グラフやフローチャートを作成することで、難しいアイデアを簡単に共有。理解を深めるための強力なサポートを提供します。

• 🏫 教育現場での強力なサポート
  作成したコンテンツをワンクリックで共有。教材作成やオンライン授業での視覚支援ツールとして、幅広く活用できます。

Markdown AI × Mermaidは、アイデアを素早く形にし、広く共有するための強力なツールです。
「コードを書くだけで、思い描いたデザインが形になる」―そんな体験を、ぜひMarkdown AIで試してみてください！

👉 Markdown AIを試す: 公式サイト

まとめ

この記事では、Markdown AIを活用したMermaid記法の具体例として、「早口言葉の可視化」と「アルファベット迷路」をご紹介しました。

1. 早口言葉の可視化: 音のリズムや繰り返しを視覚的に表現し、楽しく発声のコツを学べる新しいアプローチ
2. アルファベット迷路: Mermaidで迷路を作成し、Pythonとの連携を通じて、視覚化とプログラミングの楽しさを同時に体感

実は、このアイデアのきっかけは、「AからZまでつなぐ」という某企業のロゴから生まれました。身近なデザインに目を向けることで、新しい発想や楽しいアイデアが次々と広がります。

例えば、Mermaidを使えば、Qiitaの中で循環し、その先で発見と形づくりが続いていくサイクルをこんなふうに表現できます。

「i」同士が繋がる瞬間、まるで新しいひらめきが生まれるような―そんな 「アイデアの循環」 を描きました。Markdown AI がそのひらめきを形に変え、それが Qiita に共有され、新たな発見と発想を生み続ける…。
Qiitaが 100万記事 を達成したことは、「アイデアが循環する場所」であることを何よりも物語っています。

Markdown AI × Mermaid で、誰でも楽しく視覚的でインタラクティブなコンテンツを作成できます。
あなたも、「iが繋がる」瞬間から生まれる発見を、独自のアイデアとして形にしてみませんか？

本記事のMarkdown AIで作成したページ

以下のリンクから、Markdown AIを活用して作成したコンテンツをご覧いただけます。

• 早口言葉可視化ジェネレータ
  👉 こちらからアクセス

• アルファベット迷路
  👉 こちらからアクセス

参加イベント

参考