AIエージェントが提案書・レポート向けの図とグラフをポータブル画像で安定生成するOSS「Gridgram」「chartjs2img」を公開
LLM画像生成の不安定さと既存DSLの寡淡な見た目の中間を狙う、AIエージェントフレンドリーな2つのMITライセンスOSS
アイデアマンズ株式会社(本社:東京都港区、代表取締役:宮永邦彦)は、2026年4月28日、AIエージェントが関係図・アーキテクチャ図・グラフを「ポータブルな画像ファイル」として安定生成するための2つのオープンソースソフトウェア(OSS)を、MITライセンスで同時公開しました。
- Gridgram(グリッドグラム) - グリッド座標とアイコンで関係図・アーキテクチャ図を描くテキストDSL
- chartjs2img(チャートジェーエスツーイメージ) - Chart.jsのグラフ設定JSONからPNG画像を生成するサーバーサイドレンダラ
いずれもAIエージェントが「ポータブルな画像ファイル」として、ゾーン分けや注釈・アノテーションを含む実務レベルの図・グラフを安定して出力できることを目指しています。下図は、それぞれのプロジェクトでAIエージェントが生成した出力例です。

開発の背景
AIエージェントの「ビジュアル表現」が抱える3つの課題
AIエージェントの活躍場面は急速に広がっており、対話的な利用にとどまらず、バックグラウンドや非同期処理でドキュメント・レポート・提案書を自動生成するケースも増えています。その中で、テキスト出力に視覚的な情報を添える「図」や「グラフ」の品質と再現性が大きな課題として浮上しています。
1. LLMによる画像生成: 再現性と統一感の欠如
Gemini 3(Nano Banana)以降、日本語を含むインフォグラフィックやグラフ的な表現がLLMで生成可能になりました。しかしLLMによる生成は、同じ指示でも結果が毎回ぶれ、再現性や統一感の制御が難しいという根本的な問題があります。さらに装飾要素が自動的に追加されるため、技術文章や提案書のようなフォーマルな文脈では「浮いた」印象を与えがちです。
2. テキストDSLツール: 装飾の寡淡さとレイアウト制御の難しさ
Mermaid、GraphViz、D2などのテキストDSLは、関係性をテキストで宣言して図を自動生成する優れたOSSが揃っています。しかし出力はモノトーンで装飾が乏しく、技術書や学術文書のような「読み手に前提知識がある」場面では十分でも、一般向けの提案書やマーケティング資料では寡淡で寂しい印象になりがちです。また要素数が増えるとレイアウトや装飾の制御が急速に難しくなる傾向があります。
LLM画像生成は派手だが揺れる、テキストDSLは安定しているが寡淡 ─ 「帯に短し襷に長し」で、その中間に位置するスイートスポットを満たすツールがない、という問題意識がありました。
3. バックグラウンド・非同期処理での「ポータブル画像」の必要性
ブラウザ上のインタラクティブなチャットであればグラフィックを直接描画できますが、AIエージェントがバックグラウンドや非同期で動作する場面、あるいはメールやSlackといったメッセージングサービスに添付する場面では、単独で扱える画像ファイル形式での出力が必要になります。これも従来のビジュアル生成手段がカバーしきれていない領域でした。
スイートスポットを狙う2つのOSSとして設計
これらの課題に対し、アイデアマンズでは以下の方針で2つのツールを設計しました。
- アイコン・グリッド・色によって、テキストDSLよりも一段「フレンドリー」な見た目
- 記述からの決定論的な出力で、LLMのような揺れを排除した再現性・統一感
- JavaScriptライブラリ譲りの表現力(特に日本語の仕上がり)を維持しながら、PNG/SVGで書き出せるポータブル性
- AIエージェントがバックグラウンドや非同期処理から自律的に呼び出せるインターフェース
これにより生まれたのが、関係図向けの「Gridgram」と、グラフ画像向けの「chartjs2img」です。
プロジェクト概要 (1) Gridgram - 関係図・アーキテクチャ図のテキストDSL
Gridgramは、.gg拡張子のテキストファイル(Mermaid風DSL)またはTypeScriptのDiagramDefオブジェクトで関係図・アーキテクチャ図・データフロー図を記述し、SVGまたはPNG画像として出力するOSSです。
主な特徴:
- グリッド座標による決定論的レイアウト: ノードを
@A1・@B2のようなセル座標で配置するため、同じ記述からは毎回同じレイアウトの図が生成されます。LLMが多少パラメータをぶらしても図形は崩れません - Tablerアイコン内蔵: アウトライン5,039種以上・フィルド1,053種以上のTablerアイコンを内蔵。
gg iconsコマンドでキーワード意味検索が可能です - 描画空間の事前確定:
doc { cols: N }で列数を指定することで、出力図のアスペクト比を確定させた上で図を作成できます。プレゼン1スライドや提案書の1枠に収まる図を確実に生成できます - 診断ベース設計: エラーで処理が止まらず、問題は
PlacementDiagnostic[]として返されます。AIエージェントが診断結果を受け取り、修正ループを自律的に回せる設計です
プロジェクト概要 (2) chartjs2img - Chart.jsグラフのサーバーサイドレンダラ
chartjs2imgは、Chart.jsのグラフ設定をJSON形式で受け取り、PNG画像として返すサーバーサイドレンダラです。内部ではヘッドレスChromiumを使用してグラフをレンダリングします。
主な特徴:
- Chart.js 4.4.9 + プラグイン11種を内蔵: Datalabels・Annotation・Matrix・Sankey・Treemap・Wordcloud・Geo・Graph・Venn・Funnel・Crosshairなど、Chart.jsコアに加え多彩なプラグインをすぐに使えます。JSON設定はシリアライズ可能な値のみで記述します(関数指定には非対応)
- Noto Sans CJKフォント同梱(Dockerイメージ): Dockerイメージに日本語フォントを含んでいるため、日本語ラベルを含むグラフも文字化けなく出力できます
- ハッシュベースキャッシュ: SHA-256ハッシュによるキャッシュで同一設定のグラフ画像を再利用。
X-Cache-*ヘッダーでキャッシュ状態を確認できます - エラーフィードバック:
X-Chart-Messagesヘッダーとstderrにエラー内容を出力します。AIエージェントがエラーを受け取って設定JSONを修正する自己修正ループを構築できます - 同時実行制御: セマフォによる同時実行数の制限(デフォルト8)でサーバーの安定稼働を維持します


