القائمة
Generate hand-drawn style diagrams, flowcharts, and architecture diagrams as PNG images from Excalidraw JSON
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
استنادا إلى تصنيف SOC المهني
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/duclm1x1/Dive-Ai --skill excalidrawيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
Persistent memory system for AI agents following Model Context Protocol (MCP). Use for storing long-term memories across sessions, semantic search of past knowledge, building knowledge graphs, auto-injecting context, deduplicating memories, syncing to cloud storage. Essential for agents that need to remember decisions, solutions, preferences, and learned patterns over time.
Persistent memory system for AI agents following Model Context Protocol (MCP). Use for storing long-term memories across sessions, semantic search of past knowledge, building knowledge graphs, auto-injecting context, deduplicating memories, syncing to cloud storage. Essential for agents that need to remember decisions, solutions, preferences, and learned patterns over time.
Master REST and GraphQL API design principles to build intuitive, scalable, and maintainable APIs that delight developers. Use when designing new APIs, reviewing API specifications, or establishing API design standards.
| name | excalidraw |
| description | Generate hand-drawn style diagrams, flowcharts, and architecture diagrams as PNG images from Excalidraw JSON |
Generate beautiful hand-drawn style diagrams rendered as PNG images.
/tmp/<name>.excalidrawnode ~/clawd/skills/excalidraw/scripts/render.js /tmp/<name>.excalidraw /tmp/<name>.pngSend the PNG directly in chat via message tool:
message(action="send", filePath="/tmp/<name>.png", caption="Description")
NEVER create a separate .excalidraw file for the user. Always render to PNG and send inline.
Only then provide the raw .excalidraw JSON file for editing in Excalidraw app.
node <skill_dir>/scripts/render.js input.excalidraw output.png
| Type | Shape | Key Props |
|---|---|---|
rectangle | Box |
| x, y, width, height |
ellipse | Oval | x, y, width, height |
diamond | Decision | x, y, width, height |
arrow | Arrow | connects shapes (see Arrow Binding below) |
line | Line | x, y, points: [[0,0],[dx,dy]] |
text | Label | x, y, text, fontSize, fontFamily (1=hand, 2=sans, 3=code) |
{
"strokeColor": "#1e1e1e",
"backgroundColor": "#a5d8ff",
"fillStyle": "hachure",
"strokeWidth": 2,
"roughness": 1,
"strokeStyle": "solid"
}
fillStyle: hachure (diagonal lines), cross-hatch, solid
roughness: 0=clean, 1=hand-drawn (default), 2=very sketchy
Always use from/to bindings for arrows. The renderer auto-calculates edge intersection points — no manual coordinate math needed.
{"type":"arrow","id":"a1","from":"box1","to":"box2","strokeColor":"#1e1e1e","strokeWidth":2,"roughness":1}
That's it. No x, y, or points needed. The renderer computes start/end at shape edges.
For arrows that need to go around obstacles, use absolutePoints with intermediate waypoints:
{
"type":"arrow","id":"a2","from":"box3","to":"box1",
"absolutePoints": true,
"points": [[375,500],[30,500],[30,127],[60,127]],
"strokeColor":"#1e1e1e","strokeWidth":2,"roughness":1
}
Place a separate text element near the arrow midpoint:
{"type":"text","id":"label","x":215,"y":98,"width":85,"height":16,"text":"sends data","fontSize":10,"fontFamily":1,"strokeColor":"#868e96"}
"strokeStyle":"dashed" — dashed line"startArrowhead": true — bidirectional arrow{
"type": "excalidraw",
"version": 2,
"elements": [
{"type":"rectangle","id":"start","x":150,"y":50,"width":180,"height":60,"strokeColor":"#1e1e1e","backgroundColor":"#b2f2bb","fillStyle":"hachure","strokeWidth":2,"roughness":1},
{"type":"text","id":"t1","x":200,"y":65,"width":80,"height":30,"text":"Start","fontSize":20,"fontFamily":1,"strokeColor":"#1e1e1e"},
{"type":"arrow","id":"a1","from":"start","to":"decision","strokeColor":"#1e1e1e","strokeWidth":2,"roughness":1},
{"type":"diamond","id":"decision","x":140,"y":170,"width":200,"height":120,"strokeColor":"#1e1e1e","backgroundColor":"#ffec99","fillStyle":"hachure","strokeWidth":2,"roughness":1},
{"type":"text","id":"t2","x":185,"y":215,"width":110,"height":30,"text":"Condition?","fontSize":18,"fontFamily":1,"strokeColor":"#1e1e1e","textAlign":"center"},
{"type":"arrow","id":"a2","from":"decision","to":"process","strokeColor":"#1e1e1e","strokeWidth":2,"roughness":1},
{"type":"rectangle","id":"process","x":150,"y":350,"width":180,"height":60,"strokeColor":"#1e1e1e","backgroundColor":"#a5d8ff","fillStyle":"hachure","strokeWidth":2,"roughness":1},
{"type":"text","id":"t3","x":190,"y":365,"width":100,"height":30,"text":"Process","fontSize":20,"fontFamily":1,"strokeColor":"#1e1e1e"}
]
}
Fills: #a5d8ff (blue), #b2f2bb (green), #ffec99 (yellow), #ffc9c9 (red), #d0bfff (purple), #f3d9fa (pink), #fff4e6 (cream)
Strokes: #1e1e1e (dark), #1971c2 (blue), #2f9e44 (green), #e8590c (orange), #862e9c (purple)
Labels: #868e96 (gray, for annotations)
id (required for binding!)from/to on arrows — don't calculate coordinates manuallyroughness:0 for clean diagrams, 1 for sketchy feelfontFamily:1 for hand-drawn, 3 for code