Mermaid Design

変更履歴

mermaid.design の最新のアップデートと改善をご確認ください。

v0.2.0

新機能

  • レンダリング設定パネル：テーマパネルに新設された Config タブで、図の種類別に 33 グループ・400 以上の Mermaid レンダリング設定（レイアウト、間隔、サイズ、フォント、動作スイッチ）を編集可能に。検索、ライブプレビュー、項目ごとのリセット、ローカル永続化に対応し、現在の図タイプのグループは自動で展開されます
  • 設定を含むエクスポート：Copy JSON・Copy frontmatter・エクスポートダイアログのテーマダウンロードに、レンダリング設定の変更が含まれるようになりました。mermaid.initialize() や Mermaid frontmatter にそのまま貼り付けられます

改善

  • フォームコントロールを shadcn/ui 化：すべてのボタン・入力欄・セレクト・スイッチ・スライダーを Radix プリミティブで再構築——コンパクトな見た目はそのままに、キーボード操作とアクセシビリティが向上しました

v0.1.0

新機能

  • オンライン Mermaid エディター: Monaco コードエディター（Mermaid シンタックスハイライト、インラインエラーマーカー）、パン/ズーム対応のライブプレビュー、テーマパネルを備えた 3 ペインのワークベンチ
  • 公式 SVG レンダリング: 400ms のデバウンス付き標準 Mermaid SVG 出力、構文エラー時の最後の成功レンダーへのフォールバック、キャンバス背景オプション（ドット / 白 / チェッカー）
  • ASCII レンダリング: beautiful-mermaid を搭載し、Unicode またはプレーン ASCII の文字セットと調整可能なフォントサイズで、ダイアグラムをテキストアートに変換
  • テーマシステム: 70 以上の編集可能なテーマ変数、11 個の Mermaid 組み込みテーマに加えデザイナープリセット、シードカラーからのテーマ生成（ライト & ダーク）
  • テンプレートギャラリー: フローチャート、シーケンス図、クラス図、ER 図、ガントチャート、マインドマップなどの組み込みテンプレート — タイプフィルターとモードごとのサポートフィルタリング付き
  • エクスポート: オプションで透明な背景を選択し、1x/2x/4x の解像度で SVG、PNG、JPG、WebP としてダイアグラムをダウンロード; ASCII モードでの TXT エクスポート; テーマ設定を JSON または Mermaid frontmatter としてエクスポート
  • テーマのインポート: テーマの JSON または frontmatter を貼り付けて、カスタムテーマをインポート
  • 自動保存: コード、テーマ、レイアウトがセッション間でローカルストレージに保存されます
  • 多言語対応: 9 言語の完全な UI — English、中文、Русский、日本語、Français、한국어、Español、Deutsch、Português
  • クライアントサイドのみ: すべてブラウザ内で動作 — アップロードなし、アカウント不要、ダイアグラムデータの追跡なし