How do I install the Diagram Render skill?

Run npx skillmds@latest add lftpadilla/diagram-render in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Diagram Render safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Diagram Render?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Diagram Render free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Diagram Render?

LFTPadilla (@lftpadilla) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Diagram Render by lftpadilla — Agent Skill

Name: Diagram Render
Author: LFTPadilla

Diagram Render

Renders network diagrams, flowcharts, and infrastructure diagrams as PNG images using SVG generation and sharp. Use when the agent needs to output a network diagram, system architecture, flowchart, or infrastructure map as a viewable image. Triggers on: "make a diagram", "render this network", "show infrastructure as image", "draw topology", "create flowchart", "generate diagram".

LFTPadilla 8dfe073 3 files · 7.8 KB Updated Sep 17, 2026

File contents

Diagram Render 🔧

Renders network diagrams, flowcharts, and infrastructure visualizations as PNG images using SVG + sharp.

Location

The render script lives in the same skill folder as this SKILL.md:

<skill_folder>/
├── SKILL.md
└── scripts/
    └── diagram-render.js

When to Use

User asks to "make a diagram", "render this network", "show infrastructure as image"
System architecture, network topology, or flowchart needs to be visualized
Infrastructure documentation that would look better as an image than ASCII art

How It Works

The script takes two arguments:

--nodes — newline-separated node definitions: ID|LABEL|TYPE|COL|ROW
--conns — newline-separated connections: FROM|TO|LABEL|COLOR
--title — diagram title

Node types: lan, cloud, cluster, server, vm, pbs, tailscale Colors: hex color like #E74C3C for red, #27AE60 for green, etc.

Example

node <skill_folder>/scripts/diagram-render.js \
  --nodes 'LAN|Local Network|lan|0|0
host-a|Server A|server|1|0
host-b|Server B|server|2|0
store|Backup Store|pbs|3|0
worker-1|VM Worker-1|vm|1|1
worker-2|VM Worker-2|vm|1|2' \
  --conns 'LAN|host-a|SSH|#E74C3C
LAN|host-b|SSH|#E74C3C
host-a|host-b|Cluster LAN|#9B59B6
host-b|store|Backup|#E74C3C' \
  --title 'Example Cluster + Backup Store'

Output: JSON with svg and png paths.

Workflow

Parse the user's diagram request
Define nodes (servers, VMs, networks) and connections
Run the script → gets SVG + PNG paths
Send image via message tool: action=send, path=<png_path>
Plain text explanation after the image

---name: diagram-renderdescription: Renders network diagrams, flowcharts, and infrastructure diagrams as PNG images using SVG generation and sharp. Use when the agent needs to output a network diagram, system architecture, flowchart, or infrastructure map as a viewable image. Triggers on: "make a diagram", "render this network", "show infrastructure as image", "draw topology", "create flowchart", "generate diagram".---# Diagram Render 🔧Renders network diagrams, flowcharts, and infrastructure visualizations as PNG images using SVG + sharp.## LocationThe render script lives in the **same skill folder** as this SKILL.md:```<skill_folder>/├── SKILL.md└── scripts/ └── diagram-render.js```## When to Use- User asks to "make a diagram", "render this network", "show infrastructure as image"- System architecture, network topology, or flowchart needs to be visualized- Infrastructure documentation that would look better as an image than ASCII art## How It WorksThe script takes two arguments:- `--nodes` — newline-separated node definitions: `ID|LABEL|TYPE|COL|ROW`- `--conns` — newline-separated connections: `FROM|TO|LABEL|COLOR`- `--title` — diagram titleNode types: `lan`, `cloud`, `cluster`, `server`, `vm`, `pbs`, `tailscale`Colors: hex color like `#E74C3C` for red, `#27AE60` for green, etc.## Example```bashnode <skill_folder>/scripts/diagram-render.js \ --nodes 'LAN|Local Network|lan|0|0host-a|Server A|server|1|0host-b|Server B|server|2|0store|Backup Store|pbs|3|0worker-1|VM Worker-1|vm|1|1worker-2|VM Worker-2|vm|1|2' \ --conns 'LAN|host-a|SSH|#E74C3CLAN|host-b|SSH|#E74C3Chost-a|host-b|Cluster LAN|#9B59B6host-b|store|Backup|#E74C3C' \ --title 'Example Cluster + Backup Store'```Output: JSON with `svg` and `png` paths.## Workflow1. Parse the user's diagram request2. Define nodes (servers, VMs, networks) and connections3. Run the script → gets SVG + PNG paths4. Send image via message tool: `action=send, path=<png_path>`5. Plain text explanation after the image

Frequently asked questions