#2 · ⚡24h jump · 🔥 (Rising) · 🔥4 days running+8,348★ · 4 months old

Claude Code向けの高品質ダイアグラムライブラリ

HTML Difficulty: Intermediate Agent add-onsDesign & UI 🆓No extra cost
GitHub topics: #agent-skills#claude-code#codex#data-visualization#diagrams#drawio#mermaid#svg

The three-line summary, the reason it surged and the spin-off ideas are generated automatically by AI. They can be wrong. Always check the original on GitHub before acting on them. Terms of Use

① Why did it surge?

13日間で約21,600★増加。Claude Code対応の実用的ツール

2026年8月9日から8月22日にかけて、3,840★から25,419★へ13日で+21,579★の急増が実測されています。READMEに記載される39種のダイアグラム型(アーキテクチャ、フローチャート、タイムライン、Sankey、Wardley mapなど)がClaude Code・Codex・Agent Skills対応として実装されており、セルフホストHTMLという導入の低さが拡がりやすい設計になっています。Hacker Newsでの言及は検知日周辺では見つかっていませんが、公開4か月での規模を考えると、エージェント基盤の利用者コミュニティ内での認知度上昇が継続している状態と推察されます。

Evidence: 8月9日→8月22日で+21,579★公開日は4月16日、検知時31,768★39種ダイアグラム+バージョン2.5.10新機能

② What is it? (in three lines)

Claude CodeやCodexで使える39種類のダイアグラムテンプレート集です。アーキテクチャ図からタイムラインまで、デザイナー品質の図を自動生成できます。HTMLとSVGだけで動き、外部ツールは不要です。

Read the original GitHub description

Editorial diagram design for Claude Code, Codex, and Pi. Self-contained HTML + SVG. No shadows. No Mermaid slop.

③ Total stars over time (last 7 days, one point per day)

Total stars
★42,776
Last 24h
+1,424★
24h growth
+3.4%
Last push
1d ago
10 Aug 13 Aug 16 Aug (detected)
+14,639★ over these 6 days(3,840 → 18,479)
Detector: ⚡ 24-hour jump
Gain in 24h: +1,424★
24h growth: +3.4%
Detected from the change against the same hour the previous day
The repository's history
17 Apr 2026 Repository created
16 Aug Surge detected
1d ago Last push
👤 Who it suits

④ Three spin-off ideas for a side-project developer

Idea 1

SaaS企業のプロダクトマネージャー

The problem

仕様書やロードマップを毎月更新する際に、デザイナーに依頼すると1週間待たされて進捗が止まる

The approach

このダイアグラムライブラリのスキルをClaude Codeに統合し、markdown形式の仕様書をアップロードするだけで、Wardley mapや依存関係図を自動生成するSlackボットを実装。承認フローをGitHub連携で自動化する

💰 How it could earn

導入企業向けに月額3,000円のセットアップ・運用代行サービス、または生成図の使用量に応じた従量課金(1図あたり100円)で副業受託

Idea 2

オンライン講師・教育系YouTuber

The problem

プログラミング講座の説明動画で、アルゴリズムの状態遷移や処理フローを手描きすると視聴者からクオリティの指摘が来る

The approach

講座の各回で必要なフローチャート・シーケンス図・状態機械図をこのライブラリから自動生成し、Figma不要で統一感のある図を動画に組み込む。オプションでClaude Codeの『ordered explanations向けアニメーション機能』を使い、説明と連動した段階的表示も実装

💰 How it could earn

生成サービスとしてnote有料記事で『ダイアグラム自動生成プロンプト集』を月額500円販売、または講座サポート画像生成の受託(1コース5,000円程度)

Idea 3

スタートアップのテックリード

The problem

IPO向けの投資家ピッチデックで、アーキテクチャ図やデータフロー図をPowerPointで手作りしているが、毎回エンジニアリソースが必要

The approach

このダイアグラムライブラリを使ってER図・アーキテクチャ・Sankey図をJSON定義ファイルから生成するCLI拡張を構築。エンジニアが簡単なYAMLを書くだけで、投資家向けの『No Figma』高品質図が5分で完成

💰 How it could earn

スタートアップ向けに年額2万円のテンプレート+セットアップ代行、または図生成ツールのSaaS化(月額2,000円)で販売

⑤ Related repositories

Same language: HTML · Shared topics: agent-skillsclaude-codecodexdata-visualizationdiagrams
f/prompts.chat ★171,617

ChatGPTなどのAIから望む回答を引き出すための指示文を共有・保存できるサイト

HTML chatgptaiartificial-intelligence

🔗 Related hubs and surges from the same day

🔔 Get the next one

Get surging AI repositories summarised in Japanese, with spin-off ideas without opening the site (once each morning). No email address required.

What is RSS: New items arrive automatically wherever you already read (a reader such as Feedly, Slack, n8n). Copy the URL above and paste it in — no sign-up, no cost.

Detected at 16 Aug 2026, 05:36:35 · observation window 2026-08-15-0 (UTC) · summarised 24d ago