Zolkit

Mermaid ガントチャートビューア

ブラウザでMermaidガントチャートを即座にレンダリング。プロジェクトのタイムラインを可視化し、SVGまたはPNGにエクスポート。無料、インストール不要。

プレビュー

ダイアグラムをプレビューするにはMermaidコードを入力してください

ガントチャートは、タスクを開始日、期間、依存関係、マイルストーンとともにタイムライン上にマッピングすることで、プロジェクトのスケジュールを可視化します。Mermaidの`gantt`構文を使用すると、プロジェクトマネージャーやエンジニアリングリードは、専用のプロジェクト管理ツールなしで、プレーンテキストとしてタイムラインを作成し、どこでもレンダリングできます。 AIアシスタントはプロジェクト計画にますます使用されています。開発者はClaudeやChatGPTに「ユーザー認証システム構築のための6週間のスプリント計画を作成してください」とプロンプトし、構造化されたMermaidガントチャートを受け取ります。その出力をZolkitに貼り付けることで、計画を確認し、スケジュールの競合を特定し、プロジェクト管理ツールにコミットする前に、ステークホルダープレゼンテーション用にエクスポートできます。 Mermaidガントチャートは、タスクセクション、日付ベースの配置、`after`依存関係を持つシーケンシャルおよびパラレルタスク、マイルストーンマーカー、`done`、`active`、または`crit`（クリティカルパス）としてマークされたタスクをサポートしています。Zolkitのビューアは、これらのすべての構造を忠実にレンダリングし、チャートをSVGとしてエクスポートして、プレゼンテーションやドキュメントに正確に再現できるようにします。

関連ダイアグラム

← Mermaid ダイアグラムビューアMermaid タイムライン図ビューアMermaid フローチャートビューアMermaid 円グラフビューア

無料オンラインMermaidダイアグラムビューア＆エクスポートツール

ZolkitのMermaidダイアグラムビューアを使えば、Mermaidコードを貼り付けるだけで、レンダリングされたダイアグラムを即座に確認できます。インストール不要、サインアップ不要、サーバーへのアップロードも不要です。すべてブラウザ内で完結するため、Claude、ChatGPT、GeminiなどのAIが生成したダイアグラムを確認する最も速い方法です。フローチャート、シーケンス図、クラス図、ER図、ガントチャート、ステート図、マインドマップ、Gitグラフ、円グラフ、タイムラインなど、主要なMermaidダイアグラムタイプをすべてサポートしています。

即時ライブプレビュー

入力に合わせてダイアグラムが自動的にレンダリングされます。300ミリ秒のデバウンス処理により、遅延を感じさせません。

100% プライベート

すべてのレンダリングはmermaid.jsを使用してブラウザ内で行われます。コードがサーバーに送信されることはありません。

SVG & PNG エクスポート

ドキュメントやスライドに最適な、鮮明なベクターSVGまたは高解像度2×PNG形式でダイアグラムをダウンロードできます。

すべてのMermaidダイアグラムタイプに対応

フローチャート、シーケンス図、クラス図、ER図、ガントチャート、マインドマップ、Gitグラフなど、多数のダイアグラムタイプをサポートしています。

AIダイアグラム対応

AI時代のために構築されました — Claude、ChatGPT、Gemini、またはその他のLLMによって生成されたダイアグラムを直接プレビューできます。

常に無料

アカウント不要、利用制限なし、透かしなし。ZolkitのMermaidビューアは完全に無料で、永続的にご利用いただけます。

Mermaidダイアグラムをプレビューする方法

  1. 1

    左側のエディタにMermaidコードを貼り付けます — AIアシスタントからコピーするか、手動で作成できます。

  2. 2

    ダイアグラムは右側のプレビューパネルに即座にレンダリングされます。構文エラーがある場合は、問題点が説明されます。

  3. 3

    'SVGをエクスポート' または 'PNGをエクスポート' をクリックして、ドキュメント、スライド、共有に適したファイル形式でダイアグラムをダウンロードします。

よくある質問

Mermaidガントチャートでタスクの依存関係を設定するにはどうすればよいですか？

前のタスクIDを参照するには、`after`キーワードを使用します: `Frontend : b1, after a1, 10d`。タスクb1はタスクa1が終了した直後に開始されます。複数の依存関係を連鎖させることができます。タスクIDは、タスク名の後、開始日前に定義されます。IDが指定されていない場合、そのタスクは依存関係として参照できません。

Mermaidガントチャートにマイルストーンを追加するにはどうすればよいですか？

タイプを`milestone`、期間を`0d`としてタスクを定義します: `Release : milestone, after testing, 0d`。マイルストーンはガントタイムライン上のひし形としてレンダリングされ、重要な納品ポイントや意思決定ゲートを通常のタスクから視覚的に区別します。バージョンリリース、ボード承認、またはゴー/ノーゴーチェックポイントのマークに役立ちます。

Mermaidガントチャートはどのような日付形式をサポートしていますか？

最も一般的な形式は`YYYY-MM-DD`（例: `2024-03-15`）で、先頭で`dateFormat YYYY-MM-DD`として宣言されます。Mermaidは`MM/DD/YYYY`、`DD-MM-YYYY`、およびUnixタイムスタンプもサポートしています。期間は日数（`10d`）、時間（`8h`）、または週（`2w`）で表されます。常に`dateFormat`をタスク日付の前に宣言してください。

タスクをクリティカルまたは完了としてマークするにはどうすればよいですか？

タスクIDの前にステータスキワードを追加します: `crit`はタスクをクリティカル（赤でレンダリング）としてマークし、`done`は完了（塗りつぶしでレンダリング）としてマークし、`active`は進行中としてマークします。これらを組み合わせることもできます: 完了したクリティカルタスクの場合は`crit, done`。これらの視覚的な手がかりにより、ガントチャートはステータスレポートや進捗レビューに役立ちます。