目次
Mermster ユーザーガイド
クイックスタート:最初のダイアグラム
起動から完成まで、約60秒でダイアグラムを作成できます。
- Mermster を起動します。 ようこそ画面に、新規ダイアグラムを作成するか、12種類の組み込みテンプレートから選択するオプションが表示されます。
- テンプレートを選びます(または空の状態から始めます)。テンプレートにはフローチャート、シーケンス図、クラス図などがあります。任意のテンプレートをクリックすると、編集できる状態で新しいタブに開きます。
- 左側で編集し、右側でプレビューします。 左側のコードエディタに Mermaid 構文を入力します。右側ではダイアグラムがリアルタイムでレンダリングされます。
- ダイアグラムをエクスポートします。 Cmd+Shift+E(macOS)または Ctrl+Shift+E(Windows)を押すと、エクスポートダイアログが開きます。SVG、PNG、PDF のいずれかを選び、設定を調整して保存します。
以上です。ダイアグラムを作成し、エクスポートしました。
Mermaid 構文をご存じなら、空のダイアグラムから始めましょう。初めての方は、テンプレートを選んでコードを試してみてください。ライブプレビューは変更を即座に反映します。
無料版と有料版
Mermster は、すべての機能にアクセスできる状態ですぐに使えます。無料版とライセンス版の唯一の違いは、エクスポートの見た目です。
無料で使える機能
- すべての10種類のテーマを備えた完全な Monaco コードエディタ
- 12種類以上のすべての Mermaid ダイアグラムタイプ
- パン、ズーム、ミニマップ付きのライブプレビュー
- SVG・PNG・PDF のエクスポート(小さな「Made with Mermster」の透かし付き)
- クリップボードへのコピー(PNG と SVG)
- 印刷のサポート
- コマンドパレット、ダイアグラムビルダー、アウトラインナビゲーター
- 差分表示付きのバージョン履歴
- 自動保存とクラッシュ復元
- 12種類の組み込みテンプレートとカスタムテンプレート
- エクスポートプリセット(5種類の組み込み+カスタム)
- 4種類の色覚に配慮したダイアグラムパレット
- 7種類のインターフェース言語
ライセンスで追加される機能
透かしのないクリーンなエクスポート。違いはそれだけです。
| 機能 | パーソナル($29) | コマーシャル($59) |
|---|---|---|
| クリーンエクスポート(透かしなし) | はい | はい |
| デバイス数の上限 | 最大5台 | 最大10台 |
| 利用形態 | 個人 | ビジネス/チーム |
| 継続的な料金 | なし | なし |
どちらのライセンスも一度きりの購入です。サブスクリプションはありません。アップデートは含まれます。
透かしが気にならなければ、支払う理由はありません。どちらの場合もアプリの機能は同じです。
エディタ
左側のペインは、Visual Studio Code と同じ技術(Monaco エディタ)で構築された、機能豊富なコードエディタです。Mermaid 構文の記述をできるだけ快適にするよう設計されています。
構文ハイライト
Mermaid のキーワード、ノード ID、矢印、ラベル、コメントは色分けされ、ダイアグラムをひと目で把握できます。ハイライトは、選択したエディタテーマに合わせて変化します。
オートコンプリート
入力中、Mermster は次の候補を提示します:
- Mermaid のキーワード:ダイアグラムタイプ(
graph、sequenceDiagram、classDiagramなど)、方向(TD、LR、BT、RL)、ブロックキーワード(loop、alt、opt、end)。 - ノード ID:ノードを定義すると、その ID は他のあらゆる場所でオートコンプリートに使えるようになります。これによりタイプミスを防ぎ、大きなダイアグラムの作成時間を短縮できます。
候補を確定するには Tab または Enter を押します。
エラー診断
構文にエラーがあると、Mermster は問題箇所を赤い波線で示し、エディタの余白に説明を表示します。これは入力中にリアルタイムで更新されます。
検索と置換
Cmd+F(macOS)または Ctrl+F(Windows)で検索を開きます。検索と置換には Cmd+H / Ctrl+H を使います。
エディタ設定
設定(Cmd+, / Ctrl+,)のエディタセクションで、エディタをカスタマイズできます:
| 設定 | 機能 |
|---|---|
| フォントサイズ | エディタ内の文字サイズを調整します |
| タブサイズ | タブあたりのスペース数 |
| 折り返し | 長い行を折り返すか、横にスクロールするかを切り替えます |
| ミニマップ | 右端のコードミニマップの表示・非表示 |
| 行番号 | オン、オフ、または相対表示 |
| 空白の表示 | 空白文字をいつ表示するか(なし、選択範囲、すべて) |
ライブプレビュー
右側のペインには、リアルタイムでレンダリングされたダイアグラムが表示されます。変更は入力を止めてから約300ミリ秒後に反映されるため、キーを打つたびにちらつくことなく、プレビューは反応がよく感じられます。
パンとズーム
- スクロールで拡大・縮小できます。
- トラックパッドのピンチでズームします。
- クリックしてドラッグすると、ダイアグラム内の位置を移動できます。
- 細かな調整には、右下のズームコントロールを使います。
画面に合わせる
ズームコントロールの フィット ボタンをクリックすると、ダイアグラム全体がプレビューに収まるように拡大縮小されます。1:1 をクリックすると、元に戻ります。
フルスクリーンプレビュー
Cmd+Shift+F(macOS)または Ctrl+Shift+F(Windows)を押すと、エディタが隠れ、ウィンドウがダイアグラムだけで満たされます。Escape を押すと分割表示に戻ります。これはプレゼンテーションに便利です。
ダイアグラムミニマップ
大きなダイアグラムでは、プレビューの隅にサムネイル全体図が表示されます。現在の表示範囲が長方形で示されます。ミニマップの任意の場所をクリックすると、その領域にジャンプします。設定 > プレビュー > ダイアグラムミニマップ で切り替わります。
ダイアグラムパレット
Mermster には、3種類の色覚に配慮したオプションを含む、4種類のダイアグラムカラーパレットがあります:
| パレット | 説明 |
|---|---|
| デフォルト | Mermaid の標準カラー |
| 第二色覚対応 | 最も一般的な赤緑色覚特性に最適化 |
| 第一色覚対応 | もう一方の赤緑色覚特性に最適化 |
| 第三色覚対応 | 青黄色覚特性に最適化 |
パレットは 設定 > 外観 > ダイアグラムパレット で変更します。パレットはライブプレビューとエクスポートしたダイアグラムの両方に適用されます。
ファイルの操作
新しいダイアグラムを作成する
Cmd+N(macOS)または Ctrl+N(Windows)を押します。空のダイアグラムから始めるか、12種類の組み込みテンプレートから選ぶか、保存した自分のテンプレートを使うことができます。
組み込みテンプレートの内容:
- 基本: フローチャート、シーケンス図、クラス図、ER図、ステート図
- プロジェクト: ガントチャート、タイムライン
- クリエイティブ: マインドマップ
- データ: 円グラフ、象限チャート
- 開発: Gitグラフ
- UX: ユーザージャーニー
ファイルを開く
Cmd+O / Ctrl+O で、既存の .mmd または .mermaid ファイルを開きます。ファイルを Mermster のウィンドウにドラッグ&ドロップしたり、Finder やエクスプローラーで .mmd ファイルをダブルクリックしたりすることもできます。
保存
- Cmd+S / Ctrl+S:保存します。ファイルがまだ保存されていない場合は、保存場所を選択するよう求められます。
- Cmd+Shift+S / Ctrl+Shift+S:名前を付けて保存します。
Mermster はデフォルトで .mmd 拡張子を使用します。.mermaid 拡張子のファイルもサポートされます。
複数タブでの編集
各ファイルは独自のタブで開きます。編集内容と取り消し履歴は、タブごとに独立して保持されます。
- Cmd+W / Ctrl+W:現在のタブを閉じます(未保存の変更がある場合は保存を確認します)。
- Cmd+Shift+T / Ctrl+Shift+T:最後に閉じたタブを再度開きます。
ファイル監視
開いているファイルが外部(別のエディタ、Git 操作など)で変更されると、Mermster はその変更を検出します。未保存の編集がなければ、自動的に再読み込みします。ある場合は、ディスクから再読み込みするか、自分のバージョンを保持するかを尋ねるダイアログが表示されます。
最近使ったファイル
ようこそ画面には、最近開いたファイルが表示されます。これらは ファイル メニューにも一覧表示されます。
ダイアグラムのエクスポート
Mermster は3つの形式にエクスポートします:SVG、PNG、PDF。
エクスポートダイアログ
Cmd+Shift+E(macOS)または Ctrl+Shift+E(Windows)で開きます。各形式には、形式固有のオプションを備えた独自のタブがあります:
| 形式 | オプション |
|---|---|
| SVG | パディング、背景(白/透明/テーマに合わせる) |
| PNG | パディング、DPI(72/144/300)、背景 |
| パディング、ページサイズ(Letter/A4/その他)、向き |
クイックエクスポート
Cmd+E / Ctrl+E を押すと、最後に使用したプリセットでエクスポートします。これまでにエクスポートしたことがない場合は、代わりに完全なダイアログが表示されます。
エクスポートプリセット
エクスポート設定を名前付きのプリセットとして保存すると、毎回一貫した出力が得られます。Mermster には5種類の組み込みプリセットがあります:
- クイック PNG(Retina)
- クイック SVG
- ドキュメント用 Retina PNG
- A4 PDF
- Letter PDF
必要なだけカスタムプリセットを作成できます。プリセットを選択した後にオプションを変更すると、ドロップダウンに (変更あり) と表示され、設定が変更されたことがわかります。
クリップボードにコピー
- Cmd+Shift+C / Ctrl+Shift+C:PNG としてコピー(プレゼンテーション、ドキュメント、チャットへの貼り付け用)。
- SVG としてコピー は、コマンドパレットまたは 編集 メニューから利用できます。
コピーに成功すると、トースト通知で確認できます。
印刷
Cmd+P / Ctrl+P を押すと、システムの印刷ダイアログが開きます。
最も鮮明な PNG エクスポートには、画面向けに144 DPI(Retina)、印刷向けに300 DPI を使用してください。SVG はどんなサイズにも拡大縮小できるため、Web 用途に最適です。
ツールとナビゲーション
コマンドパレット
Cmd+K(macOS)または Ctrl+K(Windows)でコマンドパレットを開きます。入力を始めると、任意のコマンドを検索できます:テーマの切り替え、エクスポート、設定を開く、パネルの切り替えなど。各コマンドの横にキーボードショートカットが表示されるため、使いながらショートカットを覚えるのに最適です。
アウトラインナビゲーター
Cmd+Shift+O / Ctrl+Shift+O でアウトラインパネルを開きます。ダイアグラムの構造化された概要(ノード、エッジ、参加者、ステート、その他の要素を種類別にグループ化)を表示します。任意の要素をクリックすると、エディタ内の該当行にジャンプします。
アウトラインナビゲーターは、特に大きなダイアグラムで便利です。特定のノードを探してコードをスクロールする代わりに、アウトラインでクリックすれば直接そこへジャンプできます。
ダイアグラムビルダー
Cmd+Shift+B / Ctrl+Shift+B でダイアグラムビルダーパネルを開きます。編集中のダイアグラムタイプに応じた、状況依存のボタンが表示されます。任意のボタンをクリックすると、対応する Mermaid 構文がカーソル位置に挿入され、Tab キーで移動できるプレースホルダーテキストも付いています。
ダイアグラムビルダーは、ダイアグラムタイプに合わせて変化します:
| ダイアグラムの種類 | 利用できる要素 |
|---|---|
| フローチャート | 四角形ノード、角丸ノード、判断ひし形、スタジアムノード、矢印、ラベル付き矢印、サブグラフ |
| シーケンス図 | 参加者、アクター、メッセージ、応答、ノート、ループ、条件分岐 |
| クラス図 | クラス、継承、コンポジション、集約、関連 |
| ステート図 | ステート、遷移、開始遷移、終了遷移 |
| ER図 | リレーションシップ、1対1、属性付きエンティティ |
| ガントチャート | セクション、タスク、タスク(後続)、マイルストーン |
| 円グラフ | スライス |
| マインドマップ | ブランチ、リーフ |
テンプレート
Mermster は2種類のテンプレートをサポートします:
- 組み込みテンプレート:ようこそ画面と新規ファイル作成時に利用できる、12種類のスターターダイアグラム。
- カスタムテンプレート:ファイル > テンプレートとして保存 またはコマンドパレットから、任意のダイアグラムを再利用可能なテンプレートとして保存できます。名前、任意の説明、カテゴリを付けます。作成したテンプレートは、新規ファイルを作成するたびに マイテンプレート の下に表示されます。
データ保護
Mermster はあなたの作業を自動的に保護するため、作業を失う心配はありません。
自動保存
Mermster は、未保存の作業の復元用コピーを一定間隔で保存します。アプリが予期せず終了しても、再起動したときに作業が残っています。間隔は 設定 > データ保護 > 自動保存間隔 で調整できます(オプション:無効、15秒、30秒、1分、2分)。
クラッシュ復元
Mermster が正常に終了しなかった場合(クラッシュ、強制終了、停電など)、次回の起動時に復元ダイアログが表示されます。未保存の変更があるすべてのドキュメントが一覧表示され、次のことができます:
- 復元:ドキュメントを新しいタブに復元します。
- 破棄:復元データを完全に削除します。
- すべて復元 / すべて破棄:一度にすべてを処理します。
いつでもコマンドパレットで 未保存の作業を復元 を検索することもできます。
バージョン履歴
保存するたびに、Mermster はスナップショットを取ります。以前のバージョンを閲覧し、現在のファイルと並べて比較し、任意のバージョンを復元できます。
バージョン履歴は Cmd+Shift+H(macOS)または Ctrl+Shift+H(Windows)で開くか、ファイル > バージョン履歴 から開きます。
バージョン履歴パネルでは、次のことができます:
- 比較:現在のファイルと選択したバージョンを並べて差分表示します。
- 復元:以前のバージョンを新しいタブに開きます。
- 削除:個々のバージョンを削除するか、ファイルの全履歴を消去します。
ファイルごとのバージョン数の上限は 設定 > データ保護 > ファイルごとの最大バージョン数 で設定します(オプション:10、25、50、100)。同一の保存は自動的にスキップされます。
カスタマイズ
設定は Cmd+,(macOS)または Ctrl+,(Windows)で開きます。
アプリテーマ
Mermster には5つのテーマモードがあります:
| テーマ | 説明 |
|---|---|
| システム | OS のライト/ダーク設定に従います |
| ダーク | 常にダーク(Catppuccin Mocha パレット) |
| ライト | 常にライト(Catppuccin Latte パレット) |
| ハイコントラスト ダーク | WCAG AAA 準拠のアクセシブルなダークテーマ |
| ハイコントラスト ライト | WCAG AAA 準拠のアクセシブルなライトテーマ |
エディタテーマ
アプリテーマとは別に、コードエディタのカラースキームを選べます。Mermster には10種類のエディタテーマがあります:
| テーマ | スタイル |
|---|---|
| Mermster Dark | Catppuccin Mocha(デフォルトのダーク) |
| Mermster Light | Catppuccin Latte(デフォルトのライト) |
| ハイコントラスト ダーク | WCAG AAA ダーク |
| ハイコントラスト ライト | WCAG AAA ライト |
| Dracula | 人気のダークテーマ |
| Nord | 北極をイメージしたダークテーマ |
| Solarized Dark | Ethan Schoonover によるダーク版 |
| Solarized Light | Ethan Schoonover によるライト版 |
| One Dark | Atom にインスパイアされたダークテーマ |
| GitHub Light | GitHub のライトテーマ |
自動(デフォルト)に設定すると、エディタテーマがアプリテーマに自動的に連動します。エディタテーマは 設定 > 外観 > エディタテーマ で変更できます。
言語
Mermster は7言語で利用できます:英語、日本語、簡体字中国語(简体中文)、繁体字中国語(繁體中文)、スペイン語(Español)、フランス語(Français)、ドイツ語(Deutsch)。言語は 設定 > 一般 > 言語 で変更するか、システム に設定して OS の設定に従わせます。
機能ヒント
特定の機能を初めて使うとき、Mermster はその機能の説明を簡潔なヒントで表示します。ヒントは、アウトラインナビゲーター、ダイアグラムビルダー、バージョン履歴、エクスポートプリセット、コマンドパレット、ダイアグラムミニマップに表示されます。ヒントを閉じた後でも、機能の横にある ? ボタンをクリックするか、設定 > ヒント > すべてのヒントを再表示 で再び表示できます。
ライセンス
有効化の方法
- 初回エクスポート時: Mermster は有効化ダイアログを表示します。ライセンスキーを入力するか、購入ボタンをクリックして購入してください。
- メニューから: ヘルプ > ライセンスを有効化 に進むか、設定 > ライセンス を開きます。
ライセンスキー(形式:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX)を貼り付けて 有効化 をクリックします。有効化には短時間のインターネット接続が必要ですが、その後は再確認が必要になるまで30日間オフラインでライセンスが機能します。
無効化の方法
ライセンスを新しいコンピュータに移すには:
- 設定 > ライセンス を開きます。
- ライセンスを無効化 をクリックします。
- 無効化を確定します。
これによりデバイスの枠が解放され、別のマシンで有効化できるようになります。無効化せずにアンインストールした場合は、mermster@viaelo.app までご連絡いただければ、枠を回復できます。
ライセンスキーは安全な場所(パスワードマネージャーなど)に保管してください。万一なくした場合は、購入時のメールアドレスを添えてサポートにご連絡いただければ、お調べできます。
キーボードショートカット
Windows では Cmd を Ctrl に置き換えましょう。
ファイル
| 操作 | macOS | Windows |
|---|---|---|
| 新規ファイル | Cmd+N | Ctrl+N |
| ファイルを開く | Cmd+O | Ctrl+O |
| 保存 | Cmd+S | Ctrl+S |
| 名前を付けて保存 | Cmd+Shift+S | Ctrl+Shift+S |
| タブを閉じる | Cmd+W | Ctrl+W |
| 閉じたタブを再度開く | Cmd+Shift+T | Ctrl+Shift+T |
| バージョン履歴 | Cmd+Shift+H | Ctrl+Shift+H |
編集
| 操作 | macOS | Windows |
|---|---|---|
| 検索 | Cmd+F | Ctrl+F |
| 置換 | Cmd+H | Ctrl+H |
| 設定 | Cmd+, | Ctrl+, |
表示
| 操作 | macOS | Windows |
|---|---|---|
| コマンドパレット | Cmd+K | Ctrl+K |
| アウトラインパネルの切り替え | Cmd+Shift+O | Ctrl+Shift+O |
| ダイアグラムビルダーの切り替え | Cmd+Shift+B | Ctrl+Shift+B |
| フルスクリーンプレビューの切り替え | Cmd+Shift+F | Ctrl+Shift+F |
エクスポート
| 操作 | macOS | Windows |
|---|---|---|
| エクスポートダイアログ | Cmd+Shift+E | Ctrl+Shift+E |
| クイックエクスポート | Cmd+E | Ctrl+E |
| PNG としてコピー | Cmd+Shift+C | Ctrl+Shift+C |
| 印刷 | Cmd+P | Ctrl+P |
よくある質問(FAQ)
Mermster にインターネット接続は必要ですか?
いいえ。Mermster は完全にオフラインで動作します。インターネットが必要な機能は、ライセンスの有効化・無効化とアップデートの確認だけです。無料版はインターネットをまったく必要としません。
どの Mermaid ダイアグラムタイプがサポートされていますか?
すべてです:フローチャート、シーケンス図、クラス図、ER図、ガントチャート、ステート図、マインドマップ、円グラフ、Gitグラフ、タイムライン、ユーザージャーニー、象限チャート、そして将来の Mermaid バージョンで追加される新しいタイプ。
複数のデバイスで Mermster を使えますか?
はい。パーソナルライセンスは最大5台、コマーシャルライセンスは最大10台のデバイスで使用できます。デバイスはいつでも無効化して、枠を空けられます。
自分のデータはどこかに送信されますか?
いいえ。Mermster はテレメトリ、分析、トラッキングを一切行いません。あなたのダイアグラム、ファイル、設定は、すべてあなたのコンピュータに留まります。ネットワーク通信は、ライセンスの検証とアップデートの確認のみです。
Mermster はどのファイル形式を使いますか?
標準的な .mmd および .mermaid テキストファイルです。これらはプレーンテキストです。Git でバージョン管理し、どのエディタでも開いて、好きなように共有できます。
無料版を商用の作業に使えますか?
はい。無料版には利用形態の制限はありません。ただし、ダイアグラムを業務として共有していて透かしが適切でない場合は、パーソナル($29)またはコマーシャル($59)ライセンスで透かしを取り除けます。
アップデートを確認するには?
ヘルプ > アップデートを確認 に進みます。新しいバージョンが利用可能であれば、Mermster が通知します。
トラブルシューティング
Windows SmartScreen の警告
Windows で初めて Mermster を実行すると、「Windows によって PC が保護されました」という SmartScreen の警告が表示されることがあります。これは、Windows 向けの Extended Validation コード署名証明書をまだ購入していないためです。macOS 版は Apple によって完全に署名・公証されています。
続行するには:
- SmartScreen ダイアログで 詳細情報 をクリックします。
- 実行 をクリックします。
- これは一度きりです。Windows が選択を記憶します。
ダイアグラムがレンダリングされない
プレビューにダイアグラムではなくエラーが表示される場合:
- エディタの赤い波線を確認します。構文エラーを示しています。
- ダイアグラムが有効なタイプ宣言(例:
graph TD、sequenceDiagram、classDiagram)で始まっていることを確認します。 - テンプレートから新しいファイルを作成してプレビューが機能することを確認し、ご自分のコードと比較します。
エクスポートがぼやける
PNG エクスポートがぼやける場合は、エクスポートダイアログで DPI 設定を上げます。Retina スクリーンには144 DPI、印刷には300 DPI を使用します。どんなサイズでも鮮明にするには、代わりに SVG としてエクスポートします。
ライセンスの有効化に失敗する
- インターネット接続を確認します。有効化には一度のオンライン確認が必要です。
- ハイフンを含めて、ライセンスキー全体をコピーしていることを確認します。
- デバイス数の上限に達している場合は、まず既存のデバイスを無効化します(そのデバイスの 設定 > ライセンス)。
- 問題が解決しない場合は、mermster@viaelo.app までご連絡ください。
ライセンスキーを紛失した
購入時に使用したメールアドレスを添えて、mermster@viaelo.app までメールしてください。お調べできます。
サポートを受けるには
mermster@viaelo.app までメールしてください。アプリ内からも ヘルプ > フィードバックを送信 または ヘルプ > 問題を報告 からご連絡いただけます。
翻訳の誤りにお気づきですか?お知らせください