agentleFS
Sign inStart free
malinskibeniaminmalinskibeniamin/skills/excalidraw-diagram/SKILL.md

excalidraw-diagram

Skill4 starsChanged 13 days agoMITView on GitHub

Generate, refine, and export editable Excalidraw diagrams from prompts or Mermaid. Use for hand-drawn architecture, component anatomy, flows, and annotated technical illustrations.

51 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use mermaid-visualizer, obsidian-canvas-creator and 10 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • BCS1037Skill

    mermaid-visualizer

    Transform text content into professional Mermaid diagrams for presentations and documentation. Use when users ask to visualize concepts, create flowcharts, or make diagrams from text. Supports process flows, system architectures, comparisons, mindmaps, and more with built-in syntax error prevention.

    Also in 7 projects that use this

  • BCS1037Skill

    obsidian-canvas-creator

    Create Obsidian Canvas files from text content, supporting both MindMap and freeform layouts. Use this skill when users want to visualize content as an interactive canvas, create mind maps, or organize information spatially in Obsidian format.

    Also in 4 projects that use this

  • MicrosoftSkill

    rvap-brand

    Applies the RVAP (Real Value Acceleration Program) brand identity — colors, fonts, logo, and layout patterns — consistently to any GitHub Pages website. Use this skill whenever someone asks to brand, rebrand, apply RVAP/RVAS visual identity, make a site look RVAP, match the brand kit, or transform a GitHub Pages site's look and feel to match RVAP. Also trigger when the user shares an HTML/CSS/MkDocs site and says it should look consistent with other RVAP/RVAS materials, even if they don't explicitly say "brand".

    Also in 3 projects that use this

  • XIYBHKSkill

    huashu-design

    花叔Design（Huashu-Design）——用HTML做高保真原型、交互Demo、幻灯片、动画、设计变体探索+设计方向顾问+专家评审的一体化设计能力。HTML是工具不是媒介，根据任务embody不同专家（UX设计师/动画师/幻灯片设计师/原型师），避免web design tropes。触发词：做原型、设计Demo、交互原型、HTML演示、动画Demo、设计变体、hi-fi设计、UI mockup、prototype、设计探索、做个HTML页面、做个可视化、app原型、iOS原型、移动应用mockup、导出MP4、导出GIF、60fps视频、设计风格、设计方向、设计哲学、配色方案、视觉风格、推荐风格、选个风格、做个好看的、评审、好不好看、review this design。**主干能力**：Junior Designer工作流（先给假设+reasoning+placeholder再迭代）、反AI slop清单、React+Babel最佳实践、Tweaks变体切换、Speaker Notes演示、Starter Components（幻灯片外壳/变体画布/动画引擎/设备边框）、App原型专属守则（默认从Wikimedia/Met/Unsplash取真图、每台iPhone包AppPhone状态管理器可交互、交付前跑Playwright点击测试）、Playwright验证、HTML动画→MP4/GIF视频导出（25fps基础 + 60fps插帧 + palette优化GIF + 6首场景化BGM + 自动fade）。**需求模糊时的Fallback**：设计方向顾问模式——从5流派×20种设计哲学（Pentagram信息建筑/Field.io运动诗学/Kenya Hara东方极简/Sagmeister实验先锋等）推荐3个差异化方向，展示24个预制showcase（8场景×3风格），并行生成3个视觉Demo让用户选。**交付后可选**：专家级5维度评审（哲学一致性/视觉层级/细节执行/功能性/创新性各打10分+修复清单）。

    Also in 4 projects that use this

  • HK-hubSkill

    defuddle

    Extract clean markdown content from web pages using Defuddle CLI, removing clutter and navigation to save tokens. Use instead of WebFetch when the user provides a URL to read or analyze, for online documentation, articles, blog posts, or any standard web page.

    Also in 5 projects that use this

  • wangzhuofengSkill

    obsidian-bases

    Create and edit Obsidian Bases (.base files) with views, filters, formulas, and summaries. Use when working with .base files, creating database-like views of notes, or when the user mentions Bases, table views, card views, filters, or formulas in Obsidian.

    Also in 6 projects that use this

The file

We split this skill into the rules it gives an agent

5 rules. 0 are common, 3 are distinctive, and 2 are very specific to this project.

  • 0

    Common

    Most of the 45 edited versions we read keep these.

  • 3

    Distinctive

    This author's own choices. Worth a look.

  • 2

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Create editable native elements.

    line 6
  2. Very specific:

    After Mermaid, describe elements before export/correction.

    line 25
  3. Very specific:

    Verify non-empty native elements and visible labels.

    line 27
  4. Distinctive:

    Use SVG/imported brand assets for exact logos.

    line 35
  5. Distinctive:

    Stop only canvas servers you started.

    line 36

“Common” is measured: kept by at least 6 in 10 of the 45 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Create editable native elements. Read REFERENCE.md for scene format, canvas/SVG, and visual language; PR-WORKFLOW.md for backend PRs and maintained docs.

Local default

Author or update a native .excalidraw file, then render with the pinned official CLI:

EXCALIDRAW_NO_UPDATE_NOTIFIER=1 bunx @excalidraw/cli@0.2.0 render diagram.excalidraw --out diagram.png

Node 22+, installed Chrome/Chromium/Edge/Firefox; temporary browser profile, no account or API key. PNG only, no layout. Use bunx cache, not consumer dependencies; Mermaid, live editing, and SVG use the optional canvas reference.

Workflow

  1. Choose destination: disposable .context/excalidraw/<slug>/ or requested durable path. Never overwrite silently.
  2. Preserve source before replacement; on canvas use snapshot save <name> or export --out <file> before clear/replace.
  3. Choose authority: .mmd for Mermaid deliverables; .excalidraw after direct editing. Validate Mermaid in its target renderer.
  4. Mermaid owns standard flow/sequence/state/relationships; direct elements own exact placement, anatomy, logos, zones, and callouts.
  5. Give mutable elements stable IDs. Author native elements locally; canvas shorthand uses one mermaid, add, or apply for the first slice.
  6. After Mermaid, describe elements before export/correction. If screenshot renders but scene is empty, keep .mmd authoritative or rebuild direct; never claim an empty .excalidraw is editable.
  7. Render PNG, or canvas describe then screenshot -> view -> fix collisions, clipping, contrast, and crossed arrows. Repeat until clean.
  8. Verify non-empty native elements and visible labels; keep .excalidraw plus PNG or SVG together. Mermaid-only fallback stays .mmd plus render, not an editable Excalidraw claim.
  9. Report paths, mode, canonical source, accessible description, and manual browser work.

Safety

  • clear --yes, import --replace, and restoration are destructive; preserve first.
  • share uploads the scene; use only for a requested public link.
  • Excalidraw+ sync is opt-in; Git stays authoritative. Backend diagram failures are nonblocking; report missing evidence and continue delivery.
  • Use SVG/imported brand assets for exact logos; never approximate protected marks.
  • Stop only canvas servers you started.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free