Gridgram
Mermaid ライクなテキスト記法で、いい感じに描ける AI 時代の関係図ジェネレータ。
シンプルな DSL
人間にも AI にも優しい、覚えやすい小さな文法。
TypeScript ライブラリ
Web アプリ、ビルドスクリプト、サーバーなど JS が動く場所に組み込める。
5,500+ アイコン
Tabler アイコンを同梱 — 膨大な数の中から即座に利用できます。 tabler.io/icons ↗
SVG / PNG 出力
Web、ドキュメント、スライド、印刷まで — 一つのレンダラであらゆるメディアに。
グリッドにアイコンを配置
基本の使い方は、ノードを @A1 / @B1 のような座標に置いて接続するだけ。同じ図を DSL と TypeScript の 2 通りで書けます。
そのまま LLM エージェントに書かせられる
4 つのファーストクラスな連携チャネルから、使っているホストを選ぶだけ。どの経路も同じ `.gg` 文法で動くので、エージェントをまたいでも図は使い回せます。
Claude Code プラグイン
マーケットプレイス配布。/gg-install・/gg-icons・/gg-author・/gg-render のスラッシュコマンドで完結。
チュートリアル →gh skill
同じスキルバンドルを Copilot / Cursor / Gemini CLI / Codex に `gh` コマンド一発でインストール。
チュートリアル →context7（MCP）
インストール不要のドキュメント取得。MCP 対応エージェントから gridgram の全リファレンスを参照可能。
チュートリアル →llms.txt
ドキュメントサイトのルートに公開。curl で取れるインデックスと約 230 KB のフルバンドル。
リファレンス →
しくみ
2 つの入力パス（gg CLI が読む .gg ファイル / gridgram npm パッケージが受け取る DiagramDef）が、同じレンダリングパイプラインに合流します。どちらのパスでも同一の SVG を生成し、PNG は CLI からのみ、sharp / libvips を初回実行時に取得して変換します。
試してみませんか
サインアップ不要・API キー不要。すべてローカルで動きます。
オープンソースへの感謝
Gridgram は以下の OSS プロジェクトの上に成り立っています。全文は THIRD_PARTY_LICENSES.md および gg --license で確認できます。
- Preact ↗MIT
Virtual-DOM core and SSR renderer
- preact-render-to-string ↗MIT
SVG string output
- JSON5 ↗MIT
`doc { … }` block parsing
- Tabler Icons ↗MIT
5,500+ built-in outline and filled icons
- sharp ↗Apache-2.0
PNG rasterization (CLI only, fetched at runtime)
- libvips ↗LGPL-2.1-or-later
sharp's image-processing backend (CLI only, fetched at runtime)
- Bun ↗MIT
Build toolchain and CLI compile target
- VitePress ↗MIT
This documentation site