diagram-creator

Create self-contained HTML diagrams from Markdown, JSON, YAML, code, and config files.

Updated Dec 14, 2025
One-click install
npx skills add https://github.com/toobutta/maptelli --skill diagram-creator-toobutta
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram-creator
Source: https://github.com/toobutta/maptelli/tree/main/.claude/skills/diagram-creator
Command: npx skills add https://github.com/toobutta/maptelli --skill diagram-creator-toobutta

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagram creation is time-consuming and requires switching between tools to render visualizations from raw data or text. This Skill automates turning diverse inputs into polished diagrams as standalone HTML.

Core Features & Use Cases

  • Self-contained HTML output with pan-and-zoom canvas for easy exploration.
  • Input handling for Markdown, JSON/YAML, code, and plain text to generate diagrams.
  • Supports multiple layouts (nested, left-to-right, hub-and-spoke, timeline, grid, funnel, and more) for a variety of use cases.

Quick Start

Use a sample input file like architecture.md or data.json and request a diagram to generate a self-contained HTML diagram.

Frequently Asked Questions about diagram-creator

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

FAQPage Schema
How do I generate a standalone HTML diagram from a JSON file?▼

You can generate a standalone HTML diagram from a JSON file by providing the file as input, which produces a self-contained HTML visualization with built-in pan-and-zoom and no external dependencies.

What is the best way to visualize software architecture from Markdown or YAML?▼

Visualizing software architecture from Markdown or YAML involves passing the text or config files to generate a self-contained HTML diagram, supporting layouts like nested, hub-and-spoke, and timeline for clear presentation.

Can I create a shareable architecture diagram without external dependencies?▼

Yes, you can create a shareable architecture diagram without external dependencies since the output is a single self-contained HTML file featuring a built-in pan-and-zoom canvas for easy exploration.

Does the diagram generator work with code and config files as input?▼

Yes, the diagram generator works with code and config files as input, accepting diverse formats including Markdown, JSON, YAML, code, and plain text to produce production-ready HTML diagrams.

What diagram layouts are supported for visualizing data and specs?▼

Supported diagram layouts for visualizing data and specs include nested, left-to-right, hub-and-spoke, timeline, grid, and funnel, accommodating a variety of architectural and data visualization use cases.

Are there limitations to generating self-contained HTML diagrams from plain text?▼

A limitation of generating self-contained HTML diagrams from plain text is that the output is restricted to a single HTML file format, meaning you cannot export directly to other native image or vector formats.