mme Svelte Themes

Mme

A Svelte Mermaid editor: live preview, split panes, fully rebindable keybindings, ⌘K command palette.

Download

mme — My Mermaid Editor

キーボードファーストな Mermaid エディタ。リアルタイムプレビュー、プレビュー分割、⌘K コマンドパレットを備え、Svelte 5 + Vite で構築しています。

特徴

  • キャンバス型プレビュー — ドラッグでパン、⌘/⌃ + スクロールでズーム、フィット表示対応
  • マルチタブ — シンタックスハイライト + LocalStorage 自動保存
  • プレビュー分割 — 左右 / 上下分割、各ペインに独立したタブとエディタカード
  • フロート / ドック — エディタカードは独立してドラッグ・リサイズ可能、ドッキングも対応
  • 20種類以上のダイアグラムテンプレート — flowchart / sequence / class / state / ER / gantt / pie / quadrant / requirement / gitgraph / mindmap / timeline / sankey / xychart / block / architecture / kanban / C4 / packet / journey
  • テーマ — ライト / ダーク、Mermaid テーマ (default / dark / forest / neutral)
  • エクスポート — SVG と PNG
  • ⌘K コマンドパレット — ファジー検索、矢印キーで選択
  • フル再割当可能なキーバインディング — すべてのコマンドに一意 ID があり、UI から自由にリマップ可能
  • CLI — mme コマンド一発で起動

インストール

Node.js 18+ と npm が必要です。

git clone https://github.com/umaidashi/mme.git
cd mme
npm install
npm link    # `mme` コマンドをグローバルに登録

CLI

mme                    # プレビューサーバを http://127.0.0.1:4173 で起動してブラウザを開く
mme --port 5000        # ポート変更
mme --no-open          # ブラウザを開かない
mme dev                # Vite 開発サーバ (ホットリロード、デフォルト 5173)
mme build              # dist/ を再ビルド
mme help               # ヘルプを表示

初回起動時は dist/ が自動ビルドされます。ソース編集後は mme build で反映するか、常時ホットリロードしたい場合は mme dev を使用してください。

キーボードショートカット（デフォルト）

すべてのショートカットはカスタマイズ可能です。ツールバーの ⌨ ボタンまたは ⌘, でキーバインディング設定画面を開き、任意のコマンドをリマップできます。

カテゴリ キー 動作
パレット ⌘K コマンドパレットを開く
⌘, キーバインディング設定を開く
タブ ⌥T 新規タブ
⌥W アクティブタブを閉じる
⌥R タブ名をリネーム
⌥1〜⌥9 ペイン A を N 番目のタブに
⌥⇧1〜⌥⇧9 ペイン B を N 番目のタブに
⌥[ / ⌥] 前 / 次タブ（ペイン A）
⌥⇧[ / ⌥⇧] 前 / 次タブ（ペイン B）
分割 ⌘\ 分割モードを循環: off → 横 → 縦
⌥⇧←/→/↑/↓ 分割比率を調整
フォーカス ⌥F / ⌥⇧F エディタ A / B にフォーカス
⌥P / ⌥⇧P ズーム/パン対象のプレビューを A / B に切替
プレビュー ⌥= / ⌥- ズームイン / アウト
⌥0 ビューをリセット
⌥Z フィット表示
⌥←/→/↑/↓ パン
パネル ⌥H / ⌥⇧H エディタ A / B の表示切替
⌥E ドック / フロート切替
テーマ ⌥D ライト / ダーク切替
⌥M Mermaid テーマを循環
エクスポート ⌥S / ⌥⇧S SVG / PNG で書き出し

⌘ = Command（Mac）/ Ctrl（Windows/Linux）。⌥ = Option（Mac）/ Alt（Windows/Linux）。⇧ = Shift。

開発

npm run dev      # Vite 開発サーバ
npm run build    # dist/ へ本番ビルド
npm run preview  # 本番ビルドをプレビュー

ファイル構成

bin/mme.js                     CLI エントリポイント
src/main.js                    アプリ起動
src/App.svelte                 ルートコンポーネント
src/lib/MermaidEditor.svelte   メインエディタ（コマンドレジストリ・状態・レイアウト）
src/lib/MermaidPreview.svelte  パン/ズーム対応の Mermaid プレビュー
src/lib/CodeEditor.svelte      シンタックスハイライト付きテキストエリア
src/lib/EditorCard.svelte      フロート/ドック対応のコードカード
src/lib/CommandPalette.svelte  ⌘K パレット
src/lib/KeybindingsPanel.svelte リマップ用 UI
src/lib/keymap.js              バインディングの parse / match / format
src/lib/templates.js           ダイアグラムテンプレート
src/lib/highlight.js           Mermaid シンタックスハイライター

技術スタック

ライセンス

MIT

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes