glyphic

ライブプレイグラウンド · クイックスタート · サンプルギャラリー · ドキュメント · 18 種類の図

---

クイックスタート

Glyphic は LLM に構造化データを渡すだけで、完成した図を返します。3 つの方法で利用できます。

1. MCP サーバー — 30 秒で AI エージェントに追加

インストール不要で、npx を使って stdio 経由で実行できます。

# Claude Code
claude mcp add glyphic -- npx -y @glyphicjs/mcp-server

Cursor、Claude Desktop、VS Code、Windsurf、Antigravity では、クライアントの MCP 設定に追加します。

{
  "mcpServers": {
    "glyphic": { "command": "npx", "args": ["-y", "@glyphicjs/mcp-server"] }
  }
}

あとは「ユーザー、投稿、コメントを含むブログの ERD を描いて」と頼むだけです。モデルが JSON を出力してツールを呼び出すと、描画された図がインラインで表示されます。MCP セットアップガイドを参照してください。

2. ライブラリ

npm install @glyphicjs/core @glyphicjs/schema

import { processDiagram } from "@glyphicjs/core";
import { writeFileSync } from "node:fs";

const result = await processDiagram({
  type: "architecture",
  title: "Web App",
  nodes: [
    { id: "web", label: "Web App", shape: "rounded", icon: "fab-react" },
    { id: "api", label: "API", shape: "hexagon", icon: "fas-bolt" },
    { id: "db", label: "PostgreSQL", shape: "database", icon: "fas-database" }
  ],
  edges: [
    { source: "web", target: "api", label: "REST" },
    { source: "api", target: "db", label: "SQL" }
  ]
});

writeFileSync("diagram.png", result.png);   // Buffer (high-res PNG)
writeFileSync("diagram.svg", result.svg);   // string (scalable SVG)
console.log(result.reactFlow);              // interactive React Flow JSON

コア API リファレンスを参照してください。

3. セルフホスト可能な HTTP API

独自のエンドポイントの背後で使いたいですか？Glyphic は、まったく同じエンジンを利用する HTTP サービスとしてセルフホストできます。同じスキーマを入力し、同じ SVG／PNG／React Flow を出力できるため、ライブラリをすべてのクライアントに配布せずに、製品やプラットフォームで図を生成できます。

対象ユーザー

• エージェントおよび LLM アプリの開発者 — 図の生成を単一のツール呼び出しとして公開し、モデルに描画ではなく記述を任せます。
• プラットフォームチーム — 検証済みの単一スキーマを使って、図の生成機能を製品に直接組み込みます。
• CI およびドキュメントのパイプライン — インストールや管理の手間がかかる Chromium を使わず、決定論的でバイト単位まで同一の、バージョン管理可能な出力を得られます。
• React 開発者 — 静的画像だけでなく、すぐに使えるインタラクティブな React Flow JSON を取得できます。

概要

**Glyphic は、構造化データから図を生成するためのインフラです。**厳格でセマンティックな JSON ドキュメント（nodes と edges の配列、または entities、commits など）を渡すと、整った図を次の形式で返します。

• SVG — 純粋で拡大縮小可能なベクターマークアップ（アクセシビリティ対応：role="img" + <title>）。
• PNG — Rust（@resvg/resvg-js）を使用してネイティブに描画される高解像度ラスター画像。
• React Flow JSON — インタラクティブな React Flow キャンバス向けにマッピングされたノード／エッジ。

単一の検証済みスキーマで、18 種類の図（アーキテクチャ図、シーケンス図、ERD、UML クラス図、状態遷移図、フローチャート、ガントチャート、タイムライン、サンキーダイアグラム、Git ツリー、マインドマップ、円グラフ、象限図、ユーザージャーニー、カンバン、C4、ツリーマップ、自由形式のキャンバス）をサポートします。

理由

はい。最新のLLMなら、きれいな6つのボックスからなるフローチャートを生のSVGとして描けます。ひとつ頼んでみてください。使い捨ての図をひとつ作るだけなら、それが適切なツールです。これは、モデルには「描けない」という前提に賭けているわけではありません。

