archify
Archify generates technical diagrams as self-contained HTML files with SVG graphics. It supports architecture, workflow, sequence, data-flow, and lifecycle diagrams. The skill provides a theme toggle, export options, and a CSS-variable color system for consistent dark and light modes.
Is archify safe to install?
Review the source first: our audit of archify's source files found 6 shell commands, 0 external URLs, file reads and writes (high risk). Every command and URL listed appears verbatim in the skill's source. The skill executes shell commands to run diagram renderers and reads/writes local JSON and HTML files.
How we audit skills: our security review methodology.
Who is this skill for?
Software engineers, system architects, and technical writers who need to create professional, exportable technical diagrams.
What can you do with it?
- Visualizing system architecture and cloud infrastructure
- Mapping technical workflows and CI/CD pipelines
- Documenting API call sequences and request lifecycles
- Creating data lineage and ETL/ELT pipeline diagrams
- Modeling state machines and status transitions
- Converting Mermaid diagrams into styled, consistent visualizations
How good is this skill?
Quality score: 5/10. The skill provides clear, structured instructions for multiple diagram types and includes a robust design system. The reliance on local Node.js renderers ensures consistent output quality.
What does the skill file contain?
# Archify Skill Create professional technical diagrams as self-contained HTML files with inline SVG, a theme toggle, and a built-in image/SVG export menu. Every diagram ships with a **dark/light theme toggle** (persists in `localStorage`, respects `prefers-color-scheme`), an **export menu** (copy PNG to clipboard; download PNG/JPEG/WebP rasterized natively at up to 4× resolution; download a **dual-theme SVG** that follows the embedding host's `prefers-color-scheme` — ideal for GitHub READMEs), and a **CSS-variable color system** that keeps both themes consistent. ## Setup (one-time, rendere...
Frequently asked questions
How do I ensure my diagrams support both dark and light themes?
Use the provided CSS class system (e.g., c-mask, c-backend, t-primary) instead of hardcoded inline colors. The theme toggle switches CSS custom properties, which only update if you use these classes.
What happens if I do not have shell access to run the renderers?
You must fall back to architecture mode by manually placing SVG elements into assets/template.html while following the defined Design System and self-review checklist.
Can I use Mermaid code directly?
Yes, but do not render it mechanically. Read the Mermaid code for structure and lay out the diagram from scratch using the appropriate Archify mode.
How do I validate my diagram JSON?
The renderers use ajv to validate JSON against schemas located in the schemas/ folder. If validation fails, the renderer exits with a path-prefixed error message.
Related skills
product-marketing
17.6KProduct managers, marketers, and founders who want to centralize their product positioning and audience information for AI-assisted marketing tasks
This skill creates and maintains a product marketing context document at .agents/product-marketing.md. It helps users define product positioning, target audiences, and messaging to ensure consistency across other marketing tasks.
meeting-minutes
9.2KTeams and individuals who need to document internal syncs, standups, design reviews, and planning meetings efficiently
The meeting-minutes skill generates structured, actionable meeting minutes from transcripts, recordings, or raw notes for internal meetings lasting 60 minutes or less. It enforces a strict schema that captures metadata, attendance, decisions, and action items with owners and due dates.
email-best-practices
3.0KDevelopers building email functionality into applications who need guidance on authentication, compliance, and sending reliability
This skill provides architectural guidance and best practices for implementing email features, including deliverability, compliance, accessibility, and reliability.
mermaid-to-image
1.2KDevelopers and technical writers who need to render Mermaid diagrams as static images for platforms that lack native Mermaid support
The mermaid-to-image skill converts Mermaid code blocks within text files into PNG images using the mermaid.ink API and updates the files with Markdown image references.