Markdown＋Mermaid ビューア の使い方

使い方

1. 左の欄（編集）に Markdown を書くと、右（プレビュー）にすぐ反映されます。画面が狭いときは、上のタブで「編集・プレビュー・目次」を切り替えます
2. いちばん左の「目次」には、見出し（# で始まる行）が並びます。押すとその見出しへ移動します。「目次」ボタンで出し入れできます
3. 「開く」で .md ファイルを読み込みます。ファイルを画面にドラッグ＆ドロップしても開けます
4. 「.md で保存」（Ctrl+S）で、今の内容を .md ファイルとしてダウンロードします
5. 「新規」で白紙に、「見本」で最初の見本の文章に戻ります

表・チェックリスト（- [ ]）・取り消し線（~~文字~~）・自動リンク・コードブロックなど、GitHub と同じ書き方（GFM）に対応しています。

ダウンロード版（オフライン）の使い方

1. 紹介ページの「ダウンロード」で、md-viewer.html を保存します（約 5.6MB）
2. 保存したファイルをダブルクリックします。Edge・Chrome・Firefox などのブラウザで開きます
3. そのまま使えます。インストールも、ブラウザの拡張機能も、インターネットへの接続も要りません

ファイルは USB メモリや共有フォルダに置いても使えます。職場のパソコンで使うときは、職場のルールに従ってください。

「ブラウザで試す」で開くページも、ダウンロードするものと同じファイルです。

Mermaid の図の書き方

```mermaid と ``` ではさんだ部分が図になります。書き換えると、少し待ってから（約 0.5 秒）図が描き直されます。

```mermaid
flowchart TD
  A[申請書を作る] --> B{上長の承認}
  B -- 承認 --> C[提出する]
  B -- 差し戻し --> A
```

対応している主な図：フローチャート（flowchart）、シーケンス図（sequenceDiagram）、ガントチャート（gantt）、クラス図、状態遷移図、ER 図、円グラフ（pie）、マインドマップ（mindmap）、タイムライン、ユーザージャーニー、Git グラフ、象限チャート、要求図、C4 図、サンキー図、XY チャート、ブロック図、パケット図、かんばん、アーキテクチャ図、レーダーチャート、ツリーマップ。ZenUML には対応していません。

書き方の誤りがあると、図の代わりにエラーの内容が出ます。

Excel の表の貼り付け

1. Excel やスプレッドシートで、表にしたいセルの範囲を選んでコピーします（1 行目が見出しの行になります）
2. 編集欄の、表を入れたい場所に貼り付けます（Ctrl+V）。Markdown の表に変換されて入ります
3. 変換せずに元の文字のまま入れたいときは、すぐに出るお知らせの「元の文字で貼り付け」を押します

「表の貼り付け」ボタンから、変換結果を確かめてから入れることもできます。自動で変換したくないときは、そこで「自動で変換する」のチェックを外します。

