# Send Excalidraw Diagrams for Obsidian to your agent Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually. ## Fast path - Download the package from Yavira. - Extract it into a folder your agent can access. - Paste one of the prompts below and point your agent at the extracted folder. ## Suggested prompts ### New install ```text I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete. ``` ### Upgrade existing ```text I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run. ``` ## Machine-readable fields ```json { "schemaVersion": "1.0", "item": { "slug": "excalidraw-diagrams", "name": "Excalidraw Diagrams for Obsidian", "source": "tencent", "type": "skill", "category": "内容创作", "sourceUrl": "https://clawhub.ai/Ricardodpalmeida/excalidraw-diagrams", "canonicalUrl": "https://clawhub.ai/Ricardodpalmeida/excalidraw-diagrams", "targetPlatform": "OpenClaw" }, "install": { "downloadUrl": "/downloads/excalidraw-diagrams", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=excalidraw-diagrams", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "packageFormat": "ZIP package", "primaryDoc": "SKILL.md", "includedAssets": [ "SKILL.md", "references/excalidraw-format.md" ], "downloadMode": "redirect", "sourceHealth": { "source": "tencent", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-04-23T16:43:11.935Z", "expiresAt": "2026-04-30T16:43:11.935Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard", "contentDisposition": "attachment; filename=\"4claw-imageboard-1.0.1.zip\"", "redirectLocation": null, "bodySnippet": null }, "scope": "source", "summary": "Source download looks usable.", "detail": "Yavira can redirect you to the upstream package for this source.", "primaryActionLabel": "Download for OpenClaw", "primaryActionHref": "/downloads/excalidraw-diagrams" }, "validation": { "installChecklist": [ "Use the Yavira download entry.", "Review SKILL.md after the package is downloaded.", "Confirm the extracted package contains the expected setup assets." ], "postInstallChecks": [ "Confirm the extracted package includes the expected docs or setup files.", "Validate the skill or prompts are available in your target agent workspace.", "Capture any manual follow-up steps the agent could not complete." ] } }, "links": { "detailUrl": "https://openagent3.xyz/skills/excalidraw-diagrams", "downloadUrl": "https://openagent3.xyz/downloads/excalidraw-diagrams", "agentUrl": "https://openagent3.xyz/skills/excalidraw-diagrams/agent", "manifestUrl": "https://openagent3.xyz/skills/excalidraw-diagrams/agent.json", "briefUrl": "https://openagent3.xyz/skills/excalidraw-diagrams/agent.md" } } ``` ## Documentation ### Excalidraw Diagram Generator Create Excalidraw diagrams from text content with multiple output formats compatible with Obsidian's Excalidraw plugin. ### Output Modes The user must explicitly request a diagram. Do not generate or save files unless the user asks for one. ModeWhen to useFile ExtensionUse CaseObsidianUser asks for an Obsidian/Excalidraw diagram.mdOpen directly in Obsidian with Excalidraw pluginStandardUser asks for a standard/excalidraw.com file.excalidrawOpen on excalidraw.com If the mode is ambiguous, ask the user which format they want. ### Process Confirm output mode with the user if ambiguous Analyze content - identify concepts, relationships, hierarchy Choose diagram type based on content structure Generate Excalidraw JSON following design rules below Output in correct format based on mode Ask the user for the save path and filename before writing Check if file exists at the target path. If it does, ask before overwriting Save the file only after user confirmation ### Mode 1: Obsidian Format (Default) This format wraps the JSON in Markdown so Obsidian's Excalidraw plugin opens it directly: --- excalidraw-plugin: parsed tags: [excalidraw] --- ==⚠ Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this document. ⚠== You can decompress Drawing data with the command palette: 'Decompress current Excalidraw file'. For more info check in plugin settings under 'Saving' # Excalidraw Data ## Text Elements %% ## Drawing \`\`\`json {"type":"excalidraw","version":2,"source":"https://github.com/zsviczian/obsidian-excalidraw-plugin","elements":[...],"appState":{"gridSize":null,"viewBackgroundColor":"#ffffff"},"files":{}} %% **Critical formatting rules:** - Frontmatter MUST include \`tags: [excalidraw]\` - The warning message must be complete - JSON must be inside a \`\`\`json code block - Text Elements section stays empty (just \`%%\`) - Source must be \`"https://github.com/zsviczian/obsidian-excalidraw-plugin"\` for Obsidian mode ### Mode 2: Standard Excalidraw Format Pure JSON for excalidraw.com: \`\`\`json { "type": "excalidraw", "version": 2, "source": "https://excalidraw.com", "elements": [...], "appState": { "gridSize": null, "viewBackgroundColor": "#ffffff" }, "files": {} } ### Typography All text elements must use "fontFamily": 5 (Excalifont - hand-drawn style) Font sizes: Titles: 24-28px (minimum 20px) Subtitles: 18-20px Body/labels: 16-18px (minimum 16px) Annotations: 14px (use sparingly) Never use font size below 14px - unreadable at normal zoom Line height: "lineHeight": 1.25 for all text Text alignment: "textAlign": "center", "verticalAlign": "middle" for labels ### Layout Canvas range: Keep all elements within 0-1200 x 0-800 pixels Minimum shape size: Rectangles/ellipses with text should be at least 120x60px Element spacing: Minimum 20-30px between elements to prevent overlap Padding: Leave 50-80px padding around all edges Grid: Place elements on 20px grid for alignment ### Color Palette Shape fill colors (backgroundColor, fillStyle: "solid"): ColorHexUsageLight Blue#a5d8ffInput, data sources, primary nodesLight Green#b2f2bbSuccess, output, completed statesLight Orange#ffd8a8Warnings, pending, external dependenciesLight Purple#d0bfffProcessing, middleware, special itemsLight Red#ffc9c9Errors, critical alertsLight Yellow#fff3bfNotes, decisions, planningLight Cyan#c3fae8Storage, data, cacheLight Pink#eebefaAnalysis, metrics, statistics Text colors (strokeColor): UsageHexNotesHeadings#1e40afDeep blueSubtitles/connectors#3b82f6Bright blueBody text#374151Dark gray (minimum #757575 on white)Emphasis#f59e0bGold/amber Contrast rules: White background text: minimum #757575 lightness Light fills: use dark variants (e.g., light green fill → #15803d text) Avoid light gray text (#b0b0b0, #999) on white ### Styling Roughness: 1 (artist style) for hand-drawn look, or 0 (architect) for clean diagrams Stroke width: 2 (normal) for most elements Roundness: { "type": 3 } for rounded corners on rectangles Opacity: 100 for most elements, 30-50 for background layers ### Diagram Types Choose the appropriate visualization based on content: TypeBest ForLayoutFlowchartStep-by-step processes, workflowsTop-to-bottom or left-to-right with arrowsMind MapConcept expansion, brainstormingRadial from centerHierarchyOrg charts, system decompositionTop-down tree structureRelationshipDependencies, interactionsNetwork with connecting linesComparisonA vs B analysisSide-by-side columnsTimelineEvent progression, milestonesHorizontal time axisMatrix2D categorization, priority gridsX/Y coordinate planeArchitectureSystem components, data flowLayered (frontend/middleware/backend) ### Root Structure { "type": "excalidraw", "version": 2, "source": "https://github.com/zsviczian/obsidian-excalidraw-plugin", "elements": [...], "appState": { "gridSize": null, "viewBackgroundColor": "#ffffff" }, "files": {} } ### Element Template All elements require these fields: { "id": "unique-id-string", "type": "rectangle|ellipse|text|arrow|diamond|line", "x": 100, "y": 100, "width": 200, "height": 50, "angle": 0, "strokeColor": "#1e1e1e", "backgroundColor": "transparent", "fillStyle": "solid", "strokeWidth": 2, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "groupIds": [], "roundness": { "type": 3 }, "seed": 123456789, "version": 1, "isDeleted": false, "boundElements": null, "updated": 1, "link": null, "locked": false } Important: Use "boundElements": null (not []) Use "updated": 1 (not timestamps) Do NOT include frameId, index, versionNonce, or rawText ### Text Element (additional fields) { "type": "text", "text": "Label Text", "fontSize": 20, "fontFamily": 5, "textAlign": "center", "verticalAlign": "middle", "containerId": null, "originalText": "Label Text", "autoResize": true, "lineHeight": 1.25 } ### Arrow Element (additional fields) { "type": "arrow", "points": [[0, 0], [200, 0]], "startBinding": null, "endBinding": null, "startArrowhead": null, "endArrowhead": "arrow", "elbowed": false } For arrows connecting shapes, use startBinding and endBinding: { "startBinding": { "elementId": "shape-id-1", "focus": 0, "gap": 1, "fixedPoint": null }, "endBinding": { "elementId": "shape-id-2", "focus": 0, "gap": 1, "fixedPoint": null } } Add the arrow to each shape's boundElements: { "boundElements": [ { "id": "arrow-id", "type": "arrow" } ] } ### Text Centering Calculation Text elements use left-edge x coordinate. To center text: estimatedWidth = text.length * fontSize * 0.5 (use * 1.0 for CJK characters) x = centerX - estimatedWidth / 2 Example: Text "Hello" (5 chars, 20px) centered at x=300: estimatedWidth = 5 * 20 * 0.5 = 50 x = 300 - 25 = 275 ### Architecture Diagram Rectangles for services/components Color-code by layer (frontend=blue, middleware=purple, backend=green) Arrows for data flow Group related components visually ### Flowchart Rectangles for process steps Diamonds for decision points Arrows showing flow direction Top-to-bottom or left-to-right layout ### Mind Map Central topic in middle Branches radiating outward Use consistent colors per branch Sub-branches connect to main branches ### File Naming Suggest descriptive filenames based on content, but always confirm with the user before saving: ModeFormatExampleObsidian[topic].[type].mdsystem-architecture.diagram.mdStandard[topic].[type].excalidrawsystem-architecture.diagram.excalidraw Before writing any file: Confirm the full save path and filename with the user If a file already exists at that path, warn the user and ask before overwriting Never write files silently or to assumed default paths ### Example User Messages "Create an Excalidraw diagram of our microservices architecture" "Draw a flowchart showing the CI/CD pipeline" "Make a mind map of machine learning concepts" "Generate a standard excalidraw file for this workflow" (forces .excalidraw output) ### Implementation Checklist When generating a diagram: Confirm output mode with user (Obsidian or Standard) Analyze content and select diagram type Plan layout (positions, connections, groupings) Generate elements with: Unique IDs for each element "fontFamily": 5 for all text Proper colors from palette Correct bindings for arrows and labels Validate JSON is syntactically correct Wrap in appropriate output format Confirm save path and filename with user Check for existing file at target path (warn if exists) Save only after user confirmation Report file path and usage instructions to user ## Trust - Source: tencent - Verification: Indexed source record - Publisher: Ricardodpalmeida - Version: 1.0.2 ## Source health - Status: healthy - Source download looks usable. - Yavira can redirect you to the upstream package for this source. - Health scope: source - Reason: direct_download_ok - Checked at: 2026-04-23T16:43:11.935Z - Expires at: 2026-04-30T16:43:11.935Z - Recommended action: Download for OpenClaw ## Links - [Detail page](https://openagent3.xyz/skills/excalidraw-diagrams) - [Send to Agent page](https://openagent3.xyz/skills/excalidraw-diagrams/agent) - [JSON manifest](https://openagent3.xyz/skills/excalidraw-diagrams/agent.json) - [Markdown brief](https://openagent3.xyz/skills/excalidraw-diagrams/agent.md) - [Download page](https://openagent3.xyz/downloads/excalidraw-diagrams)