cathrynlavery、AIエージェント向け図表生成ツール「diagram-design」をGitHubで公開
Claude CodeやPi等のAIエージェント向けに、HTMLとSVGで構成される38種類の編集用図表タイプを提供します。Mermaid等の既存ツールに頼らず、SankeyやWardley map…
AIの動向が実務の判断材料になる更新です。 Claude CodeやPi等のAIエージェント向けに、HTMLとSVGで構成される38種類の編集用図表タイプを提供します
デザイナーのcathrynlavery氏は、AIエージェントやLLMが人間にとって読みやすく美しい図表を生成するためのライブラリ「diagram-design」をGitHubで公開しました。本プロジェクトは、Claude CodeやCodex、Piといったエージェントツールでの利用を想定しており、影などの装飾を排したフラットなデザインの図表をHTMLとSVGのみで生成します。
最新のバージョン2.5.10では、Sankeyダイアグラム、魚骨図、Wardley map、カンバン、ユーザージャーニー、デプロイ図、依存関係グラフ、UMLクラス図、ストーリーマップ、データベーススキーマの10種類のレイアウト文法が追加されました。従来、LLMによる図表生成はMermaid等の外部ライブラリに依存することが一般的でしたが、本ツールはライブラリ不要の自己完結型コードを出力するため、実行環境の制約を受けにくいのが特徴です。
また、セマンティック・システム・パターンを採用しており、キューやポリシー・トレース、信頼境界といった振る舞いをレイアウトから分離して記述できます。静的な出力がデフォルトですが、オプションでアクセシブルなモーションを追加することも可能です。一方で、各図表は特定のホスト環境における「Agent Skills」との互換性を前提としているため、統合先のインターフェース仕様を事前に確認する必要があります。
Related tools
この記事に関連するおすすめツール
比較検討しやすい導入候補を優先して表示しています。一部リンクは広告・アフィリエイトを含む場合があります。
フェレット記者の用語メモ
llm
大規模言語モデルは膨大なデータから推論を行うAIの心臓部だけど、実務では推論のレイテンシやトークン制限の制御が一番の鬼門だよ。インフラ側で少しでも挙動が不安定になると、タイムアウト設定が甘いクライアント側でリクエストが詰まり、システム全体を巻き込んで死ぬことがあるから監視の閾値設計が重要だね。
比較: 従来のルールベースAI
svg
XMLベースのベクター画像形式で、拡大しても画質が落ちず、コードとして扱えるのが特徴だよ。AIとの相性が良く、CSSやJSで制御しやすいけど、パスが複雑すぎるとブラウザのレンダリング負荷が跳ね上がる。エージェントが複雑すぎる図を出力し始めると、ドキュメントの閲覧が重くなる落とし穴があるよ。
比較: PNG
出典: GitHub Trending
要点を短く整理して掲載しています。詳細は出典を確認してください。
