# Mac 上でネイティブに描画する Mermaid エディタ

> Mernyx は macOS 向けのネイティブな Mermaid エディタです。キャンバスでノードを動かせば、Mermaid ソースコードがついてきます。WebView も Electron もありません。

ノードを動かせば Mermaid ソースコードが追従します。テキストを編集すればキャンバスが再コンパイルします。

- macOS 14.0+
- 34 種類の図表タイプ
- PNG · SVG · PDF
- AI 生成と修復（Pro）

[Mernyx Pro を購入 — $19](https://checkout.dodopayments.com/buy/pdt_0NqGkcihHxe79ekZgVhC4?redirect_url=https%3A%2F%2Fmernyx.com%2Fthanks%2F)

[無料ダウンロード](https://releases.mernyx.com/Mernyx-1.0.0.dmg)

![Mernyx のウィンドウに Mermaid のフローチャートを開いた状態。左のソースコードエディタには構文ハイライトされた 6 行があり、C ノードがハイライトされています。中央のキャンバスには描画された図が表示され、「Let me think」の菱形ノードが選択されています。右のプロパティインスペクタには、同じノードの表示名、塗り、罫線、文字色、幅、不透明度、形状が表示されています。](/app-window.webp)

1 つのドキュメント、3 つのビュー。ソースコードでハイライトされているノードは、キャンバスで選択されているノードそのもので、右側にプロパティが開いているのも同じノードです。

## 3 つのペインが編集するのは同じドキュメント

プロパティパネルで色を変えると、Mermaid ソースコードにスタイル規則が 1 つ増え、キャンバスが再描画されます。どれも他のペインの写しではありません。

```mermaid
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:#F4431E
```

### 編集は Mermaid として書き戻される

ノードを追加し、2 つをつなぎ、エッジをドラッグし、貼り付ける。キャンバスが出力するのは標準の Mermaid です。サイドカーファイルでも、独自形式でもありません。

### プロパティも Mermaid です

塗り、罫線、文字色、幅、不透明度はふつうのスタイル規則になり、インスペクタはそのスタイルがどこから来たかを示します。

### 30 回ではなく 1 回のアンドゥ

連続したプロパティ編集は 1 回のテキスト編集のアンドゥにまとめられます。⌥⌘I はコメントにも文の順序にも触れずにドキュメントを整えます。

## WebView なし。JavaScript ブリッジなし。Electron なし

Mermaid まわりのツールの多くは、デスクトップのふりをしたブラウザです。Mernyx はすべてのノードをネイティブに描画し、すべてのレイアウトもネイティブに解算します。

### AppKit が描画

すべてのノードは本物のビューです。ノードを装ったウェブページ内の div ではありません。スクロールが滑らかなのは、再レイアウトすべきドキュメントがないからです。

### レイアウトもネイティブに計算

ジオメトリは専用のレイアウトエンジンが計算します。ウェブビューが配置するのではありません。Mernyx は依存ゼロではありません。単にブラウザではないだけです。

### ファイルであり、ドキュメントではない

Finder から任意の .mmd / .mermaid ファイルを開けます。Quick Look でその場でプレビューし、何も起動せずにサムネイルを確認できます。

## 34 種類の図表タイプ

Flowchart、Sequence diagram、Class diagram、State diagram、ER diagram、Mindmap、C4 diagram、Gantt chart、User journey、Kanban diagram、XY chart、ZenUML に加えて 22 種類——それぞれに専用の構文ハイライトのキーワード表、専用のレイアウト、専用の編集ルールがあります。

「対応範囲」とは、各図表タイプに空でないシーンを描けるテンプレートが 1 つずつあるという意味です。すべての構文や視覚的な細部が完成しているという意味ではありません。

Flowchart はキャンバス上で完全に編集できます。他の図表タイプは今も整備中です。対応できない操作はアプリがグレー表示にして、理由を示します。

## アイコンは綴るのではなく、描かれる

Mermaid ではアイコンを fa:fa-user と書きます。GitHub の Mermaid レンダラーはその文字を描き、アイコンの代わりにはしません。Mernyx には Font Awesome Free の字形が同梱されているため、キャンバスにはアイコンそのものが見え、書き出した SVG にはフォント参照ではなくその輪郭が含まれます。

```mermaid
flowchart LR
  A([fa:fa-user User]) --> B([fa:fa-server Server])
  B --> C([fa:fa-database Database])
```

![左から右へ並ぶ箱 3 つのフローチャート。User、Server、Database とラベルされ、それぞれラベルの前に小さな Font Awesome Free のアイコンがあります。人物、サーバーラック、データベースの円柱です。](/diagrams/flowchart/icons.svg)

Icons: Font Awesome Free, CC BY 4.0

### フリーのアイコンセットがすべてアプリに

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 のままです。

## 図を説明するか、コンパイルできない図を直す

入口は 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 行で説明するもの——です。

チートシートの図はすべて Mernyx 自身が描いています。アプリがキャンバスで使うのと同じネイティブのレンダラーです。

[チートシート](/ja/cheat-sheet/index.md)

## よくある質問

### 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 は個人開発のプロダクトで、届いたメールはすべて読んでいます。

## ネイティブに描く

Mernyx は 1 つのネイティブウィンドウです。左がソースコード、中央が本物のベクターキャンバス、右がプロパティ。