はじめに
この記事は、前回の記事
【コピペして試せる】Qiitaでよく使うMarkdown記法まとめ — 書きながら覚えられるMarkdown Editorも作っています【Windows / macOS / Linux対応】
の続編です。
前回は Markdown 記法全体を広く扱いましたが、今回はその中でも Mermaid に絞って、公式ドキュメントに出てくる主要な Syntax を、実際に試しながら学べる形 で整理しました。
Mermaid は、フローチャート、シーケンス図、ER 図、ガントチャートのような図を、テキストだけで管理できる のが大きな魅力です。
画像で管理するよりも修正しやすく、差分も見やすく、Markdown ともとても相性がいいです。
ただ、Mermaid は種類が多く、最初は「どれをどう使えばいいのか」が少しわかりにくいこともあります。
そこでこの記事では、単なる表示確認ではなく、何に向いているのか、どんな書き方をするのか、どう練習すれば身につくのか を意識してまとめました。
また、今回はすべてのサンプルについて、
- 実際の表示例
- コピペしてそのまま試せる元コード
- すぐ試せる小さな練習
をセットで載せています。
読むだけで終わらせず、Editor に貼って、単語を自分のテーマに置き換えてみてください。
Mermaid は、見るだけよりも、少し書き換えて試す ほうがずっと早く身につきます。
現在、Vibe Coding でデスクトップ版の Markdown Editor を開発しています。
Windows / macOS / Linux に対応していて、Free Forever で公開しています。
最新版のダウンロードはこちらです。
https://github.com/engchina/no.1-markdown-editor/releases
Mermaid 公式サイトはこちらです。
https://mermaid.js.org/
この記事の使い方
おすすめの使い方はシンプルです。
- 気になるサンプルをそのまま Editor に貼る
- ラベルやノード名を、自分のテーマに置き換える
- 要素を 1 つ追加してみる
- 記事・設計メモ・学習ノートとして再利用する
この流れで触ると、Mermaid を「見たことがある」から「自分で書ける」状態にしやすくなります。
最初に覚えるならこの順番
全部を一度に覚える必要はありません。
まずは次の順番がおすすめです。
- Flowchart
- Sequence Diagram
- Gantt
- GitGraph
- ER Diagram
- Pie Chart / XY Chart
- 余裕が出てきたら C4、Architecture、Sankey など
1. まず覚えたい基本 Syntax
Flowchart
Flowchart は、処理の流れや分岐を表すときに最初に覚えたい構文です。
ログイン処理、画面遷移、問い合わせフロー、承認フローなどに向いています。
まずは実際の表示例です。
次に、コピペしてそのまま試せる元コードです。
```mermaid
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
練習してみること
Hard edge や Decision を、自分のアプリの処理名に置き換えてみてください。
Sequence Diagram
Sequence Diagram は、誰がどの順番でやり取りするかを時系列で表現する構文です。
フロントエンド、API、DB の流れを説明したいときに特に便利です。
まずは実際の表示例です。
次に、コピペしてそのまま試せる元コードです。
```mermaid
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
```
練習してみること
登場人物を User、Frontend、API、DB に置き換えて、ログイン処理を書いてみてください。
User Journey
User Journey は、ユーザーがある目的を達成するまでの流れを高い粒度で整理する構文です。
UX や利用体験の共有に向いています。
まずは実際の表示例です。
次に、コピペしてそのまま試せる元コードです。
```mermaid
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
```
練習してみること
「記事を書く」「会員登録する」など、自分の体験を 2 セクションに分けて書いてみてください。
Gantt
Gantt は、タスクを時間軸で並べてスケジュールを見せる構文です。
学習計画、開発予定、記事執筆の進行管理にも向いています。
まずは実際の表示例です。
次に、コピペしてそのまま試せる元コードです。
```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :until isadded
Functionality added :milestone, isadded, 2014-01-25, 0d
```
練習してみること
日付とタスク名を、自分の 1 週間の学習計画や開発予定に置き換えてみてください。
Pie Chart
Pie Chart は、全体に対する構成比をシンプルに見せたいときに向いています。
工数、時間配分、学習割合などを可視化したいときに便利です。
まずは実際の表示例です。
次に、コピペしてそのまま試せる元コードです。
```mermaid
---
config:
pie:
textPosition: 0.5
themeVariables:
pieOuterStrokeWidth: "5px"
---
pie showData
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
```
練習してみること
「学習」「実装」「テスト」のように、自分の作業比率で書いてみてください。
GitGraph
GitGraph は、コミット、ブランチ、マージの流れを図にする構文です。
Git の運用ルールやワークフロー共有にとても向いています。
まずは実際の表示例です。
次に、コピペしてそのまま試せる元コードです。
```mermaid
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
```
練習してみること
main と feature/login を使って、自分の開発フローを書いてみてください。
2. 設計と構造を整理する Syntax
Class Diagram
Class Diagram は、クラス、属性、メソッド、継承関係を表す構文です。
オブジェクト指向設計や概念整理の共有に向いています。
まずは実際の表示例です。
次に、コピペしてそのまま試せる元コードです。
```mermaid
---
title: Animal example
---
classDiagram
note "From Duck till Zebra"
Animal <|-- Duck
note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
```
練習してみること
User、Post、Comment の 3 クラスだけで、簡単な構造図を書いてみてください。
State Diagram
State Diagram は、状態と状態遷移を表現する構文です。
注文状態、公開状態、ジョブ状態などの整理に向いています。
まずは実際の表示例です。
次に、コピペしてそのまま試せる元コードです。
```mermaid
stateDiagram
classDef yourState font-style:italic,font-weight:bold,fill:white
yswsii: Your state with spaces in it
[*] --> yswsii:::yourState
[*] --> SomeOtherState
SomeOtherState --> YetAnotherState
yswsii --> YetAnotherState
YetAnotherState --> [*]
```
練習してみること
「下書き → レビュー → 公開」のような状態遷移に書き換えてみてください。
Entity Relationship Diagram
ER Diagram は、エンティティとその関係を整理する構文です。
DB 設計や業務ドメインの共有にとても役立ちます。
まずは実際の表示例です。
次に、コピペしてそのまま試せる元コードです。
```mermaid
---
title: Order example
---
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
練習してみること
USER、POST、COMMENT など、自分が扱いやすい 3 つのエンティティで図を書いてみてください。
Requirement Diagram
Requirement Diagram は、要求とその関連要素を整理する構文です。
仕様整理や実装前の認識合わせに向いています。
まずは実際の表示例です。
次に、コピペしてそのまま試せる元コードです。
```mermaid
requirementDiagram
requirement test_req:::important {
id: 1
text: "class styling example"
risk: low
verifymethod: test
}
element test_entity {
type: simulation
}
classDef important font-weight:bold
class test_entity important
style test_entity fill:#f9f,stroke:#333
```
練習してみること
「ユーザーはログインできる」のような 1 つの要求だけでも書いてみてください。
C4 Diagram
C4 Diagram は、システムの関係を大きめの粒度で整理する構文です。
アーキテクチャの全体像を説明したいときに便利です。
まずは実際の表示例です。
次に、コピペしてそのまま試せる元コードです。
```mermaid
C4Component
title Component diagram for Internet Banking System - API Application
Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile device.")
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
Container_Boundary(api, "API Application") {
Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
Rel(sign, security, "Uses")
Rel(accounts, mbsfacade, "Uses")
Rel(security, db, "Read & write to", "JDBC")
Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
}
Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
Rel(spa, accounts, "Uses", "JSON/HTTPS")
Rel(ma, sign, "Uses", "JSON/HTTPS")
Rel(ma, accounts, "Uses", "JSON/HTTPS")
UpdateRelStyle(spa, sign, $offsetY="-40")
UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
UpdateRelStyle(ma, accounts, $offsetY="-40")
UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10")
UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
UpdateRelStyle(security, db, $offsetY="-40")
UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
```
練習してみること
まずは User、Web App、API、DB の 4 つだけに減らして書いてみると理解しやすいです。
Architecture
Architecture Diagram は、クラウドやインフラ構成を直感的に見せる構文です。
サービス同士のつながりをざっくり共有したいときに向いています。
まずは実際の表示例です。
次に、コピペしてそのまま試せる元コードです。
```mermaid
architecture-beta
group api(cloud)[API]
service db(database)[Database] in api
service disk1(disk)[Storage] in api
service disk2(disk)[Storage] in api
service server(server)[Server] in api
db:L -- R:server
disk1:T -- B:server
disk2:T -- B:db
```
練習してみること
Server、Database、Storage の 3 要素だけで、自分のシステム構成を書いてみてください。
Block Diagram
Block Diagram は、複雑な処理や構成を、箱と矢印でざっくり整理したいときに便利です。
厳密な UML より軽く図を作りたいときに向いています。
まずは実際の表示例です。
次に、コピペしてそのまま試せる元コードです。
```mermaid
block
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:#969,stroke:#333,stroke-width:4px
```
練習してみること
Input → Process → Output の 3 ブロックだけで、今作っている機能を表してみてください。
Packet
Packet Diagram は、ネットワークパケットやビット構造を表現する構文です。
通信系やプロトコルを説明したいときに役立ちます。
まずは実際の表示例です。
次に、コピペしてそのまま試せる元コードです。
```mermaid
---
title: "TCP Packet"
---
packet
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment Number"
96-99: "Data Offset"
100-105: "Reserved"
106: "URG"
107: "ACK"
108: "PSH"
109: "RST"
110: "SYN"
111: "FIN"
112-127: "Window"
128-143: "Checksum"
144-159: "Urgent Pointer"
160-191: "(Options and Padding)"
192-255: "Data (variable length)"
```
練習してみること
最初は Source Port、Destination Port、Checksum くらいまでに減らして試すと理解しやすいです。
TreeView
TreeView は、ディレクトリ構造や階層データをそのまま表現しやすい構文です。
ソースツリーやパッケージ構成の共有に向いています。
まずは実際の表示例です。
2026/04/04 時点、QiitaはTreeViewをサポートしていないようです。
次に、コピペしてそのまま試せる元コードです。
```mermaid
treeView-beta
"packages"
"mermaid"
"src"
"parser"
```
練習してみること
自分のプロジェクトのフォルダ構成を 2〜3 階層だけ書いてみてください。
3. 比較と分析に向く Syntax
Quadrant Chart
Quadrant Chart は、2 軸で評価や優先順位を整理したいときに向いています。
「難しさ × 効果」「重要度 × 緊急度」などの整理に便利です。
まずは実際の表示例です。
次に、コピペしてそのまま試せる元コードです。
```mermaid
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.9, 0.0] radius: 12
Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10
Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
Campaign E:::class2: [0.5, 0.4]
Campaign F:::class3: [0.4, 0.5] color: #0000ff
classDef class1 color: #109060
classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
classDef class3 color: #f00fff, radius : 10
```
練習してみること
学習テーマや機能案を、「やさしい ↔ むずかしい」「効果が低い ↔ 高い」で置いてみてください。
XY Chart
XY Chart は、棒グラフや折れ線グラフで数値を可視化する構文です。
月別データ、売上、学習時間の推移などに向いています。
まずは実際の表示例です。
次に、コピペしてそのまま試せる元コードです。
```mermaid
xychart
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```
練習してみること
月ごとの学習時間や投稿数を 6 か月分くらいで入れてみてください。
Radar
Radar Diagram は、複数の項目を多面的に比較したいときに向いています。
機能比較、ツール比較、自己評価の見える化にも便利です。
まずは実際の表示例です。
次に、コピペしてそのまま試せる元コードです。
```mermaid
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
```
練習してみること
比較したい 2 つのツールを、速度、学習コスト、柔軟性 など 5 項目で比べてみてください。
Sankey
Sankey は、ある値がどこからどこへ流れるかを表す構文です。
工数配分、予算配分、エネルギーの流れなどを可視化するのに向いています。
まずは実際の表示例です。
2026/04/04 時点、QiitaはSankeyをサポートしていないようです。
次に、コピペしてそのまま試せる元コードです。
```mermaid
---
config:
sankey:
showValues: false
---
sankey
Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597
Bio-conversion,Losses,26.862
Bio-conversion,Solid,280.322
Bio-conversion,Gas,81.144
Biofuel imports,Liquid,35
Biomass imports,Solid,35
Coal imports,Coal,11.606
Coal reserves,Coal,63.965
Coal,Solid,75.571
District heating,Industry,10.639
District heating,Heating and cooling - commercial,22.505
District heating,Heating and cooling - homes,46.184
Electricity grid,Over generation / exports,104.453
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,H2 conversion,27.14
Electricity grid,Industry,342.165
Electricity grid,Road transport,37.797
Electricity grid,Agriculture,4.412
Electricity grid,Heating and cooling - commercial,40.858
Electricity grid,Losses,56.691
Electricity grid,Rail transport,7.863
Electricity grid,Lighting & appliances - commercial,90.008
Electricity grid,Lighting & appliances - homes,93.494
Gas imports,Ngas,40.719
Gas reserves,Ngas,82.233
Gas,Heating and cooling - commercial,0.129
Gas,Losses,1.401
Gas,Thermal generation,151.891
Gas,Agriculture,2.096
Gas,Industry,48.58
Geothermal,Electricity grid,7.013
H2 conversion,H2,20.897
H2 conversion,Losses,6.242
H2,Road transport,20.897
Hydro,Electricity grid,6.995
Liquid,Industry,121.066
Liquid,International shipping,128.69
Liquid,Road transport,135.835
Liquid,Domestic aviation,14.458
Liquid,International aviation,206.267
Liquid,Agriculture,3.64
Liquid,National navigation,33.218
Liquid,Rail transport,4.413
Marine algae,Bio-conversion,4.375
Ngas,Gas,122.952
Nuclear,Thermal generation,839.978
Oil imports,Oil,504.287
Oil reserves,Oil,107.703
Oil,Liquid,611.99
Other waste,Solid,56.587
Other waste,Bio-conversion,77.81
Pumped heat,Heating and cooling - homes,193.026
Pumped heat,Heating and cooling - commercial,70.672
Solar PV,Electricity grid,59.901
Solar Thermal,Heating and cooling - homes,19.263
Solar,Solar Thermal,19.263
Solar,Solar PV,59.901
Solid,Agriculture,0.882
Solid,Thermal generation,400.12
Solid,Industry,46.477
Thermal generation,Electricity grid,525.531
Thermal generation,Losses,787.129
Thermal generation,District heating,79.329
Tidal,Electricity grid,9.452
UK land based bioenergy,Bio-conversion,182.01
Wave,Electricity grid,19.013
Wind,Electricity grid,289.366
```
練習してみること
最初はデータを 5〜6 行だけに減らして、「学習 → 記事作成」「学習 → 設計共有」などの流れで試してみてください。
Treemap
Treemap は、階層構造と比率を同時に見せる構文です。
カテゴリごとの割合比較をしたいときに向いています。
まずは実際の表示例です。
次に、コピペしてそのまま試せる元コードです。
```mermaid
treemap-beta
"Category A"
"Item A1": 10
"Item A2": 20
"Category B"
"Item B1": 15
"Item B2": 25
```
練習してみること
Frontend と Backend のような大分類を作って、作業割合を書いてみてください。
Venn
Venn は、集合の重なりや共通部分を見せる構文です。
担当範囲、スキルの重なり、機能の共通点整理に向いています。
まずは実際の表示例です。
2026/04/04 時点、QiitaはVennをサポートしていないようです。
次に、コピペしてそのまま試せる元コードです。
```mermaid
venn-beta
title "Team overlap"
set Frontend
set Backend
union Frontend,Backend["APIs"]
```
練習してみること
Design、Frontend、Backend など、自分の役割の重なりを書いてみてください。
Ishikawa
Ishikawa Diagram は、問題の原因を整理するための図です。
不具合分析や振り返りのときにとても役立ちます。
まずは実際の表示例です。
2026/04/04 時点、QiitaはIshikawaをサポートしていないようです。
次に、コピペしてそのまま試せる元コードです。
```mermaid
ishikawa-beta
Blurry Photo
Process
Out of focus
Shutter speed too slow
Protective film not removed
Beautification filter applied
User
Shaky hands
Equipment
LENS
Inappropriate lens
Damaged lens
Dirty lens
SENSOR
Damaged sensor
Dirty sensor
Environment
Subject moved too quickly
Too dark
```
練習してみること
最近困ったことを 1 つ選んで、人、環境、手順 などに分けて原因を書き出してみてください。
4. 発想整理や特殊表現の Syntax
Mindmap
Mindmap は、中心テーマから枝分かれする形でアイデアを整理する構文です。
記事構成づくり、企画、学習ノートに向いています。
まずは実際の表示例です。
2026/04/04 時点、QiitaはMindmapをサポートしていないようです。
次に、コピペしてそのまま試せる元コードです。
```mermaid
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid
```
練習してみること
次に書きたい記事のテーマを真ん中に置いて、3 つくらい枝を伸ばしてみてください。
Timeline
Timeline は、時系列に沿って出来事を並べる構文です。
歴史、リリース履歴、学習記録などを見せるのに向いています。
まずは実際の表示例です。
次に、コピペしてそのまま試せる元コードです。
```mermaid
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : YouTube
2006 : Twitter
```
練習してみること
自分の学習履歴やプロダクトのリリース履歴を 4〜5 個だけ並べてみてください。
ZenUML
ZenUML は、Mermaid 上で ZenUML の記法を使ってシーケンスを表現する構文です。
標準の Sequence Diagram とは違う書き方を知るきっかけにもなります。
まずは実際の表示例です。
2026/04/04 時点、QiitaはMindmapをサポートしていないようです。
次に、コピペしてそのまま試せる元コードです。
```mermaid
zenuml
a = A.SyncMessage()
SomeType a = A.SyncMessage()
A.SyncMessage() {
return result
}
@return
A->B: result
```
練習してみること
標準の Sequence Diagram と見比べて、どちらの書き方が自分に合うか確認してみてください。
Kanban
Kanban は、タスクがワークフローのどこにあるかを列で見せる構文です。
個人の TODO 管理やチームの進捗共有に向いています。
まずは実際の表示例です。
次に、コピペしてそのまま試せる元コードです。
```mermaid
---
config:
kanban:
ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
---
kanban
Todo
[Create Documentation]
docs[Create Blog about the new diagram]
[In progress]
id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
id9[Ready for deploy]
id8[Design grammar]@{ assigned: 'knsv' }
id10[Ready for test]
id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
id11[Done]
id5[define getData]
id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
id12[Can't reproduce]
id3[Weird flickering in Firefox]
```
練習してみること
まずは Todo、In progress、Done の 3 列だけで、今日やることを並べてみてください。
まとめ
今回は、Mermaid の主要な Syntax を、見るだけでなく、そのままコピペして試せる形 でまとめました。
この記事では、すべてのサンプルについて
- 実際の表示例
- コピー用の元コード
- 小さな練習
をセットにしています。
Mermaid は、一覧を眺めるだけではなかなか身につきません。
実際に貼って、少し変えて、崩して、直してみることで、はじめて「自分で書ける記法」になっていきます。
特に最初の一歩としておすすめなのは、次のあたりです。
- Flowchart
- Sequence Diagram
- Gantt
- GitGraph
- ER Diagram
このあたりが使えるようになるだけでも、記事、設計メモ、開発ドキュメントの伝わりやすさはかなり変わります。
また、この Editor では OpenAI と OCI Enterprise AI との連携も進めています。
今後は Mermaid の表示だけでなく、学習支援、補完、改善提案のような方向でも、もっと使いやすくしていければと考えています。
最新版のダウンロードはこちらです。
https://github.com/engchina/no.1-markdown-editor/releases
あとで見返して練習できるように、この記事は ストックしておくと便利 だと思います。
役に立ったら、いいね や ストック をしてもらえるとうれしいです。