Diagram Design: 42 نوع diagram بجودة editorial لـ Claude Code — 43 ألف نجمة

🔗 رابط المشروع على GitHub: https://github.com/cathrynlavery/diagram-design

🖼️ Live Gallery: cathrynlavery.github.io/diagram-design

👤 المؤلف: Cathryn Lavery — مؤسسة BestSelf.co

---

كل مرة بتطلب من Claude أو ChatGPT يرسملك diagram — architecture، flowchart، pyramid — بيطلعلك “rounded box generic” شكله مش مناسب لأي موقع محترم. تضطر تفتح Figma 30 دقيقة أو تلغي الـ diagram أساساً.

Diagram Design من Cathryn Lavery (مؤسسة BestSelf.co) بيحل الموضوع ده. Claude Code skill (plugin) بيرسم diagrams بـ جودة editorial — مطابقة لـ brand موقعك، في 60 ثانية.

43.4k نجمة، 2.8k fork، MIT License. مدعوم في Claude Code، Codex، GitHub Copilot، Factory Droid، Pi، Kiro، وOpenCode.

الفكرة في جملة

42 نوع diagram، كل واحد في 3 variants (minimal light، minimal dark، full-editorial). HTML + SVG self-contained — تفتح أي ملف في المتصفح مباشرة. مفيش build step، مفيش JavaScript، مفيش external images.

الفلسفة: “The highest-quality move is usually deletion. Every node earns its place.”

الـ 42 نوع — القائمة الكاملة

Architecture + System Design

• Architecture — components + connections
• Architecture Delta — Before · Changes · After topology
• IT Current-State — legacy + modernization
• High-Level — end-to-end stack
• Deployment — zones, hosts + artifacts
• Layer Stack — stacked abstractions
• Dependency Graph — fan-in, ranks + cycles
• UML Class — classes + typed relations
• Database Schema — tables + column FKs
• ER / Data Model — entities + fields

Process + Flow

• Flowchart — decision logic
• Sequence — messages over time
• State Machine — states + transitions
• Swimlane — cross-functional flow
• Process — multi-actor sequential workflow
• Data Flow — role-scoped pipeline
• Sankey — quantities that split + merge
• User Journey — stages, actions + sentiment
• Fishbone — grouped causes → one effect

Charts + Data Viz

• Bar Chart، Line Chart، Scatter Plot
• Treemap — part-of-whole by area
• Polar Chart — cyclic magnitude · linear radius
• Waterfall — running total + signed bridges
• Radar / Spider — multi-axis comparison
• Quadrant — two-axis positioning
• Gantt — tasks + phases on timeline
• Timeline — events on an axis

Structural + Strategic

• Loop / Flywheel — reinforcing cycle + shared hub (جديد في 2.0)
• Pyramid / Funnel — ranked hierarchy or drop-off
• Venn — set overlap
• Nested — hierarchy by containment
• Tree — parent → children
• Org Chart — ownership + routing
• Wardley Map — value chain × evolution
• Kanban — WIP by state
• Story Map — backbone × release slices

Physical + Isometric

• Exploded Axonometric — parts pulled apart (phone teardown، unboxing)
• Axonometric Plan — floor plans، campus layouts
• Medallion — multi-tier data storage
• DP Integration + DP Security Matrix

🎨 Brand Onboarding — نقطة القوة الحقيقية

ده اللي يفرقه عن أي tool تاني. بدل diagrams generic، بيحوّلها لـ brand بتاعك في 60 ثانية:

You:   "onboard diagram-design to https://n8nar.com"
Agent: → بيفتح الموقع
       → بيستخرج الألوان الأساسية + font stack
       → بيعيّن الـ semantic roles:
           paper, ink, muted, accent, link
       → بيعرضلك diff
       → بيكتب tokens بتاعتك في style-guide.md
You:   "yes, apply it"

كل diagram بعد كده هيستخدم ألوان موقعك، font موقعك، spacing. بيعمل WCAG AA contrast check تلقائياً.

اللي بيتاخد من موقعك

من الموقع	بيبقى
<body> background	paper token
Primary text color	ink token
Secondary text	muted token
CTA / Link color	accent token
<h1> font	title font
<body> font	node-name font
<code> font	sublabel font

Multiple Clients؟ Named Profiles

onboard brand مرة، احفظها كـ profile باسم (faahm، dse، bond)، وضيف .diagram-design marker في كل مشروع. ده بيخلّي كل عميل DSE له style منفصل بدون overwrite.

التثبيت

Claude Code

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

بعدها فعّل auto-update من /plugin → Marketplaces → diagram-design → Enable auto-update.

Codex

codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design

GitHub Copilot

copilot plugin marketplace add cathrynlavery/diagram-design
copilot plugin install diagram-design@diagram-design

Factory Droid + Pi

# Factory Droid
droid plugin marketplace add https://github.com/cathrynlavery/diagram-design
droid plugin install diagram-design@diagram-design --scope user

# Pi
pi install https://github.com/cathrynlavery/diagram-design

