#8 · ⚡24h jump · 🔥 (Rising) · 4 months old

Claude Code向けの編集品質ダイアグラム39種テンプレート集

HTML Difficulty: Beginner 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?

8日間で累計16,671★増加、Claude Code対応スキルとしてのタイミング合致

2026年8月9日の3,840★から17日の20,511★へと8日間で+16,671★増加し、検知日の直近24時間だけで+759★を記録しています。READMEに記載されているClaude Code・Codex・Agent Skills対応という訴求と、ユーザーが抱える「AIで生成した図は見栄えが悪い、Figmaで手直しに30分かかる」という課題が、そのタイミングで一致したと考えられます。公開から約4ヶ月経過した時点での急増であり、口コミやコミュニティ内での浸透が起きた可能性がありますが、Hacker Newsの言及は検出されていません。

Evidence: 8日間で+16,671★(2026年8月9日→17日)検知日24時間で+759★READMEで39種ダイアグラムとAgent Skills対応を明記

② What is it? (in three lines)

Claude CodeやCodexで図表を作る時に使える、デザイナーの手直し不要なHTMLベースのダイアグラム39種類をまとめたキット。アーキテクチャ図、フローチャート、シーケンス図など、ブランドに合わせて60秒で生成できます。ビルドステップもJavaScriptも不要で、ブラウザで直接開けます。

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
+759★
24h growth
+1.8%
Last push
1d ago
10 Aug 11 Aug (detected)
+759★ over these 1 days(3,840 → 4,599)
Detector: ⚡ 24-hour jump
Gain in 24h: +759★
24h growth: +1.8%
Detected from the change against the same hour the previous day
The repository's history
17 Apr 2026 Repository created
11 Aug Surge detected
1d ago Last push
👤 Who it suits

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

Idea 1

テックブログやQiita記事を毎月5記事以上書く個人エンジニア

The problem

記事のアーキテクチャ図やシーケンス図を毎回手作業で作成し、Figmaでの調整に1記事あたり20〜30分かけている

The approach

Claude Codeにこのリポジトリの39種テンプレートをAgent Skillsで組み込み、記事執筆時に「〇〇パターンの図を、このブランドカラーで」と指示すれば3分で完成。ブログのSEO評価も図表品質で上がる

💰 How it could earn

図表自動生成サービスを月額980円のnoteサブスクか、月5記事分の図表セットを2,000円で販売

Idea 2

企業向けのコンサル資料や提案資料を作成するコンサルタント

The problem

クライアント向けのプレゼン資料に技術系ダイアグラムが必要だが、毎回PowerPointで手書きするか外注に出しており、納期に間に合わない場合がある

The approach

Claude Codeのこのスキルを使ってコンサル資料のダイアグラムを自動生成し、draw.io形式やSVGで出力。クライアント企業のブランドカラーに合わせた39種から選んで即座に提案資料を完成させる

💰 How it could earn

Figmaファイル化して『資料自動生成テンプレート集』として月額3,000円のサブスク販売、または受託案件ごとに図表作成代行を1案件2万円で請負う

Idea 3

大学の情報系学科や職業訓練校でデータベース・ソフトウェア設計を教える講師

The problem

講義資料にER図やUML図が欠かせないが、毎年テンプレートを手作りするか、有料ツールのライセンスを購入し、学生にも学習用ライセンスを配る必要がある

The approach

このリポのER・UML class・state machine・dependency graphなど9種の学習用ダイアグラムを教材化し、学生がClaude Codeで手を動かしながら概念設計を学べるカリキュラムを組む。HTMLなのでビルド環境も不要

💰 How it could earn

講義用の『図表駆動型システム設計教材』をnoteやUdemyで3,000円で販売、または大学・研修機関向けにカスタマイズしたカリキュラムパッケージを15万円で受託開発

⑤ 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 11 Aug 2026, 05:59:13 · observation window 2026-08-10-0 (UTC) · summarised 24d ago