Markdown+Mermaid ビューア

インストール不要の Markdown エディタ。1 つの HTML ファイルを保存して、ダブルクリックで開くだけ。

ダウンロードして使う(無料)

本体は md-viewer.html という 1 つのファイルです。インストール不要・通信しないので、ソフトを入れられない職場の PC やネットにつながらない環境でも使えます。

「ブラウザで試す」は、ダウンロードするものと同じファイルを開きます。

使い方(3 ステップ)
  1. 上の「ダウンロード」で md-viewer.html を保存する(デスクトップや USB メモリなど、好きな場所へ)
  2. 保存したファイルをダブルクリックする(Edge・Chrome・Firefox などのブラウザで開きます)
  3. 左の欄に Markdown を書く。「開く」で .md ファイルを読み込むこともできます

はじめて開くと、見出し・表・チェックリスト・図の見本が出ます。

できること

編集とプレビューを左右に並べて表示、Mermaid の図、Excel の表を貼り付けて変換、1 つの HTML に書き出し。

くわしく
  • 編集とプレビューを左右に並べて表示:書くとすぐ反映。スマホでは「編集・プレビュー・目次」を切り替えます
  • GitHub と同じ書き方(GFM):表・チェックリスト・取り消し線・自動リンク・コードブロック
  • Mermaid の図:```mermaid のブロックを、フローチャート・シーケンス図・ガントチャートなどの図にします
  • 目次:見出しから自動で作り、押すとその場所へ移動
  • Excel の表を貼り付けて変換:セルの範囲をコピーして貼るだけで Markdown の表に
  • 1 つの HTML に書き出し:図は SVG で埋め込み。書き出したファイルは JavaScript なしで表示できるので、受け取った人の環境を選びません
  • 印刷・PDF:表や図がページの途中で切れにくい印刷用の見た目
  • .md を開く・保存:ファイルを選ぶか、画面にドラッグ&ドロップ。書きかけは自動で下書き保存

通信しない・安全に表示する

外部のサーバーには一切接続しません。書いた内容は、そのブラウザの中にだけ下書きとして保存されます。

くわしく
  • md-viewer.html は、ライブラリ(marked・mermaid・DOMPurify)もすべて 1 ファイルの中に入っています。外部のサーバーには一切接続しません(ブラウザの仕組み Content-Security-Policy でも通信を禁止しています)
  • Markdown の中に <script> などが入っていても実行されないよう、表示する前に無害化します
  • md-viewer.html には広告やアクセス解析は入っていません(広告はこの紹介ページと使い方ページだけです)

使い方・Excel の表の貼り付け・よくある質問

近い道具