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

Claude Codeで高品質な図解を自動生成するHTMLスキル集

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?

9日間で+17793★。4月公開から4か月で3万超え、公開直後の急伸期を脱した時点での新たな成長局面

2026年8月9日時点で3840★だったスターが8月18日には21633★に達し、9日間で+17793★という急速な伸びを見せている。24時間単位では8月11日に+1998★を記録しており、持続的な成長が続いている状況です。リポジトリは4月16日の公開から約4か月が経過していながら、累計31768★を集めており、公開初期の盛り上がりではなく、機能追加やコミュニティの認知が広がるにつれて加速する段階にあることがうかがえます。

Evidence: 8月9日に3840★ → 8月18日に21633★(+17793★/9日)直近24時間(8月11日)で+1998★公開日4月16日から約4か月で累計31768★

② What is it? (in three lines)

Claude Codeやエージェント内で使える、39種類の編集レベルの図解テンプレート。アーキテクチャ図、フローチャート、データモデルなど、デザイナー品質の図を秒単位で生成できます。ビルドやJavaScript不要で、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,998★
24h growth
+4.9%
Last push
1d ago
10 Aug 11 Aug 12 Aug (detected)
+2,757★ over these 2 days(3,840 → 6,597)
Detector: ⚡ 24-hour jump
Gain in 24h: +1,998★
24h growth: +4.9%
Detected from the change against the same hour the previous day
The repository's history
17 Apr 2026 Repository created
12 Aug Surge detected
1d ago Last push
👤 Who it suits

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

Idea 1

テックブログ・Zennで月1〜2本記事を書く個人開発者

The problem

毎月2〜3枚の図解が必要だが、Figmaで30分以上かけて色選びと整形をしている

The approach

Claude Codeスキルとしてこのリポのアーキテクチャ図・フローチャート・状態遷移図などを活用し、記事執筆時に『この処理の図を最小限のデザインで作ってほしい』と指示するだけで、ブログのトーンに合った図をHTMLで即座に生成。draw.ioやMermaidのソースからの変換も可能

💰 How it could earn

このスキルを自分のClaude.mdとして整備し、『AI記事テンプレート販売サービス』で図解セット+テンプレート記事を月額2,000〜3,000円のサブスクで販売、または有料note記事として販売する

Idea 2

企業向けRFP・提案書作成を副業で受ける個人コンサルタント

The problem

月に5〜10件の提案資料を作るが、顧客ごとに異なる要件を図解する作業が毎回3〜4時間かかる

The approach

顧客のシステム説明を受け取ってClaude Codeに『これをアーキテクチャ図・導入手順の状態遷移図・ROI計算パイプラインで3パターン提案してほしい』と指示。39種類のテンプレートから最適なものを選んでSVGで生成し、PowerPointに貼り込む。ブランドカラーに合わせた出力も可能

💰 How it could earn

提案書作成代行サービスを月額15,000〜20,000円で複数クライアント受注。1件あたり1.5〜2時間で完成させることで時給1万円超を実現

Idea 3

スタートアップのプロダクトマネージャーやPMO

The problem

毎週の経営会議でプロダクトロードマップ・スプリント進捗・依存関係を図で説明する必要があるが、毎回Figmaで手作業更新が負担

The approach

このリポのタイムライン・kanban・dependency graph・Wardley mapなど、計画系の14種類のテンプレートをClaude Codeスキルに組み込み、Notionの週次進捗データをフィード。『KanbanボードとUML依存図を自動更新』と指示すればHTMLで最新版が生成される。draw.ioでの既存図の読み込みと変換も可能なので移行が簡単

💰 How it could earn

自分たちの社内運用をテンプレート化して、スタートアップ向けPMO支援パッケージ月額30,000〜50,000円で販売、または既存図解ツール連携のコンサル案件(一式50万〜100万)として受託

⑤ 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 12 Aug 2026, 06:01:29 · observation window 2026-08-11-0 (UTC) · summarised 24d ago