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.