AppKit が描画
すべてのノードは本物のビューです。ノードを装ったウェブページ内の div ではありません。スクロールが滑らかなのは、再レイアウトすべきドキュメントがないからです。
- AppKit
- NSView
- CoreGraphics
Mermaid をネイティブに
Mac 上でネイティブに描画する Mermaid エディタ
ノードを動かせば Mermaid ソースコードが追従します。テキストを編集すればキャンバスが再コンパイルします。
- macOS 14.0+
- 34 種類の図表タイプ
- PNG · SVG · PDF
- AI 生成と修復（Pro）
01
3 つのペインが編集するのは同じドキュメント
プロパティパネルで色を変えると、Mermaid ソースコードにスタイル規則が 1 つ増え、キャンバスが再描画されます。どれも他のペインの写しではありません。
christmas-flow.mmd
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
style C color:#ffffff,fill:#F4431E01
編集は Mermaid として書き戻される
ノードを追加し、2 つをつなぎ、エッジをドラッグし、貼り付ける。キャンバスが出力するのは標準の Mermaid です。サイドカーファイルでも、独自形式でもありません。
02
プロパティも Mermaid です
塗り、罫線、文字色、幅、不透明度はふつうのスタイル規則になり、インスペクタはそのスタイルがどこから来たかを示します。
03
30 回ではなく 1 回のアンドゥ
連続したプロパティ編集は 1 回のテキスト編集のアンドゥにまとめられます。⌥⌘I はコメントにも文の順序にも触れずにドキュメントを整えます。
02
WebView なし。JavaScript ブリッジなし。Electron なし
Mermaid まわりのツールの多くは、デスクトップのふりをしたブラウザです。Mernyx はすべてのノードをネイティブに描画し、すべてのレイアウトもネイティブに解算します。
レイアウトもネイティブに計算
ジオメトリは専用のレイアウトエンジンが計算します。ウェブビューが配置するのではありません。Mernyx は依存ゼロではありません。単にブラウザではないだけです。
- レイアウトエンジン
- JavaScript なし
ファイルであり、ドキュメントではない
Finder から任意の .mmd / .mermaid ファイルを開けます。Quick Look でその場でプレビューし、何も起動せずにサムネイルを確認できます。
- .mmd
- .mermaid
- Quick Look
03
34 種類の図表タイプ
Flowchart、Sequence diagram、Class diagram、State diagram、ER diagram、Mindmap、C4 diagram、Gantt chart、User journey、Kanban diagram、XY chart、ZenUML に加えて 22 種類——それぞれに専用の構文ハイライトのキーワード表、専用のレイアウト、専用の編集ルールがあります。
Flowchart
Sequence diagram
Class diagram
State diagram
ER diagram
Mindmap
Architecture diagram
Requirement diagram
Block diagram
Swimlane diagram
Agent flow diagram
Use case diagram
Pie chart
Gantt chart
Quadrant chart
Radar chart
Treemap
Kanban diagram
Packet diagram
Info diagram
Timeline
Sankey diagram
User journey
Venn diagram
C4 diagram
Cynefin diagram
Git graph
XY chart
Wardley map
Railroad diagram
ZenUML diagram
Event modeling diagram
Ishikawa diagram
Tree view
「対応範囲」とは、各図表タイプに空でないシーンを描けるテンプレートが 1 つずつあるという意味です。すべての構文や視覚的な細部が完成しているという意味ではありません。
Flowchart はキャンバス上で完全に編集できます。他の図表タイプは今も整備中です。対応できない操作はアプリがグレー表示にして、理由を示します。
04
アイコンは綴るのではなく、描かれる
Mermaid ではアイコンを fa:fa-user と書きます。GitHub の Mermaid レンダラーはその文字を描き、アイコンの代わりにはしません。Mernyx には Font Awesome Free の字形が同梱されているため、キャンバスにはアイコンそのものが見え、書き出した SVG にはフォント参照ではなくその輪郭が含まれます。
icons.mmd
flowchart LR
A([fa:fa-user User]) --> B([fa:fa-server Server])
B --> C([fa:fa-database Database])
フリーのアイコンセットがすべてアプリに
Font Awesome Free 7.3.1 が Mernyx に同梱されています。solid、regular、brands の 3 スタイルで 2,163 個のアイコンです。インストールするものも、ダウンロードするものもありません。字形はバイナリに入っていますし、書き出したファイルにも字形は不要です。
書き出しには輪郭が乗る
アイコンはフォント名ではなく path として SVG に入ります。Font Awesome Free を入れていないマシンでそのファイルを開いても、アイコンはそのまま残り、絵の他の部分と一緒にスケールします。
ノードそのものがアイコンになる
ノードをアイコンそのものにすることもできます。@{ icon: “fa:user” } は字形の周囲に枠を描き、ラベルは枠の外側に置かれた帯の上に乗ります。同じセットのアイコンに、もう 1 つの形が加わっただけです。
どちらの書き方も Mermaid 自身のものです。ラベル内の fa:fa-user、ノード上の @{ icon: … }。Mernyx 専用の書き方を覚える必要はなく、ファイルはふつうの .mmd のままです。
05
図を説明するか、コンパイルできない図を直す
入口は 2 つあり、どちらも自分のエンドポイントと自分のキーで動きます。モデルが書くのは Mermaid ソースコードだけです。コンパイル、レイアウト、描画は Mernyx が引き受け、あなたが承認するまでファイルには何も書き込まれません。
一文から図を生成する
キャンバスの下の入力欄に文字を入力します。Mermaid ソースコードはストリームでエディタに流れ込み、到着している最中にキャンバスが描画するので、確定する前に 1 行ずつ読めます。結果は Mernyx がコンパイルします。解析できなければエラーはモデルに戻され、モデルは再試行します。「適用」を押すまでファイルはそのままです。しかも「適用」は ⌘Z 一回で取り消せます。
コンパイルできない図を直す
ソースコードが解析できないとき、診断バーに「AI で修正」が表示されます。問題のあるファイルとその診断情報がモデルに送られ、返ってきたものはまず行単位の差分として示されます。受け入れる前に、何が変わったかを正確に確認できます。「適用」が現れるのは、エラー数が実際に減ったときだけで、その判断はモデルではなくエンジンが下します。
自分のエンドポイント、自分のキー
Mernyx を OpenAI 互換の任意のエンドポイントに向けてください。OpenAI、OpenRouter、DeepSeek、Groq、Qwen、この Mac 上で Ollama や LM Studio を通じて動くモデルなど。キーは macOS の Keychain にあり、リクエストはあなたの Mac から選んだプロバイダへ直接送られます。Mernyx にアカウントはなく、途中にサーバーもありません。
モデルが書き、エンジンが描く
モデルが返すのは Mermaid ソースコードだけです。レイアウト、色、形状は Mernyx のエンジンが決定するので、生成された図も手で描いた図と同じレンダラーで描かれます。
確認してから適用
どちらの経路も、最後は「適用」か「破棄」です。「破棄」はドキュメントに触れず、アンドゥ履歴にも残りません。「適用」は 1 ステップで置き換え、⌘Z で取り消せます。
AI の生成と修復は Pro の一部です。無料プランでも、エンドポイント、モデル、キーは先に設定できます。Pro を解除した瞬間に動き始めます。
ウィンドウが担当するそれ以外のすべて
それぞれが独立した章を持つことはない小さな機能が 8 つあり、使うのをやめた瞬間にその欠如に気づきます。
エクスポート
PNG、SVG、PDF は、いずれも同じ Scene から生成されます。ブラウザの印刷ダイアログを経由して往復させるわけではありません。ただし、一部のプリミティブはラスタ書き出しで多少異なることがあります。
ドキュメントの整形
⌥⌘I は、トークンの中身、コメント、文の順序には触れずに、空白と Flowchart のブロックインデントを統一します。
ソースコード ↔ キャンバスの連動
ソースコードのノードにカーソルを置くと、キャンバスがそれをハイライトします。画面外にあるときだけスクロールし、キーボードのフォーカスは決して奪いません。「設定 › キャンバス › 連動」で切り替えられます。
Quick Look とサムネイル
Finder の中で .mmd / .mermaid ファイルを直接プレビューできます。スクロールでの拡大縮小、ドラッグでの移動、システムのライト／ダーク表示に対応しています。
サンプルとテンプレート
14 個のシナリオサンプルと、34 種類の図表タイプそれぞれの開始用スケルトンを、5 つの検索可能なカテゴリに分けています。
キーボード主体
メニュー項目は図表タイプと選択状態ごとに有効化され、ショートカットとメニューは 1 つの割り当て表を共有しています。
位置情報つき診断
各図表タイプが自分のキーワード表とエンジンから与えた情報を統合するので、位置を持つ診断はソースコードの範囲として示されます。
キャンバスグリッド（任意）
初期状態ではオフで、書き出し結果には一切影響しません。
Mermaid チートシート
Mermaid の言語は数十種類の図表タイプにまたがって文書化されています。チートシートが扱うのは中核的な部分——ソースコード、それによって描かれる図、そして各規則が何のためのものかを 1 行で説明するもの——です。
チートシートの 1 つの規則
diagram.mmd
flowchart LR
A[Start] --> B[Middle] --> C[End]
方向 · 最初の行が流れを決めます。TD と TB は同じ、LR と RL は横に走ります。
チートシートを開くチートシートの図はすべて Mernyx 自身が描いています。アプリがキャンバスで使うのと同じネイティブのレンダラーです。
チートシートの目次
34 種類、1 タイプにつき 1 ページ。
- Agent flow diagram4 個の規則
- Architecture diagram4 個の規則
- Block diagram4 個の規則
- C4 diagram3 個の規則
- Class diagram6 個の規則
- Cynefin diagram3 個の規則
- ER diagram4 個の規則
- Event modeling diagram4 個の規則
- Flowchart11 個の規則
- Gantt chart4 個の規則
- Git graph4 個の規則
- Info diagram1 個の規則
- Ishikawa diagram2 個の規則
- Kanban diagram3 個の規則
- Mindmap4 個の規則
- Packet diagram2 個の規則
- Pie chart3 個の規則
- Quadrant chart4 個の規則
- Radar chart4 個の規則
- Railroad diagram4 個の規則
- Requirement diagram4 個の規則
- Sankey diagram3 個の規則
- Sequence diagram8 個の規則
- State diagram7 個の規則
- Swimlane diagram4 個の規則
- Timeline3 個の規則
- Tree view3 個の規則
- Treemap3 個の規則
- Use case diagram4 個の規則
- User journey3 個の規則
- Venn diagram3 個の規則
- Wardley map3 個の規則
- XY chart4 個の規則
- ZenUML diagram2 個の規則
よくある質問
Mernyx は図の描画にブラウザが必要ですか
いいえ。アプリ内に WebView も JavaScript ブリッジもありません。ジオメトリは専用のレイアウトエンジンが計算し、すべての形状は CoreGraphics で描画します。
キャンバス上で編集できる図表タイプはどれですか
キャンバス編集が最も充実しているのは Flowchart です。ノードの追加と削除、エッジの接続と再接続、エッジ途中のノード挿入、スタイル変更、その場での名前変更ができます。他の図表タイプでも対応範囲は広がりつつあり、名前変更はほぼどこでも使えます。対応と非対応の一覧をここで並べるより、アプリ自身が答えです。ある図表タイプが対応できない操作は、何も起こらずに黙って無視されるのではなく、グレー表示にして短い理由を示します。
Font Awesome のアイコンは使えますか
使えます。Mermaid 自身の記法であり、Mernyx は文字ではなく字形を描きます。Font Awesome Free のセット全体が同梱されており、solid、regular、brands の 3 スタイルで 2,163 個のアイコンがあります。インストールするものもダウンロードするものもありません。ノードそのものがアイコンになることもできます（@{ icon: “fa:user” }）。同梱されていないのは 2 つ。Pro 専用のスタイル（fal: と fak:）と、Font Awesome 以外のアイコンパックです。セットにない名前を使うと、アイコン 1 個分の幅の空白が残り、何も描かれません。ドキュメントが壊れることはありません。
図を代わりに書いてもらえますか
生成（⇧⌘G）は一文を Mermaid ソースコードに変えます。ストリームでエディタに流れ込みながらキャンバスが描画し、Mernyx が結果をコンパイルします。解析できなければエラーをモデルに返して再試行します。「適用」を押すまでファイルはそのままです。しかも「適用」は ⌘Z 一回で取り消せます。チャット画面ではなく、フォームとレビューです。
構文エラーも直してもらえますか
ローカルにワンクリックの修正はありません。診断は各図表タイプのキーワード表と突き合わせて作られ、その背後には決定的な書き換え規則がありません。ただし「AI で修正」（⌥⌘F）はあります。問題のあるソースコードを設定済みの AI エンドポイントに送り、修正されたドキュメントが返るので、適用前にレビューできます。
AI を使ったとき、図はどこに送られますか
あなたの Mac から、設定したエンドポイントへ直接送られます。Mernyx にアカウントはなく、途中にサーバーもありません。キーは macOS の Keychain にあり、リクエストは選んだプロバイダへ送られます。除此之外にあなたの Mac から出るものはありません。従量課金もありません。token はあなたのものです。AI の生成と修復は Pro の一部で、無料プランでもエンドポイント、モデル、キーは先に設定できます。
ソースコードの書式を書き換えてしまいますか
プロパティとラベルの編集は、該当するソースコードの範囲だけを書き換えます。構造的な編集はドキュメントを組み立て直します。ノード、次にエッジ、次にスタイル、という順序で、空白が統一され、もとのレイアウトは保たれません。⌥⌘I はより穏やかな道です。トークンの中身、コメント、文の順序は保持されます。
必要な環境は何ですか
macOS 14 以降です。ネイティブアプリなので、ほかにインストールすべきブラウザ、ランタイム、プラグインはありません。
Mernyx はどれくらい完成していますか
完成品というより、目的を絞ったツールです。現在のバージョンは 1.0.0 で、変化も頻繁です。あなたのワークフローがこれに依存するなら、組み込む前に hi@mernyx.com へメールをください。合うかどうか率直にお伝えします。
バグの報告や機能の要望はどうしますか
hi@mernyx.com にメールを送ってください。Mernyx は個人開発のプロダクトで、届いたメールはすべて読んでいます。