svg-architecture-diagramCreate professional, publication-quality technical architecture diagrams using pure SVG in HTML, then screenshot via Playwright. Produces crisp, pixel-perfec...
Install via ClawdBot CLI:
clawdbot install wujiaming88/svg-architecture-diagramGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swapUses known external API (expected, informational)
googleapis.comAudited Apr 26, 2026 · audit v1.0
Generated May 13, 2026
Engineering teams documenting system architecture for internal or external stakeholders. This skill produces crisp, text-accurate diagrams ideal for technical documentation, replacing hand-drawn or low-fidelity diagrams.
Cloud architects designing multi-service architectures on AWS, Azure, or GCP. SVG ensures precise alignment of VPCs, subnets, and service connections, with color-coded modules for clarity.
Data engineers mapping ETL/ELT flows from sources to storage to analytics. The skill supports dashed feedback lines and clear text labels for complex data movement, overcoming AI image generation limitations.
Consultants and solutions architects creating diagrams for client proposals or whitepapers. The high-resolution output ensures professional quality in PDFs and presentations.
Developers illustrating inter-service communication, API gateways, and event streams. SVG's perfect connector lines and arrow markers accurately depict complex service dependencies.
Offer the basic SVG templates and Playwright screenshot script for free, but charge for a library of pre-built diagram templates, custom color themes, or advanced automation scripts.
Host a web application where users describe their architecture in natural language, and the backend generates the SVG HTML and returns a rendered PNG/PDF. Charge per diagram or monthly subscription.
Package the skill as a plugin for documentation generators (e.g., Docusaurus, MkDocs) or CI/CD pipelines to auto-generate and update architecture diagrams from code or infrastructure-as-code files.
💬 Integration Tip
Use the bundled Playwright script to automate screenshotting, and integrate into CI/CD to regenerate diagrams on documentation builds. Pre-define a design system and templates to ensure consistency across projects.
Scored May 13, 2026
Guides solo founders through validating startup ideas, architecting product design, and defining visual systems with structured design documents as output.
Convert natural language to UML diagrams, export editable PPT/EMF with individually editable shapes in PowerPoint.
Build editable cloud architecture diagrams (Azure/Microsoft, AWS, GCP, Microsoft Fabric) using official vendor icons, output as both .excalidraw and .drawio...
Professional brand identity designer for SVG logos, icons, brandmarks, and complete visual identity systems. Use when the user asks for logos, icons, app ico...
Colorpedia namespace for Netsnek e.U. color science and design toolkit. Offers color palette generation, accessibility contrast checking, format conversion,...
Hand-drawn Excalidraw JSON diagrams — architecture, flow, sequence. Generate clean, well-laid-out charts with consistent box sizing, meaningful colors, and z...