# 市民開発者がMermaid記法を知って変わったこと

- 公開日: 2026-02-11
- カテゴリ: Power Platform
- 著者: tan（@kama_bizdev）
- URL: https://flow-with-tech.com/citizen-developer-mermaid-changed/
- サイト: 改善紀 — 好奇心の赴くままに。

---

# はじめに

みなさんPower Platformでアプリやフローを作るときに、何から始めていますか？いきなり作り始めて手探りでやって行くのも最高におもろいですよね。ただ、行き詰まったり後から修正したりするときに、何をどう考えて作ったのかよく分からなくなった経験はありませんか？

私は最近Mermaid記法を知り、フロー図・エンティティ図・シーケンス図などを思考の整理のために簡単に書いています。これは**市民開発との相性がいいのでは**？と感じています。

今回は、私の実体験をもとにMermaid記法を知ることによって、市民開発にどんな変化があったのかをご紹介します。

# Mermaid記法とは？

テキストで図を描けるマークダウンベースの記法

> [Mermaidの公式サイトへのリンク](https://mermaid.js.org/)

# 結論：Mermaid記法を知る前と後の変化

![](https://flow-with-tech.com/media/wp/2026/02/CleanShot-2026-02-11-at-16.49.57@2x.png)

## Before：今まではこうやっていました

### フローや利用シーンの検討

なんとなく頭の中に描いていたのがほとんどです。やるとしてもPower PointとかOneNoteに書き出して作っていました。レイアウトを考える必要もあるので、結構大変でした。

### 必要なデータの設計

Excelで書き出すか、テキストエディタで書き出す。リレーションまで表現することができないので、その辺は結構適当にやっていました。

## After：Mermaid記法を知ってからこう変わった

### フローや利用シーンの検討

flowchartやsequenceDiagramを使って爆速で整理しています。特にフローチャートは一番最初に覚えることをお勧めします。ぱっと見難しそうですが、中身は結構単純なので、思いつくままに書き出すだけでフローチャートが描けるのは結構感動します。

![](https://flow-with-tech.com/media/wp/2026/02/CleanShot-2026-02-11-at-16.42.36@2x.png)

*実際に書いてみたフローチャート*

### 必要なデータの設計

Mermaid記法ではエンティティ図が書けます。テーブル名・PK・データ型・カラム名を定義して、リレーションまで表現して整理しています。これはアプリを作成した後に、誰かにデータの繋がりはこうなっていると説明する時にも使えます。設計がそのまま説明資料にもなるのが良い。

![](https://flow-with-tech.com/media/wp/2026/02/CleanShot-2026-02-11-at-16.45.35@2x.png)

*実際に書いてみたエンティティ図*

# なぜMermaid記法が良いのか

![](https://flow-with-tech.com/media/wp/2026/02/CleanShot-2026-02-11-at-16.54.22@2x.png)

## 考えることに集中できる

GUIは便利だがレイアウトを整えるというタスクが１つ増えます。

**テキストだと考えるというシンプルなことだけに集中できます**。

## 生成AIと相性が良い

Mermaid記法で下書きをして生成AIに投入をする。そうするとテキストで返信が返ってくる。そのまま手元で編集を継続できる。画像として生成されるとそうはいかない。Mermaid記法は生成AIと伴走する相性も良い。

## 設計＝説明資料になる

設計段階からMermaid記法で作成しておけば、後から誰かにアプリやフローの仕組みを説明するときの簡単な資料とすることもできます。特にフローやデータの設計は説明しづらいと思うので、資料があるといいですね。

# まとめ

Mermaid記法を使うことによって市民開発の設計スピードが格段に上がりました。

皆さんもまずは一番簡単なflowchartから試してみてはいかがでしょうか。

（あと、Mermaid記法をタイピングですらすら書いていると、**デキる感**が出て気持ちいです笑）

### **追記（2026.3.9）**

この記事の続編を書きました。Mermaid記法を覚えた市民開発者が、その後どうなったのか。正直に書きました。

> [Mermaid記法に感動した市民開発者の末路｜自分で書けるようになったから、書かなくてよくなった話](https://flow-with-tech.com/citizen-developer-mermaid-aftermath/)