• 結合したセル・空のセルは、空欄になります
• セルの中の | は \| に、セルの中の改行は <br> になります
• 数字だけの列は右寄せになります
• コードブロック（``` の中）に貼り付けたときは変換しません

HTML への書き出し・印刷

「HTML 書き出し」を押すと、今の文書を 1 つの HTML ファイルとしてダウンロードします。Mermaid の図は SVG（画像の一種）として中に埋め込まれるので、ほかのファイルは要りません。書き出した HTML は JavaScript を使わずに表示できるので、受け取った人はブラウザで開くだけで、図も含めて読めます。

「印刷」を押すと、プレビューの部分だけを印刷します。プリンターの選択で「PDF に保存」を選ぶと PDF になります。表や図、コードブロックはページの途中で切れにくいようにしてあります（1 ページに収まらない大きな表は、ページをまたぎます）。

安全性（通信しない・無害化）

• 通信しない：ライブラリも含めてすべて 1 つのファイルに入っています。ブラウザの仕組み（Content-Security-Policy）で、外部からの読み込み・外部への送信を禁止しています。インターネット上の画像も表示しません
• 無害化：プレビューに出す前に、DOMPurify で HTML を無害化します。Markdown の中に <script> や onerror などが入っていても実行されません
• 図：Mermaid は securityLevel: 'strict'（いちばん厳しい設定）で動かしていて、図の中のリンクやクリックの処理は無効です
• 書き出した HTML：JavaScript を含みません。念のため、script 要素と on～ の属性を取り除いてから書き出します
• 広告・アクセス解析なし：md-viewer.html には入っていません（広告はこの使い方ページと紹介ページだけです）

ライセンス一覧

このツールのコードは MIT License です（GitHub）。md-viewer.html には、次のライブラリをそのまま埋め込んでいます。

mermaid の中には、d3（ISC）、dagre-d3-es・cytoscape・KaTeX・khroma・dayjs・lodash-es・langium（MIT）、chevrotain（Apache-2.0）、elkjs（Eclipse Public License 2.0）など、多くのパッケージが組み込まれています。elkjs のソースコードは github.com/kieler/elkjs（バージョン 0.9.3）から入手できます。

すべてのパッケージのライセンス全文は、THIRD_PARTY_LICENSES.txt と、md-viewer.html の「ライセンス」ボタンで見られます。

よくある質問

無料で使えますか？

はい。会員登録もインストールも不要で、ダウンロードした HTML ファイルをブラウザで開くだけで使えます。

インストールや管理者の権限は要りますか？

要りません。md-viewer.html はふつうの HTML ファイルなので、ダブルクリックするとお使いのブラウザで開きます。ただし、職場によってはダウンロードしたファイルの利用に決まりがあります。その場合は職場のルールに従ってください。

本当にインターネットに通信しませんか？

はい。ライブラリも含めてすべて 1 つのファイルに入っていて、外部のサーバーには接続しません。ブラウザの仕組み（Content-Security-Policy）でも、外部からの読み込みと送信を禁止しています。そのため、インターネット上の画像も表示しません。文書の中のリンクは、押したときだけ新しいタブで開きます。

書いた内容はどこに保存されますか？

書きかけの内容は、お使いのブラウザの中（localStorage）に下書きとして自動で保存されます。外部には送信しません。残しておきたい文書は「.md で保存」でファイルに保存してください。ブラウザの設定やファイルを置く場所を変えると、下書きが見えなくなることがあります。

書き出した HTML は、相手の環境で見られますか？

図は SVG という形で HTML の中に埋め込まれ、JavaScript を使わずに表示できます。Edge・Chrome・Firefox・Safari などの新しいブラウザなら、ファイルを開くだけで図も含めて読めます。

画像は入れられますか？

通信しない作りのため、URL や別のファイルを指定した画像は表示しません（data: で始まる形の画像だけ表示します）。図は Mermaid で書くのがおすすめです。

Mermaid の図が表示されません。

書き方に誤りがあると、図の代わりに「図を描けませんでした」とエラーの内容が出ます。フローチャート・シーケンス図・ガントチャートなど、多くの種類に対応していますが、ZenUML には対応していません。

Shift_JIS の .md ファイルも開けますか？

はい。UTF-8 として読めないファイルは Shift_JIS として読みます。保存するときは UTF-8 になります。

スマホでも使えますか？

「ブラウザで試す」から使えます。画面が狭いときは「編集・プレビュー・目次」をタブで切り替えます。ダウンロードしたファイルを開く方法は機種によって違うため、主にパソコンでの利用を想定しています。

ご利用上の注意・データの扱い

• 保存されるデータ：書きかけの文書と開いたファイルの名前を、お使いのブラウザの中（localStorage の md-viewer_draft）に、表の自動変換などの設定を md-viewer_settings に保存します。外部には送信しません。ブラウザのデータを消すと下書きも消えるので、残したい文書は「.md で保存」で保存してください
• 保存できない環境：ブラウザの設定などで下書きを保存できないときは、画面の下に 1 回だけお知らせを出します。その場合は閉じる前に「.md で保存」で保存してください
• ファイルの扱い：開いた .md ファイルはブラウザの中で読むだけで、どこにも送信しません。保存・書き出しはダウンロードとして行います
• 表示の違い：Markdown の細かい解釈や図の見た目は、GitHub などほかのツールと少し違うことがあります。大切な文書は、書き出した結果を確かめてからお使いください

ご要望・不具合の報告（Google フォーム）：いただいた内容をもとに直します。お返事はしていません。

サイト全体の運営者情報・免責事項はこちら、プライバシーポリシーはこちらです（すべてのツールで共通）。

更新履歴

• 2026年9月23日 公開