Import — من draw.io و Mermaid و Excalidraw

عندك diagrams في draw.io أو Mermaid أو Excalidraw؟ Diagram Design بيعيد رسمها — نفس المحتوى، بـ design system بتاعك، في أي size تحتاجه.

/diagram-design:import-drawio platform.drawio
/diagram-design:import-drawio platform.drawio --size=slide-16x9 --detail=simplified
/diagram-design:import-mermaid README.md --diagram=all
/diagram-design:import-excalidraw whiteboard.excalidraw --size=slide-16x9

الـ 4 Dials

Dial	Options	بيغيّر إيه
Format	html · svg · png · html+png	الـ deliverable
Size	doc-inline · slide-16×9 · social-og · print-a4	viewBox + type ramp
Detail	faithful (≤24) · balanced (≤12) · simplified (≤7)	قد إيه من source يفضل
Audience	engineer · mixed · executive	الـ wording مش العدد

مثال: نفس الـ source بيديك diagram مختلف لـ Figma، slide، وسوشيال.

Export — SVG / PNG

/diagram-design:export-diagram path/to/diagram.html
/diagram-design:export-diagram diagram.html --svg-only
/diagram-design:export-diagram diagram.html --png-only --scale=3

SVG بيشتغل في Figma و Illustrator مباشرة. PNG بيستخدم Playwright بـ 2× resolution. One-time setup: pip install playwright && playwright install chromium.

Design System — في فقرة واحدة

• Accent color واحد، 1-2 focal elements لكل diagram
• 3 font families: Instrument Serif (titles)، Geist sans (nodes)، Geist Mono (tech sublabels)
• 1px hairline borders، مفيش shadows، max border-radius 10px
• كل coord/width/gap divisible by 4 — ده اللي يمنع shape الـ AI-generated
• Mono للـ technical content بس (ports، URLs، field types)
• Coral-tinted focal nodes بتوجّه العين لـ 1-2 حاجة اللي بتهم

سيناريوهات Ibrahim المباشرة

1) 📝 n8nar blog

كل مقال GitHub بتنشره، ممكن يكون فيه architecture diagram حقيقي بـ brand n8nar — بدل الـ SVG hero cards. الـ onboarding جملة واحدة:

onboard diagram-design to https://n8nar.com

بعدها كل diagram في المقالات هيبقى مطابق بالكامل لـ brand الموقع.

2) 🎓 faahm — Lesson Diagrams

الكورسات على faahm.com بتحتاج diagrams تشرح concepts. Sequence diagrams لـ API flows، Architecture لـ system design، Pyramid لـ learning hierarchies. كلها بـ brand faahm.

3) 🏢 DSE — Client Decks

كل عميل DSE له profile مختلف:

# مرة واحدة لكل عميل
onboard diagram-design to https://clinic-site.com
save as profile "dr-sara"

# بعد كده في مشروع العميل
echo "profile: dr-sara" > .diagram-design

كل diagram في pitch deck العميل بـ ألوانه. Marie Ragaie، Dr Sara، Dr Hamdy، Genesis — كلهم profiles منفصلة.

4) 💻 Vibe Coding Course

كل درس في كورس Vibe Coding محتاج architecture diagram للـ SaaS اللي الطلاب بيبنوه. بدل ما ترسمها يدوي، اطلب من Claude Code: “ارسملي architecture لـ Next.js + Supabase + Vercel app”.

5) 📚 Lecture Docs Platform

الموقع اللي بيحوّل الـ lectures لـ documents منظّمة — Diagram Design بيضيف طبقة جديدة: استخراج diagrams من المحاضرة تلقائياً. State machines، flowcharts، sequence diagrams من محتوى المحاضرة.

6) 🎬 bond — Reels Thumbnails

Export PNG بـ scale 3× = thumbnails بـ جودة عالية للـ reels اللي بتشرح concepts. مش ضروري Canva.

فرصة Service جديدة 💰

“Branded Diagrams Setup” — تنصبّ Diagram Design مع brand onboarding لعملاء DSE، startups، agencies. سعر مقترح: 3-5 آلاف جنيه لكل brand setup، أو bundle مع Agency Agents setup (25-55 ألف جنيه total لكل عميل).

العميل بيحصل على: brand onboarded + profile محفوظ + Claude Code installed + 5-10 diagrams جاهزة لـ pitch decks.

مكانه في الـ Stack

مع المقالات السابقة، Diagram Design بيبقى الطبقة البصرية (Visual Layer) في stack الـ Multi-Agent:

الطبقة	الأداة
🤲 Hands	Cua
👁️ Senses	Agent Reach
🎯 Skills	Awesome Claude Skills
🎭 Roster	Agency Agents (300+)
🎨 Visual	Diagram Design
🏢 Org	Paperclip
🧠 Memory	Claude-Mem / Hindsight
🎙️ Voice	VoiceStudio
🛡️ Security	OpenShell
💬 Interface	OpenClaw

📎 رابط المشروع: github.com/cathrynlavery/diagram-design