問題は、描画されたSVGは変更できない画像だということです。生成するたびに異なるものになり、実際の図が複雑になるところ、つまりノードが増えたり後から編集したりする場面で破綻します。ボックスひとつを変更するにも全体を再生成する必要があり、そのたびに内容がずれていきます。Glyphicでは、図をデータとして扱います。モデルが型付きJSONで図の「意味」を記述し、実際のエンジンがそれを描画します。モデルがどれほど高性能になっても変わらない、3つの理由があります。

1. **DSLではなく、機械による作成を前提とした契約です。**入力は厳密なZodスキーマに従います。不正なモデル出力は、描画前に正確で修正可能なエラーとして返されるため、生成 → 検証 → 修正 → 描画のループを簡単に回せます。MermaidのようなDSLは、たったひとつのタイプミス（-->|label|）でも、パースに失敗して処理が止まります。
2. **インフラとしてデプロイできます。**レイアウトは実際のグラフエンジン（elkjs、d3-hierarchy/d3-sankey）が計算し、SVGはRust（@resvg/resvg-js）でPNGにラスタライズされます。DOMもヘッドレスブラウザーもChromiumも必要ありません。通常のNode依存関係として、CIジョブ、Lambda、エージェントのループ、Dockerコンテナーで実行できます。これは、モデルの能力に関係なく変わりません。
3. **規模が大きくなっても、低コストで品質を保てます。**大きな図を手作業で描くには、何千もの座標トークンを出力する必要があります。時間がかかり、コストも高く、モデルの出力上限を超えて途中で切れ、描画結果が壊れるおそれがあります。代わりに、モデルは簡潔で意味のあるJSONを出力し、複雑なジオメトリーは決定的に生成されます。

実際のエンジンがレイアウトを担うため、図は拡大しても崩れず、編集可能なままです。クラスタをネストし、障害物を避けてエッジを配置できます。手動配置のSVGでは、斜めの線がボックスを突き抜けてしまうところです。出力はバイト単位で同一（バージョン管理やスナップショットテストが可能）で、JSONは差分を確認して再描画できる信頼できる情報源として保たれます。絶対座標を積み上げた、崩れやすい構造にはなりません。

_{同じ44ノードの仕様。上：現在の最先端モデルに生のSVGを出力するよう依頼したもの。ボックス自体は問題ありませんが、エッジが図形を斜めに突き抜けており、再生成せずに編集することはできません。下：Glyphicで同一のJSONを描画したもの。階層がネストされ、エッジは障害物を避けて配置され、編集可能な信頼できる情報源として保たれています。
手法：どちらも同じモデル（Claude Opus 4.8）に同じ概要を与えて生成しました。上はSVGを一度で手書きするよう依頼し、下はGlyphicの型付きJSONを出力するよう依頼した後、@glyphicjs/core（ELKレイアウト + resvg、ブラウザーなし）で描画しました。同じ作成者、同じ内容で、異なるのは描画するか記述するかという境界だけです。}

比較

機能	Glyphic	Claude Artifacts	Mermaid	D2
入力形式	型付きJSON（Zodスキーマ）	自然言語 → SVG	テキストDSL	テキストDSL
ブラウザーなしで描画	✅ Rust（resvg）	N/A（クラウドのみ）	❌ Puppeteer/Chromium	✅ Goバイナリー
モデル非依存	✅ JSONを扱える任意のLLM	❌ Claudeのみ	✅	✅
スキーマ検証	✅ Zod + 修正可能なエラー	❌	❌ パースに失敗すると処理停止	❌
ネイティブMCPサーバー	✅ @glyphicjs/mcp-server	N/A（Claudeに組み込み済み）	❌	❌
React Flow出力	✅ インタラクティブなノード／エッジ	❌	❌	❌
決定的な出力	✅ バイト単位で同一	❌	⚠️ ほぼ同一	✅
ライセンス	FSL → Apache-2.0	プロプライエタリー	MIT	MPL-2.0

比較の詳細とベンチマークをご覧ください。

特長

