Mermaid 対応 Markdown ビューアー・エディター

Markdown ドキュメント

Markdown ファイルを書く・貼り付ける・開くだけで、GitHub と同じようにすぐにプレビューできます。表、タスクリスト、脚注、アラート、Mermaid 図、LaTeX 数式、ハイライト付きコードに対応し、HTML としてダウンロードしたり PDF に保存したりすることもできます。すべての処理はブラウザー内で行われます。

スクロール同期

改行を反映

---
title: "サンプルドキュメント"
tags: [markdown, mermaid, katex]
---

# サンプルドキュメント

このテキストを編集すると、結果がすぐに表示されます。**太字**、*斜体*、~~取り消し線~~、`コード`、https://ittools.tech のようなリンク、脚注[^1] に対応しています。

> [!NOTE]
> GitHub のアラートも使えます。TIP、IMPORTANT、WARNING、CAUTION も試してみてください。

## タスクと表

- [x] README を書く
- [ ] 図を追加する

| HTTP | Endpoint | Status |
|:-------|:-----|-------:|
| `GET` | `/api/users` | 200 |
| `POST` | `/api/users` | 201 |
| `DELETE` | `/api/users/42` | 204 |

```typescript
async function getUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) throw new Error(response.statusText);
  return response.json();
}
```

## 図と数式

```mermaid
sequenceDiagram
    participant C as App
    participant A as API
    participant D as DB
    C->>A: GET /api/users/42
    A->>D: SELECT * FROM users WHERE id = 42
    D-->>A: row
    A-->>C: 200 OK (JSON)
```

```mermaid
flowchart LR
    A[Commit] --> B{Tests OK?}
    B -- ✓ --> C[Build]
    B -- ✗ --> D[Fix]
    D --> A
    C --> E[Deploy]
```

$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$

Euler: $e^{i\pi} + 1 = 0$

</details>

[^1]: すべての処理はブラウザー内で行われ、ドキュメントがサーバーに送信されることはありません。

0 語 · 0 行 · 約 0 分で読めます

仕組み

Markdown は README、技術ドキュメント、Wiki、そしてほぼすべての開発ツールのメモで使われている形式ですが、プラットフォームごとに独自の拡張が加えられています。このビューアーは最も広く使われている GitHub Flavored Markdown (GFM) に準拠しており、基本的な記法に加えて、表、タスクリスト、取り消し線、自動リンク、脚注、そして NOTE、TIP、IMPORTANT、WARNING、CAUTION のアラートを描画します。

mermaid と指定したコードブロックは図 (フローチャート、シーケンス図、クラス図、状態遷移図、ER 図、ガントチャート、Git グラフなど) に変換され、$ 記号で囲んだ数式は KaTeX で描画され、その他のコードは指定した言語に応じてハイライトされます。Jekyll、Hugo、Docusaurus のように、ドキュメントが --- の行で囲まれた YAML ブロックで始まる場合は、別の表として表示されます。

ドキュメントがブラウザーの外に出ることはありません。含まれる HTML は表示前にサニタイズされるため、他人の README を開いてもスクリプトは実行されません。また、図や数式のライブラリはドキュメントで使われている場合にのみダウンロードされます。

例

```mermaid
flowchart LR
  A[Commit] --> B[Build] --> C[Deploy]
```

Commit → Build → Deploy言語に mermaid を指定したコードブロックは図として描画されます。構文エラーがある場合は、コードがそのまま表示され、その下に Mermaid のエラーメッセージが表示されます。

## Getting Started
## API v2.0 (beta)
## Getting Started

#getting-started · #api-v20-beta · #getting-started-1見出しには GitHub と同じ id が付けられます。小文字にし、スペースをハイフンに置き換え、句読点を除き、重複する場合は末尾に番号を付けます。そのため、[テキスト](#getting-started) のようなリンクは、ここでもリポジトリ上でも同じように機能します。

Line one
Line two

<p>Line one
Line two</p>  →  <p>Line one<br>Line two</p>

標準の Markdown では、単一の改行では段落内で改行されません。空行を入れるか、行末にスペースを 2 つ入れる必要があります。GitHub のコメントや issue では改行がそのまま反映されます。同じように表示するには「改行を反映」をオンにしてください。

> [!WARNING]
> Breaking change in v3.

⚠ Warning — Breaking change in v3.[!NOTE]、[!TIP]、[!IMPORTANT]、[!WARNING]、[!CAUTION] で始まる引用は、GitHub と同じように色付きのアラートとして表示されます。対応していないプラットフォームでは通常の引用として表示されます。

ユースケース

README や CHANGELOG をリポジトリにプッシュする前に、どのように表示されるかを確認する。
エディターをインストールせずに、ダウンロードした .md ファイルを読む (ボタンから、またはドラッグ＆ドロップで開けます)。
アーキテクチャ、フロー、シーケンスの Mermaid 図を試し、ライブプレビューを見ながら構文を修正する。
ドキュメントを単体で完結した HTML ページや PDF に変換し、Git を使わない人と共有する。
LaTeX 記法の数式を含むノートや技術ドキュメントを書く。
AI アシスタントが返した Markdown テキストを、書式、表、コードブロックごと表示する。

よくある質問

どの種類の Mermaid 図を描画できますか？

Mermaid に含まれるすべての種類です。flowchart、sequenceDiagram、classDiagram、stateDiagram-v2、erDiagram、gantt、pie、journey、gitGraph、mindmap、timeline、quadrantChart、sankey、xychart、block、architecture、kanban などに対応しています。図はサイトのテーマに合わせてライトまたはダークの配色で表示され、strict モードで描画されるため、ラベルのテキストから HTML を挿入したり、クリック時にコードを実行したりすることはできません。

数式はどのように書けばよいですか？

インライン数式は $a^2 + b^2 = c^2$ のように $ 記号で囲みます。独立した行に中央揃えで表示する数式は $$ で囲むか、言語に math を指定したコードブロックに書きます。構文は KaTeX が対応している LaTeX です。価格などで $ 記号をそのまま書きたい場合は、前にバックスラッシュを付けてください。なお、"$5 と $10" は、2 つ目の $ の前にスペースがあり後ろに数字が続くため、数式とは見なされません。

Markdown の中で HTML を使えますか？

はい、GitHub と同様に使えます。折りたたみセクション用の details と summary、キー表示用の kbd、sub と sup、サイズ指定付きの img、align 付きの p などのタグです。表示前にスクリプト、onclick などのイベント属性、javascript: リンク、style タグと form タグが取り除かれるため、他人のドキュメントがコードを実行したり、ページのほかの部分を変更したりすることはできません。

PDF に変換するにはどうすればよいですか？

「エクスポート」の「印刷または PDF に保存」を選ぶと、サイトの UI を除いたドキュメントだけの印刷ダイアログが開くので、そこで「PDF に保存」を選択します。表、コードブロック、図はページをまたいで分割されないように配慮されます。公開用のファイルが必要な場合は、「.html をダウンロード」でスタイルを含む単体の HTML ページを生成できます。

相対パスの画像が表示されないのはなぜですか？

ビューアーはリポジトリのほかのフォルダーにアクセスできないためです。./docs/logo.png のようなパスは、お使いのディスク上か GitHub 上にしか存在しません。https:// で始まる完全な URL の画像は問題なく表示されます。