Markdown確認ツール
Markdownをリアルタイムでプレビュー。Mermaid記法の図も描画
Markdown
```mermaid で囲んだ部分は図として描画されま す
表示設定
プレビュー
Markdownを入力すると、ここにプレビューが表示されます
Markdown確認について
- • 見出し・リスト・表・タスクリスト・コードブロックなど、GitHub形式のMarkdownに対応しています
- • ```mermaid ブロックはフローチャートやシーケンス図などの図として描画されます
- • Mermaidの構文エラーは、そのブロックの位置にだけ表示されます
- • 処理はすべてブラウザ内で完結します
Markdown確認の使い方
- 1 Markdownを入力欄に入力する（「サンプル」ボタンで例を読み込むことも可能）
- 2 右側のプレビューにレンダリング結果がリアルタイムで表示される
- 3 図を入れたい場所に ```mermaid ブロックを書く。必要に応じてMermaidのテーマを切り替える
- 4 「HTMLコピー」でHTMLを、「.md保存」でMarkdownファイルを保存する
このツールでできること
- Markdownを入力すると、リアルタイムでプレビューを更新
- 見出し・リスト・表・タスクリスト・取り消し線・コードブロックなどGitHub形式のMarkdownに対応
- ```mermaid ブロックを図として描画（フローチャート・シーケンス図・クラス図・ガントチャート・ER図など）
- Mermaidの構文エラーはそのブロックの位置にだけ表示され、他の部分は通常どおり表示
- プレビューのHTMLコピーとMarkdownの.md保存に対応。処理はすべてブラウザ内で完結
こんな場面で使えます
READMEやドキュメントを書くときに
GitHubなどに載せる前に、見出しや表、コードブロックが意図どおりに表示されるかをその場で確認できます。
設計書やブログ記事に図を入れたいときに
Markdownの中にMermaidのコードブロックを書けば、文章と図を並べた状態でプレビューできます。図だけを画像で保存したい場合は「Mermaid確認」ツールが便利です。
メモや議事録を整形したいときに
タスクリストや表を使ったメモをプレビューしながら整え、HTMLとしてコピーして他のツールに貼り付けられます。
よくある質問
- Q. Markdown中のMermaidはどう書けばよいですか？
- A. ```mermaid で始まるコードブロックの中にMermaid記法を書くと、プレビューで図として描画されます。複数のブロックを書くこともできます。
- Q. どの範囲のMarkdown記法に対応していますか？
- A. 見出し、リスト、番号付きリスト、タスクリスト、表、引用、コードブロック、リンク、画像、取り消し線など、GitHub形式（GFM）のMarkdownに対応しています。
- Q. Mermaidの構文エラーがあるとどうなりますか？
- A. エラーのあるブロックの位置にだけエラーメッセージが表示され、それ以外のMarkdownは通常どおりプレビューされます。
- Q. HTMLタグやスクリプトを書いても大丈夫ですか？
- A. プレビューのHTMLはサニタイズされるため、スクリプトなどの危険な要素は実行されません。
- Q. 入力した内容は外部に送信されますか？
- A. いいえ。変換から図の描画まですべてブラウザ内のJavaScriptで完結するため、入力した内容が外部に送信されることはありません。ただし、Markdownに外部URLの画像を書いた場合は、その画像の取得のためにURL先へアクセスします。