共通する「AIエージェントフレンドリー」な設計
GridgramとchartjsImgは、AIエージェントから自律的に呼び出される前提で共通の設計方針を持っています。
1. AIエージェント用スキルの即時導入
両ツールはAnthropic Claude Marketplace、およびGitHub CLI(gh skill install)の2経路でAIエージェント用スキルを配布しています。Claude Code・GitHub Copilot・Cursor・Gemini CLIなど複数のAIエージェント環境で、コマンド一つで即座に利用を開始できます。
| ツール | 提供スキル |
|---|---|
| Gridgram | /gg-install・/gg-render・/gg-icons・/gg-author |
| chartjs2img | /chartjs2img-install・/chartjs2img-render・/chartjs2img-author |
2. ライブラリナレッジのMCP連携(Context7)
両ツールとも、ライブラリのドキュメントをAIエージェントに提供するMCP(Model Context Protocol)サーバーである Context7 に登録済みで、エージェントが文法や使い方を直接参照できます。あわせてllms.txt・llms-full.txt(llmstxt.org標準準拠)も公開し、システムプロンプトへの取り込みにも対応しています。CLIにはMarkdownリファレンスを出力するgg llm / chartjs2img llmコマンドも用意しています。
3. シングルバイナリでの配布
両ツールはBunを用いてシングルバイナリとしてパッケージ化されており、必要なライブラリはバイナリに同梱、またはランタイムで自動インストールされます。プログラムファイル一つで、ローカル開発・CI・サーバー・コンテナなどあらゆる場面ですぐに使い始められるシンプルさを実現しています。
提供形態と入手方法
Gridgram
| 提供形態 | 入手方法 |
|---|---|
CLIツール(ggコマンド) | curl -fsSL https://bin.ideamans.com/install/gg.sh | bash |
| TypeScript API(npm) | npm install gridgram |
CLIはSVG・PNG・正規化JSON出力に、TypeScript APIはSVG出力に対応します。macOS・Linux(x86_64・ARM64)・Windows(x86_64)向けバイナリをGitHubリリースで提供しています。
chartjs2img
| 提供形態 | 入手方法 |
|---|---|
| HTTP API(Docker) | docker run -p 3000:3000 ideamans/chartjs2img |
| CLIバイナリ | curl -fsSL https://bin.ideamans.com/install/chartjs2img.sh | bash |
| TypeScriptライブラリ(npm) | npm install chartjs2img |
HTTP APIはPOST /renderにChart.js設定JSONを送信するとグラフ画像が返ります。35種の組み込みサンプルを/examplesエンドポイントで確認できます。Linux ARM64環境でのChromiumは手動でのセットアップが必要です。
プロジェクト情報
Gridgram
- プロジェクト名: Gridgram(グリッドグラム)
- ライセンス: MIT
- 公式サイト: https://gridgram.ideamans.com/
- GitHub: https://github.com/ideamans/gridgram
- 対応プラットフォーム: macOS・Linux・Windows
- 提供形態: npmパッケージ(TypeScript API)/ CLIバイナリ
chartjs2img
- プロジェクト名: chartjs2img(チャートジェーエスツーイメージ)
- ライセンス: MIT
- 公式サイト: https://chartjs2img.ideamans.com/
- GitHub: https://github.com/ideamans/chartjs2img
- 対応プラットフォーム: macOS・Linux・Windows
- 提供形態: Dockerイメージ / CLIバイナリ / npmパッケージ(TypeScriptライブラリ)
- 内蔵Chart.jsバージョン: 4.4.9
関連記事(ideamans Notes):
- Mermaid風のテキストから図解を生成するGridgram
- GridgramをAIエージェントフレンドリーにする
- Chart.jsのグラフをCLIで画像化するOSSツール「chartjs2img」を公開
会社概要
- 会社名: アイデアマンズ株式会社
- 所在地: 東京都港区
- 代表取締役: 宮永邦彦
- 設立: 2005年11月
- 資本金: 1,800万円
- 事業内容: ソフトウェアおよびウェブサービスの企画・開発・販売
- URL: https://www.ideamans.com/
メディアキット
この記事で使用されている画像素材をZIPファイルでダウンロードできます。