Mermaid Design

ASCII レンダリング

ASCII モードは Mermaid ダイアグラムをテキストアートに変換します — コードコメント、README ファイル、プルリクエストの説明、ターミナル出力など、画像を置けないあらゆる場所に最適です。

ASCII モードへの切り替え

ナビゲーションバーのモード切替で ASCII をクリックします(または /ascii を直接開きます)。エディター内の同じ Mermaid コードが、SVG の代わりに文字でレンダリングされます:

┌───────┐      ┌────────┐
│ Start │─────▶│ Ship it│
└───────┘      └────────┘

ASCII レンダリングは mermaid-ascii の TypeScript ポートである beautiful-mermaid によって実現されています。レンダラーは遅延読み込みされるため、初めて ASCII モードを開いたときにのみダウンロードされます。

設定

ASCII モードを有効にすると、右パネルに ASCII 設定が表示されます:

  • 文字セット — Unicode ─│┌ は罫線文字を使って滑らかな線と角を描きます。ASCII - | + は出力をプレーンな ASCII 文字に制限し、互換性を最大化します(古いターミナル、コードレビューツール、プレーンテキストメール向け)。
  • フォントサイズ — レンダリングされるテキストを拡大縮小します。大きなダイアグラムを狭いコメントブロックに収めるのに便利です。

サポートされるダイアグラムタイプ

フローチャートとシーケンス図が最もきれいにレンダリングされます。一部の Mermaid ダイアグラムタイプは ASCII レンダラーでまだサポートされていません — それらについては、壊れたレンダリングの代わりにローカライズされたフォールバックメッセージがプレビューに表示されます。

非常に長いリンク(---->)はレンダリング前に自動的に正規化されるため、伸びたエッジを持つダイアグラムでも適切な出力が得られます。

エクスポート

ASCII モードでは、エクスポートダイアログに TXT(プレーンテキスト) が用意されます — どこにでも貼り付けられる、レンダリング済みのテキストダイアグラムです。エクスポートと共有 を参照してください。

ASCII テンプレートを見る

/ascii/templates を開くと、テンプレートギャラリーを ASCII アートとして閲覧できます。サポートされていないテンプレートは自動的に除外され、タイプのフィルターチップが出発点を見つけるのに役立ちます。テンプレート を参照してください。