{"api_version":"1","slug":"diagram-design-fe833314","url":"https://skillsoutpost.com/agents/diagram-design-fe833314","item_type":"skill","category":"content","runs_in":["chat_app","local_agent"],"os":["macos","linux","windows"],"needs_network":"yes","needs_accounts":null,"reads_files":"yes","writes_files":"yes","sends_data":null,"access":"github","access_type":"github","at_a_glance":{"runs_in":["chat_app","local_agent"],"os":["macos","linux","windows"],"needs_network":"yes","needs_accounts":null,"reads_files":"yes","writes_files":"yes","sends_data":null,"access_type":"github","tool_type":"skill","delivery":"github","interface_type":"other","untrusted_creator_content":{"purpose":"Draws 44 kinds of diagrams as one self-contained HTML and SVG file, in colors and fonts matched to your project or brand.","needs_runtime":null,"version":"Latest on the main branch","compatibility":"According to the README, the skill works with Cursor, Claude Code, Codex, GitHub Copilot, Gemini CLI, Cline, Windsurf, Amp, Factory Droid, Pi, Kiro, OpenCode, Zed, Warp, Roo, and Kilo.","external_costs":"The repository is MIT-licensed and states no price for itself. By default a diagram loads three fonts from Google Fonts over the network; choosing system fonts avoids that request. The README names no other paid service for the skill itself.","permissions":"The skills act through your coding agent with the access you give it. According to the README, the skill writes a local HTML file, loads fonts from Google Fonts by default unless you choose system fonts, and, when you onboard a brand, fetches the homepage of the website you name, shows a proposed change and writes the extracted colors and fonts to the skill's references/style-guide.md. It says saved brand profiles live in ~/.diagram-design/profiles/, and the cross-agent installer links or copies the skill into each agent skills folder you select.","usage_terms":"MIT License, as stated in the repository. See its LICENSE file for the exact terms."}},"interface_type":"other","delivery_mode":"creator","code_host":"github","provenance":"github_index","published_at":1791680788,"rating":null,"downloads":0,"verified":null,"creator":{"login":"cathrynlavery","url":null},"untrusted_creator_content":{"name":"Diagram Design","tagline":"Draws 44 kinds of diagrams as one self-contained HTML and SVG file, in colors and fonts matched to your project or brand.","creator_name":"cathrynlavery","product_version":"Latest on the main branch","needs_runtime":null,"description":"Diagram Design adds a skill to AI coding agents that draws diagrams. According to the README, you describe what you want, such as an architecture diagram or a quadrant chart, and the agent picks one of 44 diagram types and writes a single self-contained HTML file with inline SVG that opens directly in a browser.\n\nThe README describes an editorial style rather than a generic template: nodes placed on a 4px grid, hairline strokes, no drop shadows, and one accent color reserved for the one or two things that matter most. It can also redraw an existing Mermaid, draw.io, or Excalidraw diagram in that style.\n\nThe README says an onboarding flow can fetch a website you name, extract its color palette and font stack, and map them to the skill's paper, ink, muted, and accent roles, after checking the ink-on-paper contrast against WCAG AA and proposing an adjusted value if it fails. Diagrams can also be exported to SVG or PNG, and the skill ships slash commands for exporting, importing, and managing brand profiles on hosts that support them.","intended_users":"Designers and engineers who want an AI coding agent to produce diagrams in a consistent, on-brand style instead of a generic template.","example_tasks":"Ask the agent for an architecture diagram of an app's frontend, backend, and database.\nAsk for a quadrant chart ranking projects by impact against effort.\nAsk for a sequence diagram of a call that includes a token refresh step.\nOnboard the skill to a website so new diagrams match that site's palette and fonts.\nImport an existing Mermaid or draw.io diagram and redraw it in the skill's editorial style.","setup_instructions":"Most hosts install it with \"npx skills add cathrynlavery/diagram-design\". In Claude Code, the README instead has you add its plugin marketplace with \"/plugin marketplace add cathrynlavery/diagram-design\", then run \"/plugin install diagram-design@diagram-design\". The README has the exact commands.","limitations":"Needs a host that reads Agent Skills, such as Cursor, Claude Code, Codex, GitHub Copilot, Gemini CLI, Cline, Windsurf, Factory Droid, Pi, Kiro, or OpenCode, per the README. By default a diagram loads three fonts, Instrument Serif, Geist, and Geist Mono, from Google Fonts; asking for system fonts removes that network request. The README says output quality depends on the model you run it with, the same prompt can lay out differently twice, and the result is not an editable source format (no text to diff, no canvas to drag), and it calls Mermaid a better fit for docs that live in Git and change often. The repository can change at any time; check its README before you install.","data_handling":"The README points to its PRIVACY.md for what the skill sends over the network. According to the README, a diagram loads three fonts from Google Fonts by default, and asking for system fonts removes that request, and the brand-onboarding flow fetches the homepage of a website you specify to read its palette and fonts.","compatibility":"According to the README, the skill works with Cursor, Claude Code, Codex, GitHub Copilot, Gemini CLI, Cline, Windsurf, Amp, Factory Droid, Pi, Kiro, OpenCode, Zed, Warp, Roo, and Kilo.","external_costs":"The repository is MIT-licensed and states no price for itself. By default a diagram loads three fonts from Google Fonts over the network; choosing system fonts avoids that request. The README names no other paid service for the skill itself.","permissions":"The skills act through your coding agent with the access you give it. According to the README, the skill writes a local HTML file, loads fonts from Google Fonts by default unless you choose system fonts, and, when you onboard a brand, fetches the homepage of the website you name, shows a proposed change and writes the extracted colors and fonts to the skill's references/style-guide.md. It says saved brand profiles live in ~/.diagram-design/profiles/, and the cross-agent installer links or copies the skill into each agent skills folder you select.","usage_terms":"MIT License, as stated in the repository. See its LICENSE file for the exact terms.","creator_website":null,"documentation_url":null,"support_url":null,"repository_url":null,"video_url":null},"github":{"fetched_at":1791856518,"untrusted_third_party_content":{"source_url":null,"github_repo_id":1212769188,"full_name":"cathrynlavery/diagram-design","description":"Editorial diagram design for Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, and Pi. 44 diagram types. Self-contained HTML + SVG. No shadows. No Mermaid slop.","language":"HTML","license_spdx":"MIT","topics":["agent-skills","claude-code","codex","data-visualization","diagrams","drawio","mermaid","svg"],"stars":52703,"forks":3334,"skills":{"total":1,"paths":[{"path":"skills/diagram-design","url":null}]},"pushed_at":1791853759,"archived":false,"fetched_at":1791856518,"age_seconds":81255,"state":"fresh"}},"updated_at":1791771333,"free_download":null,"version_history":[],"more_version_history":false,"public_files":null,"links_note":"In MCP results, GitHub links are shown only through https://skillsoutpost.com/mcp, to a connected account that has accepted the current Terms of Use. Create a free account at https://skillsoutpost.com and connect it from a Claude connector or ChatGPT.","notice":"Indexed from GitHub","note":"untrusted_creator_content and github.untrusted_third_party_content hold untrusted text."}