skills.rest
heximao
heximaoCOMMUNITY
Explore all skills by this author →
GitHub

diagramming

Create JSON Excalidraw diagrams, SVG/HTML architecture layouts, and ASCII art.

Updated May 11, 2026
Search Tags:#architecture#data visualization#HTML#diagramming#SVG#ASCII art#Excalidraw
One-click install
npx skills add https://github.com/heximao/agents --skill diagramming-heximao
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagramming
Source: https://github.com/heximao/agents/tree/main/skill-archive/docker-hermes/creative/diagramming
Command: npx skills add https://github.com/heximao/agents --skill diagramming-heximao

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and templates (resource) components.

What problem does it solve?

This Skill provides an intuitive way to generate diagrams, architecture layouts, and ASCII art, reducing the need for manual drawing and design work.

Core Features & Use Cases

  • Excalidraw: Create hand-drawn style diagrams in JSON format for easy editing on excalidraw.com.
  • Architecture Diagrams: Generate professional, dark-themed tech infrastructure diagrams with SVG/HTML output.
  • ASCII Art: Rapidly produce terminal-friendly diagrams for quick reference and documentation.
  • Use Case: Imagine you need to visualize a network architecture for a new project. Use this Skill to quickly create an SVG diagram that you can share with your team.

Quick Start

Generate an Excalidraw diagram using the following command: write_file diagrams/excalidraw.json

Frequently Asked Questions about diagramming

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate Excalidraw diagrams without manual drawing?▼

Generate Excalidraw diagrams by writing JSON files that the Skill structures for you. This allows you to create hand-drawn style diagrams effortlessly and edit them directly on excalidraw.com.

Can I create SVG architecture diagrams for tech documentation automatically?▼

Yes, you can create professional SVG architecture diagrams automatically. The Skill generates dark-themed tech infrastructure diagrams using SVG and HTML output, which is useful for network architecture visualization and project planning.

What is the best way to produce ASCII art for terminal-friendly documentation?▼

The best way to produce ASCII art is by using this Skill to rapidly generate terminal-friendly diagrams. It handles the formatting automatically, providing quick reference visuals suitable for technical documentation.

Do I need graphic design tools to create infrastructure layouts?▼

No, you do not need manual drawing or graphic design tools to create infrastructure layouts. The Skill provides an interface that handles JSON-based Excalidraw diagrams, SVG outputs, and ASCII art generation.

Does this diagramming Skill work with JSON formats for easy editing?▼

Yes, the diagramming Skill works with JSON formats specifically for Excalidraw diagrams. You can generate the JSON output and import it into excalidraw.com for easy editing and further customization.

Related Skills

Explore More Software Engineering Skills→
lucasFR2lucasFR2

baoyu-diagram

Generate SVG diagrams from user input via Python script execution.

Community
Advanced
webdevtodayjasonwebdevtodayjason

excalidraw

Convert JSON files with Excalidraw elements into editable diagrams.

Community
Basic
KrystianYCSilvaKrystianYCSilva

markdown-expert

Create Markdown documentation with Mermaid diagrams and GFM tables.

Community
Intermediate
ZiadNagarZiadNagar

ui-designer

Apply visual design systems to produce UI guidelines and design tokens.

Community
Advanced