• 🧩 検証済みの単一スキーマで 18 種類の図に対応 — 一覧はこちら。
• 🎨 テーマ設定 — 組み込みのプリセット（"theme": "dark"、ほかに light / pastel / mono）または完全カスタムのパレットを使用できます。テーマ設定ガイド。
• 🖌️ スタイル — 見た目のプリセット："style": "compact"（デフォルト）、clean、minimal、または手描き風の sketch。スタイルガイド。
• 📺 アスペクト比に合わせたフレーミング — 図を余白で調整し、16:9 / 9:16 のフレームに自動で収めます（または "aspectRatio" を設定します）。切り抜きは行いません。
• 🔤 フォント — 任意の Google Font（"theme": { "fontFamily": "Outfit" }）または独自の .ttf を使用できます。
• 🖼️ ネイティブアイコン — 任意の FontAwesome アイコン（"icon": "fas-database"、"icon": "fab-aws"）や、customIcons を介した独自の SVG を追加できます。
• 📐 本格的なレイアウト — elkjs + d3 が、ネスト（VPC / クラスター）、カラスの足記法 / UML マーカー、障害物を避けるエッジの経路を計算します。手動配置した SVG がノード数の増加とともにボックスを斜めに横切って絡まり始める規模でも、見やすさを保ちます。
• ⚡ ネイティブ PNG — ヘッドレスブラウザーを使わず、Rust でラスタライズします。
• ♿ アクセシブルな出力 — すべての SVG に role="img" と <title> が含まれます。
• 🔒 安全性を考慮した設計 — 厳格な入力検証、SVG 出力のエスケープ / サニタイズ、悪意ある入力に対抗するサイズ制限を備えています。
• 🧪 複数の出力形式 — 1 回の呼び出しで SVG、高解像度 PNG、React Flow JSON を出力します。

対応図

第一級の 18 種類に対応しています。サンプルギャラリー と 図の種類リファレンス でご覧ください。

アーキテクチャ（ネストされた VPC / クラスター）	C4 コンテキスト	フローチャート
シーケンス	状態マシン	ERD（カラスの足記法）
UML クラス	マインドマップ	ガント
タイムライン	ユーザージャーニー	カンバン
円グラフ	象限図	サンキー
Git グラフ	ツリーマップ	キャンバス（自由形式の SVG）

モノレポのアーキテクチャ

3 つのオープンソースライブラリで構成された pnpm + Turborepo のモノレポです。

パッケージ	内容
@glyphicjs/schema	純粋な Zod 検証レイヤー — LLM 向けの契約です。レンダリング前にモデルの出力を検証します。
@glyphicjs/core	エンジン：レイアウトアダプター、シーングラフ、SVG レンダリング、ラスタライズを担います。
@glyphicjs/mcp-server	公式 Model Context Protocol サーバー — Glyphic を Claude Desktop / Cursor のネイティブツールとして公開します。

新しい図の種類を追加するには、packages/core/src/registry.ts にエントリーを追加し、スキーマとレイアウトアダプターを用意します。詳しくは CONTRIBUTING をご覧ください。

ドキュメント

• 📚 ドキュメントホーム
• 🖼️ サンプルギャラリー — すべての種類をレンダリングした例
• 🧩 図の種類リファレンス — 18 種類すべてのスキーマ
• 🖌️ スタイルとアスペクト比に合わせたフレーミング
• 🎨 テーマ設定、フォント、アイコン
• 🛠️ Core API
• 🔌 MCP サーバー
• 🤝 コントリビュート

ブログ

• 📌 Glyphic の紹介：LLM とエージェントのためのデータとしての図 — まずはこちら
• 🏗️ Glyphic がアプリではなくインフラストラクチャである理由
• 🎨 Glyphic でできることのすべて
• ⚖️ Glyphic と代替製品の比較
• 🤖 AI が描く図ではスケールしない理由
• 🔬 AI 図解の比較は公平か？ 方法に関する考察

サポート

• 🐛 問題の報告と機能リクエスト — github.com/MS-Teja/Glyphic/issues
• 📚 ドキュメント — ドキュメントホーム
• ❤️ 開発を支援する — github.com/sponsors/MS-Teja

ライセンス

LICENSE — FSL / MIT.

---