入出力・保存・文書を表す形を使ってみよう！｜Mermaid図形表現 #1-13

ふじけん先生

2026年4月13日 09:00

～データの出入りや保管先を示すノードたち～

Markdownで使えるMermaid図式表現・フローチャート編 #1-13

🧭 この記事のゴール

入力・出力を表すノード形状を知る
データの保存先を図で描き分けられるようになる
文書や帳票を表すノードを Mermaid で使えるようになる

✅ この記事を読むとできること

入力と出力を見た目で区別できる
データベースや保存先をフローチャートに入れられる
文書や複数文書をノードとして表現できる
フロー図に「処理以外の意味」を加えられる

📌 本シリーズについて

🗓️ 毎週月曜日、続々お届け 🚀

VSCode 1.121（2026-05-20 リリース更新版）より、
「Markdown Preview Mermaid Support」拡張機能の機能が、
VSCode 本体へ統合されました。

今後は、VSCode 標準機能として、
Markdown 内で Mermaid をよりシームレスに利用できる環境へ移行していくと考えられます。

本シリーズでは、実際の動作確認を行いながら、順次内容を更新していきます。

💡この記事のコードを使うときは、外側の「````markdown ～ ```` 」は削除してください。
中の ```mermaid ブロックだけでOK です。

はじめに

フローチャートというと、つい「処理の箱」を並べがちです。
でも実際の業務フローでは、

どこから入力されたのか
どこへ出力するのか
どこに保存するのか
それは文書なのか、データなのか

といった違いも大事です。

Mermaid の新しい shape を使うと、こうした役割の違いを 見た目で分けて表現 しやすくなります。
今回はその中でも、入出力・保存・文書 に関わる形をまとめて見ていきます。

入出力・保存・文書のノードたち

1. 入力／出力：右に傾いた平行四辺形 `lean-r`

`lean-r` は、入力または出力を表す形です。
公式一覧では Data Input/Output 系の shape として定義されています。

````markdown
```mermaid
flowchart TD
    A@{ shape: lean-r, label: "入力データ" }
```
````

✅ 表示例

ユーザー入力や外部データの受け取りを示す時に使いやすい形です。

2. 出力／入力：左に傾いた平行四辺形 `lean-l`

`lean-l` も Data Input/Output 系で、`lean-r` の反対向きです。
入力と出力を見た目で分けたい時に便利です。

````markdown
```mermaid
flowchart TD
    A@{ shape: lean-l, label: "出力結果" }
```
````

✅ 表示例

入力側を `lean-r`、出力側を `lean-l` にそろえると、図の意図が伝わりやすくなります。

3. データベース：円柱 `cyl`

`cyl` はデータベースやデータ保存を表す定番の形です。
公式一覧では Database storage として整理されています。

````markdown
```mermaid
flowchart TD
    A@{ shape: cyl, label: "データベース" }
```
````

✅ 表示例

DB 保存、マスタ情報、履歴テーブルなどを示したい時に向いています。

4. 直接アクセス記憶：横向き円柱 `h-cyl`

`h-cyl` は Direct Access Storage として定義されている形です。
通常の `cyl` よりも、保存媒体やストレージ寄りのニュアンスを出したい時に使えます。

````markdown
```mermaid
flowchart TD
    A@{ shape: h-cyl, label: "外部ストレージ" }
```
````

✅ 表示例

まずは `cyl` だけでも十分ですが、保存先の意味を細かく描き分けたい時に使えます。

5. 文書：帳票ノード `doc`

`doc` は文書そのものを表す shape です。
仕様書、申請書、帳票、レポートなど、紙や文書ファイルを意識したい時に使えます。

````markdown
```mermaid
flowchart TD
    A@{ shape: doc, label: "申請書" }
```
````

✅ 表示例

単なる処理ノードではなく、「これは文書です」と示したい時に便利です。

6. 複数文書：重なった文書 `docs`

`docs` は複数の文書を表す shape です。
一覧資料、複数帳票、添付資料セットなどに向いています。

````markdown
```mermaid
flowchart TD
    A@{ shape: docs, label: "関連資料" }
```
````

✅ 表示例

文書が1枚ではないことを、見た目だけで伝えられます。

7. 罫線入り文書：`lin-doc`

`lin-doc` は Lined Document として定義されている形です。
文書らしさをもう少し強調したい時に使えます。

````markdown
```mermaid
flowchart TD
    A@{ shape: lin-doc, label: "報告書" }
```
````

✅ 表示例

見た目の違いは細かいですが、帳票感を少し強めたい時に使いやすい形です。

まとめて並べるとこうなる

単体で見るより、役割の違いを並べて見ると分かりやすくなります。

````markdown
```mermaid
flowchart TD
    A@{ shape: lean-r, label: "入力" }
    B@{ shape: rect, label: "処理" }
    C@{ shape: cyl, label: "DB保存" }
    D@{ shape: doc, label: "帳票出力" }
    E@{ shape: lean-l, label: "結果表示" }

    A --> B
    B --> C
    B --> D
    D --> E
```
````

✅ 表示例