القائمة
Excalidraw JSON format — hand-drawn whiteboard-style diagrams. Brainstorming, wireframes, informal sketches, and collaborative visual thinking. Output as .excalidraw JSON for desktop rendering.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
D2 diagram language — declarative diagrams for architecture, system design, network topology, database schemas, and layered infrastructure diagrams. Renders to SVG/PNG via d2 CLI. Supports sketch mode.
Mermaid diagram syntax — sequence diagrams, flowcharts, ER diagrams, Gantt charts, state diagrams, class diagrams, and more. Renders to SVG/PNG via mmdc CLI. Native GitHub/markdown rendering support.
Financial consolidation — multi-entity rollup, intercompany elimination, currency translation, CTA, NCI/minority interest, segment reporting.
Expense and OpEx analysis — run-rate, cost per head, OpEx vs CapEx, vendor concentration, fixed vs variable decomposition, SG&A leverage.
FP&A financial planning — forecasting, scenario modeling, budgetary control.
Variance analysis — actual vs budget, YoY/MoM/QoQ deltas, bridge decomposition.
| name | excalidraw |
| description | Excalidraw JSON format — hand-drawn whiteboard-style diagrams. Brainstorming, wireframes, informal sketches, and collaborative visual thinking. Output as .excalidraw JSON for desktop rendering. |
| tags | ["excalidraw","whiteboard","sketch","hand-drawn","brainstorm","wireframe","canvas","json"] |
Use Excalidraw for:
Excalidraw is the "casual" renderer. Use it when the user wants something that looks hand-drawn, not polished.
Excalidraw files are JSON objects with this structure:
{
"type": "excalidraw",
"version": 2,
"source": "cosmic/diagram-agent",
"elements": [...],
"appState": {
"gridSize": null,
"viewBackgroundColor": "#ffffff"
},
"files": {}
}
{
"type": "rectangle",
"id": "rect_1",
"x": 100,
"y": 100,
"width": 200,
"height": 100,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "#a5d8ff",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"roundness": { "type": 3 },
"seed": 123456789,
"version": 1,
"versionNonce": 987654321,
"isDeleted": false,
"boundElements": null,
"updated": 1,
"link": null,
"locked": false
}
{
"type": "text",
"id": "text_1",
"x": 120,
"y": 130,
"width": 160,
"height": 25,
"text": "Hello World",
"fontSize": 20,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "middle",
"containerId": "rect_1",
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"angle": 0,
"seed": 111111111,
"version": 1,
"versionNonce": 222222222,
"isDeleted": false,
"boundElements": null,
"updated": 1,
"link": null,
"locked": false
}
{
"type": "arrow",
"id": "arrow_1",
"x": 300,
"y": 150,
"width": 100,
"height": 0,
"points": [[0, 0], [100, 0]],
"startBinding": {
"elementId": "rect_1",
"focus": 0,
"gap": 1
},
"endBinding": {
"elementId": "rect_2",
"focus": 0,
"gap": 1
},
"startArrowhead": null,
"endArrowhead": "arrow",
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"angle": 0,
"seed": 333333333,
"version": 1,
"versionNonce": 444444444,
"isDeleted": false,
"boundElements": null,
"updated": 1,
"link": null,
"locked": false
}
{
"type": "ellipse",
"id": "ellipse_1",
"x": 500,
"y": 200,
"width": 120,
"height": 120,
"strokeColor": "#e03131",
"backgroundColor": "#ffc9c9",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100,
"angle": 0,
"seed": 555555555,
"version": 1,
"versionNonce": 666666666,
"isDeleted": false
}
| Field | Description | Required |
|---|---|---|
type | Element type: rectangle, ellipse, diamond, text, arrow, line, freedraw, image, frame | Yes |
id | Unique identifier | Yes |
x, y | Position in canvas | Yes |
width, height | Dimensions | Yes |
strokeColor | Outline color hex | Yes |
backgroundColor | Fill color hex or "transparent" | Yes |
fillStyle | "solid", "hachure", "cross-hatch" | Yes |
strokeWidth | Line thickness (1-4 typical) | Yes |
roughness | Hand-drawn roughness (0=clean, 1=normal, 2=very rough) | Yes |
opacity | 0-100 | Yes |
angle | Rotation in radians | Yes |
seed | Random seed for consistent rendering | Yes |
version | Element version | Yes |
versionNonce | Random nonce | Yes |
isDeleted | Soft delete flag | Yes |
text | Text content (text elements only) | Text only |
points | Coordinate points (arrow/line only) | Arrow/line |
containerId | Parent container id (text inside shapes) | Optional |
Backgrounds: #ffffff, #f8f9fa, #fff3bf, #d0bfff, #a5d8ff, #b2f2bb, #ffc9c9, #ffec99
Strokes: #1e1e1e (black), #1971c2 (blue), #2f9e44 (green), #e03131 (red), #f08c00 (orange), #7048e8 (purple)
roughness: 1 for standard hand-drawn feelcontainerIdseed values based on element id hash for deterministic renderingfillStyle: "hachure" for a more sketchy lookstartBinding/endBindingfreedraw) connecting lines