Mermaid Viewer ライブエディタ

Mermaid Viewer Live Editorは、強力な編集機能とリアルタイムプレビューを提供するプロフェッショナルなダイアグラム作成環境であり、様々な種類の技術図を効率的に作成するのに役立ちます。

エディタのレイアウト

ライブエディタは二分割レイアウトを採用しています：

左パネル：Mermaid構文の入力と編集用のコードエディタ
右パネル：レンダリングされた図をリアルタイムで表示するプレビューエリア
中央の仕切り：二つのパネルの相対的なサイズを調整できるドラッグ可能なセパレータ

この直感的なレイアウト設計により、コードとプレビューを同時に確認でき、編集効率が向上します。

エディタの特徴

コード編集機能

構文ハイライト：異なるMermaid構文要素に自動的に色付けし、コードの可読性を向上
オートコンプリート：一般的な構文構造を入力する際にインテリジェントな提案を提供
エラー表示：構文エラーをリアルタイムで表示し、修正提案を提供
コード折りたたみ：大きな図の一部を折りたたみ、複雑なコードの管理を容易に

レスポンシブデザイン

デスクトップとモバイルデバイスからのアクセスをサポート
モバイルデバイスでは自動的に垂直分割レイアウトに調整
タッチスクリーンサポート、タブレット使用に適合

データ管理

自動保存：編集内容はローカルストレージに自動保存
バージョン管理：編集履歴を記録し、以前のバージョンに戻ることが可能
インポート機能：ファイルやURLからMermaidコードをインポート可能

実用的なツール

共有とコラボレーション

チームメンバーとの協力のための一意の共有リンクを生成
変更のリアルタイム同期、複数ユーザーによる同時編集をサポート
権限制御、読み取り専用または編集可能なアクセス設定が可能

エクスポートオプション

複数フォーマット：SVG、PNG、PDF形式でのエクスポートをサポート
カスタマイズ設定：図のサイズ、背景色、テーマなどを調整可能
高解像度：印刷シーンに適した高DPIエクスポート設定をサポート

高度な機能

テーマ切替：目の疲れを軽減するライトモードとダークモードをサポート
全画面モード：集中できる編集環境を提供
キーボードショートカット：ワークフロー効率を向上させる一般的な操作のショートカットを提供

技術的詳細

エディタは最新のWeb技術で構築されています：

CodeMirrorをコードエディタのコアとして使用
最新バージョンのMermaid.jsレンダリングエンジンを統合
様々な画面サイズに適応するレスポンシブデザインを採用
タッチ操作とジェスチャーコントロールをサポート

Mermaid Viewer Live Editorは、技術文書作成者、ソフトウェアエンジニア、プロダクトマネージャー、教育者に理想的なダイアグラム作成環境を提供し、ソフトウェアをインストールすることなく、いつでもどこでもプロフェッショナルな図を作成することができます。