[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-74104":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":9,"rankLanguage":9,"license":9,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":9,"pushedAt":9,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":15,"starSnapshotCount":15,"syncStatus":28,"lastSyncTime":29,"discoverSource":30},74104,"excalidraw-diagram-skill","coleam00\u002Fexcalidraw-diagram-skill","coleam00","Skill to give Claude Code (and any coding agent) the ability to generate beautiful and practical Excalidraw diagrams.",null,"Python",3621,441,25,9,0,141,238,591,423,29.94,false,"main",true,[],"2026-06-12 02:03:22","# Excalidraw Diagram Skill\n\nA coding agent skill that generates beautiful and practical Excalidraw diagrams from natural language descriptions. Not just boxes-and-arrows - diagrams that **argue visually**.\n\nCompatible with any coding agent that supports skills. For agents that read from `.claude\u002Fskills\u002F` (like [Claude Code](https:\u002F\u002Fdocs.anthropic.com\u002Fen\u002Fdocs\u002Fclaude-code) and [OpenCode](https:\u002F\u002Fgithub.com\u002Fnicepkg\u002FOpenCode)), just drop it in and go.\n\n## What Makes This Different\n\n- **Diagrams that argue, not display.** Every shape\u002Fgroup of shapes mirrors the concept it represents — fan-outs for one-to-many, timelines for sequences, convergence for aggregation. No uniform card grids.\n- **Evidence artifacts.** As an example, technical diagrams include real code snippets and actual JSON payloads.\n- **Built-in visual validation.** A Playwright-based render pipeline lets the agent see its own output, catch layout issues (overlapping text, misaligned arrows, unbalanced spacing), and fix them in a loop before delivering.\n- **Brand-customizable.** All colors and brand styles live in a single file (`references\u002Fcolor-palette.md`). Swap it out and every diagram follows your palette.\n\n## Installation\n\nClone or download this repo, then copy it into your project's `.claude\u002Fskills\u002F` directory:\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fcoleam00\u002Fexcalidraw-diagram-skill.git\ncp -r excalidraw-diagram-skill .claude\u002Fskills\u002Fexcalidraw-diagram\n```\n\n## Setup\n\nThe skill includes a render pipeline that lets the agent visually validate its diagrams. There are two ways to set it up:\n\n**Option A: Ask your coding agent (easiest)**\n\nJust tell your agent: *\"Set up the Excalidraw diagram skill renderer by following the instructions in SKILL.md.\"* It will run the commands for you.\n\n**Option B: Manual**\n\n```bash\ncd .claude\u002Fskills\u002Fexcalidraw-diagram\u002Freferences\nuv sync\nuv run playwright install chromium\n```\n\n## Usage\n\nAsk your coding agent to create a diagram:\n\n> \"Create an Excalidraw diagram showing how the AG-UI protocol streams events from an AI agent to a frontend UI\"\n\nThe skill handles the rest — concept mapping, layout, JSON generation, rendering, and visual validation.\n\n## Customize Colors\n\nEdit `references\u002Fcolor-palette.md` to match your brand. Everything else in the skill is universal design methodology.\n\n## File Structure\n\n```\nexcalidraw-diagram\u002F\n  SKILL.md                          # Design methodology + workflow\n  references\u002F\n    color-palette.md                # Brand colors (edit this to customize)\n    element-templates.md            # JSON templates for each element type\n    json-schema.md                  # Excalidraw JSON format reference\n    render_excalidraw.py            # Render .excalidraw to PNG\n    render_template.html            # Browser template for rendering\n    pyproject.toml                  # Python dependencies (playwright)\n```\n","该项目旨在为Claude Code等编码代理提供生成美观且实用的Excalidraw图表的能力。其核心功能包括通过自然语言描述自动生成图表，支持概念映射、布局优化及JSON生成，并内置基于Playwright的渲染管线以实现视觉验证与自动修正布局问题。此外，用户可以轻松定制颜色方案以符合品牌需求。适用于需要快速创建复杂系统架构图、流程图或任何强调视觉表达逻辑关系的场景中，特别适合软件开发、项目管理和技术文档编写等领域。",2,"2026-06-11 03:48:49","high_star"]