Markdown＋Mermaid ビューアの使い方

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

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

1. 紹介ページの「ダウンロード」で、md-viewer.html を保存します（約 5.6MB）
2. 保存したファイルをダブルクリックします。Edge・Chrome・Firefox などのブラウザで開きます
3. そのまま使えます

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

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

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

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

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

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

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

書き換えると、少し待ってから（約 0.5 秒）図が描き直されます。

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

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

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

• 保存されるデータ：書きかけの文書と開いたファイルの名前を md-viewer_draft に、表の自動変換などの設定を md-viewer_settings に保存します。ブラウザのデータを消すと下書きも消えます。ブラウザの設定やファイルを置く場所を変えると、下書きが見えなくなることがあります
• 保存できない環境：ブラウザの設定などで下書きを保存できないときは、画面の下に 1 回だけお知らせを出します。その場合は閉じる前に「.md で保存」で保存してください
• ファイルの扱い：保存・書き出しはダウンロードとして行います。保存するときは UTF-8 になります

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 の「ライセンス」ボタンで見られます。