---
title: 非IT向け 文章から図が描ける！ はじめての図解ガイド
tags:  #図解 #マーメイド技法  
author: [Yukiko](https://image.docswell.com/user/yukiko_it)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/L7LML3KPJR.jpg?width=480
description: 非IT向け 文章から図が描ける！ はじめての図解ガイド by Yukiko
published: October 13, 26
canonical: https://image.docswell.com/s/yukiko_it/ZGNYEL-2026-10-13-053830
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/L7LML3KPJR.jpg)

🐰
UDEMY COURSE ｜ 非IT向け
文章から図が描ける！
はじめての図解ガイド
Mermaid（マーメイド）を、プログラミングなしで使いこなす8章
うさうさ研修工房
1


# Page. 2

![Page Image](https://bcdn.docswell.com/page/4EMYMD22EW.jpg)

WELCOME
こんな方に向いています
向いている方
・仕事の手順や流れを、図で人に伝えたい
・PowerPointで図を描くのに時間がかかる
・IT経験はないが、パソコンの基本操作はできる
はじめに
別の講座が合う方
・システム設計の図（ER図・クラス図）を本格的に
学びたい
・プログラミングの学習が目的
（本講座は、業務の流れ図が中心です）
2


# Page. 3

![Page Image](https://bcdn.docswell.com/page/PER9V4M5J9.jpg)

BENEFITS
身につくと、こんないいことがあります
① 説明の時間が短くなる
1
文章で長く説明するより、流れが一目で伝わります（図は関係を位置で示せるため、探す手間が減ります）。
② 直すのがラクになる
2
箱の位置や矢印の長さを手で整えなくても、文字を直せば図が自動で整います。
③ 無料ではじめられる
3
編集サイトは無料で、インストールもアカウント登録も不要。AIに下書きを頼むこともできます。
はじめに
3


# Page. 4

![Page Image](https://bcdn.docswell.com/page/P7XQZ2VXEX.jpg)

HOW TO CHOOSE
PowerPointとの使い分け
PowerPointが向く場面
Mermaidが向く場面
・色や配置を自由に作り込みたい
・手順や流れ、分岐を図にしたい
・1枚のデザイン性を重視したい
・手順が変わるたびに直したい
・図が1回きりで、直す予定が少ない
・同じ形式の図を何枚も作りたい
はじめに
4


# Page. 5

![Page Image](https://bcdn.docswell.com/page/37K98MQ97D.jpg)

1
CHAPTER 1
そもそも「図解」と「Mermaid」とは？
文章だけだと、なぜ伝わりにくいのか
今日のゴール
Mermaidが「文字で図を描く道具」だと、自分の言葉で説明できる
Chapter 1
5


# Page. 6

![Page Image](https://bcdn.docswell.com/page/LJ3W2YP9J5.jpg)

WHAT IS MERMAID
Mermaidは「文字で描く図」
文字を書くと、図になる
1
「A → B」と書くだけで、箱と矢印の図が自動で出来上がります。
無料・インストール不要
2
ブラウザで公式の編集サイト（mermaid.live）を開くだけで使えます。
よくある誤解：「プログラミングが必要」
3
決まった書き方を真似するだけ。電卓の使い方を覚える感覚に近いです。
Chapter 1
6


# Page. 7

![Page Image](https://bcdn.docswell.com/page/8JDKZ5L8EG.jpg)

2
CHAPTER 2
最小限の準備：道具を開いてみよう
インストールなし、アカウントなしで始められます
今日のゴール
ブラウザで編集サイトを開き、図を書き出すまでの流れがわかる
Chapter 2
7


# Page. 8

![Page Image](https://bcdn.docswell.com/page/VEPKDG2W78.jpg)

TOOL
画面は「左に書く、右に図」
① mermaid.live を開く
1
ブラウザで検索して開きます。左が文字を書く場所、右が図の表示場所です。
② 左に書くと、右がすぐ変わる
2
書き間違えてもすぐ気づけます。何度でもやり直せます。
③ 注意：共有リンクに内容が含まれます
3
共有リンクは図の内容を含みます。個人情報・社外秘は入れず、会社のルールも確認しましょう。
Chapter 2
8


# Page. 9

![Page Image](https://bcdn.docswell.com/page/27VV16D97Q.jpg)

3
CHAPTER 3
図を作る3つの部品
箱・矢印・ラベルだけでできています
今日のゴール
箱と矢印とラベルを書き分けて、簡単な図が描ける
Chapter 3
9


# Page. 10

![Page Image](https://bcdn.docswell.com/page/5JGL2NY47L.jpg)

BASICS
［ ］は箱、--> は矢印
書くのはこれだけ
できあがる図
flowchart LR
A[起きる] --> B[朝ごはん]
起きる
朝ごはん
たとえ話：付箋（箱）を毛糸（矢印）でつなぐイメージ。LR は「左から右へ」の意味で
す。
Chapter 3
10


# Page. 11

![Page Image](https://bcdn.docswell.com/page/47QYPQMREP.jpg)

4
CHAPTER 4
【山場】1枚1メッセージで図を絞る
ここが一番大事です。ゆっくり進みます
今日のゴール
「何を伝える図か」を決め、盛り込みすぎない判断ができる
Chapter 4
11


# Page. 12

![Page Image](https://bcdn.docswell.com/page/KE4WYNVQJ1.jpg)

THE KEY IDEA
詰め込んだ図 vs 絞った図
詰め込んだ図
絞った図
・箱が15個以上
・箱は5〜7個
・色が6色
・色は2〜3色
・矢印が交差
・矢印は一方向
→ 読み手が立ち止まる
→ 流れがひと目でわかる
Chapter 4
12


# Page. 13

![Page Image](https://bcdn.docswell.com/page/L71Y653LJG.jpg)

RULES OF THUMB
迷ったときの3つの目安
① 箱は9個以内
1
人が一度に覚えられる数には限りがあります（Miller, 1956）。多いときは図を分けましょう。
② 色は3色以内、意味を固定
2
「完了＝緑」のように、色と意味を1対1にします。
③ 向きは1方向
3
左から右、または上から下に統一します。※どれも目安で、絶対の決まりではありません。
Chapter 4
13


# Page. 14

![Page Image](https://bcdn.docswell.com/page/G7WGW5PQE2.jpg)

BRIDGE
前半の知識は、後半でこう使います
Ch.2の道具 → Ch.5で実際に操作
1
mermaid.liveを開き、書いて、書き出します。
Ch.3の部品 → Ch.6で分岐つきに発展
2
箱・矢印・ラベルに「ひし形（分岐）」を足します。
Ch.4の山場 → Ch.7で自分の業務に適用
3
1枚1メッセージで、あなたの仕事の図を作ります。小休憩をはさみましょう☕
橋渡し
14


# Page. 15

![Page Image](https://bcdn.docswell.com/page/4JZL5NK3E3.jpg)

5
CHAPTER 5
最初の小さな成功体験
完璧でなくて大丈夫。まず形にします
今日のゴール
3つの箱の図を、自分の手で書いて書き出せる
Chapter 5
15


# Page. 16

![Page Image](https://bcdn.docswell.com/page/YE6W98QZEV.jpg)

FIRST SUCCESS
お題：お茶をいれる手順
書くのはこれだけ
できあがる図
flowchart LR
A[お湯をわかす ] --> B[茶葉を入れる ]
B --> C[ カップに注ぐ ]
お湯をわかす
茶葉を入れる
カップに注ぐ
書けたら、右上のActionsからPNGで書き出してみましょう。
Chapter 5
16


# Page. 17

![Page Image](https://bcdn.docswell.com/page/GE5MN9R9E4.jpg)

6
CHAPTER 6
分岐つきのミニ実践
「はい／いいえ」で道が分かれる図
今日のゴール
ひし形とラベルを使い、分岐のある手順図が描ける
Chapter 6
17


# Page. 18

![Page Image](https://bcdn.docswell.com/page/972952D5JR.jpg)

MINI PRACTICE
お題：経費精算の流れ
書くのはこれだけ
できあがる図
flowchart LR
A[領収書を集める ] --> B{確認できた?}
B -->|はい| C[申請書を出す ]
B -->|いいえ| D[上司に確認する ]
はい
領収書を集める
申請書を出す
確認できた?
いいえ
上司に確認する
つまずきやすい点：ラベルに半角の ( ) や : を入れると崩れます。" " で囲むと直
ります。
Chapter 6
18


# Page. 19

![Page Image](https://bcdn.docswell.com/page/DJY4KY267M.jpg)

7
CHAPTER 7
自分の業務を図にしてみよう
Chapter 4の「1枚1メッセージ」を使います
今日のゴール
自分の仕事を1枚の図にし、AIの下書きも確認して直せる
Chapter 7
19


# Page. 20

![Page Image](https://bcdn.docswell.com/page/V7NYRPW1E8.jpg)

YOUR OWN DIAGRAM
4ステップで自分の図を作る
① 伝えたいことを1文で決める
1
例：「新人が経費精算で迷わない」。これが図の目的です。
② 箱を付箋に書き出し、つなぐ
2
まず紙で。次にmermaid.liveへ。箱は9個以内を意識します。
③ AIに下書きを頼み、必ず自分で確認
3
AIの図は間違うことがあります。順番・分岐・言葉を人が見直します。個人情報は入れません。
Chapter 7
20


# Page. 21

![Page Image](https://bcdn.docswell.com/page/YJ9PM3XY73.jpg)

8
CHAPTER 8
振り返り＆次のステップ
ここまでできたあなたは、もう描けます
今日のゴール
作った図の使い道と、次に学ぶ図の種類がわかる
Chapter 8
21


# Page. 22

![Page Image](https://bcdn.docswell.com/page/GJ8DLM2KJD.jpg)

NEXT STEPS
作った図を使い、少しずつ広げよう
PNG・SVGで書き出して貼る
1
PowerPointやWordに画像として挿入できます。拡大しても荒れにくいのはSVGです。
他の図の種類も試せる
2
予定表（gantt）、やりとり（sequenceDiagram）など。まずは流れ図が書ければ十分です。
次の一歩：身近な手順を1つ図にする
3
完璧を目指さず、1枚つくって誰かに見せてみましょう。
Chapter 8
22


# Page. 23

![Page Image](https://bcdn.docswell.com/page/LJLML32PER.jpg)

🐰
おつかれさまでした！
箱・矢印・ラベルで、まず1枚。そこから広げていきましょう。
参考文献
Larkin, J. H., & Simon, H. A. (1987). Cognitive Science, 11(1), 65-100.（図の利点）
Sweller, J. (1988). Cognitive Science, 12(2), 257-285.
Miller, G. A. (1956). Psychological Review, 63(2), 81-97.
23