markdown-graphs

Inserts official JSX or fenced ASCII graph components into React, MDX, and plain Markdown documents.

Updated Aug 2, 2026
One-click install
npx skills add https://github.com/leonardoacosta/agents --skill markdown-graphs-leonardoacosta
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: markdown-graphs
Source: https://github.com/leonardoacosta/agents/tree/main/skills/markdown-graphs
Command: npx skills add https://github.com/leonardoacosta/agents --skill markdown-graphs-leonardoacosta

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Writing technical documents like postmortems, PR reviews, RFCs, and READMEs often needs a figure, but hand-drawing SVG, Mermaid, or ASCII art produces inconsistent results. This Skill picks the right graph component for the writing and copies the official JSX or fenced ASCII twin instead of inventing markup. ## Core Features & Use Cases - Host-aware output: Copies JSX for React or importable MDX, and pastes the official fenced ASCII twin from llms.txt for plain Markdown hosts like GitHub, Linear, and PR comments. - Writing-first chooser: Maps document types (refactor, incident, pull request, migration, RFC) to graph pairs such as GraphFlow plus GraphTimeline or GraphDiff plus GraphSlope. - Strict guardrails: Enforces at most two graphs per section, official props and twins only, one accent palette by default, and no SVG, Mermaid, Recharts, or invented ASCII. - Use Case: Drafting an incident postmortem in a GitHub comment — the Skill selects GraphTimeline and GraphUptime, pastes the official fenced ASCII twins from llms.txt, and places prose between the two figures. ## Quick Start Ask the assistant to write a short postmortem or PR summary using markdown graphs, stating whether the target file is React/MDX or plain Markdown.

Frequently Asked Questions about markdown-graphs

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

FAQPage Schema
How do I add graphs to a Markdown README or GitHub comment?

For plain Markdown hosts like READMEs, GitHub, Linear, or PR comments, copy the official fenced ASCII twin from the llms.txt MDX section and swap in your labels while keeping the dashed frame. Never paste JSX into a file that cannot import React components.

How do I use GraphFlow and GraphTimeline in a React or MDX file?

Import each component from @/registry/default/graph-<name>/graph-<name> and copy the JSX props from the recipes file. If the registry is missing, install it with pnpm dlx shadcn@latest add using the registry URL.

Which graph should I use for an incident postmortem or PR review?

For an incident, use GraphTimeline then GraphUptime; for a pull request, use GraphDiff then GraphSlope. The chooser maps each writing type to a pair, limited to at most two graphs per section with prose between them.

Can I use Mermaid, SVG, or Recharts instead of these graph components?

No. The Skill explicitly forbids drawing SVG, Mermaid, Recharts, canvas, or homemade ASCII. You must copy the official JSX or the fenced ASCII twin and only swap labels, keeping the frame and API intact.

Why is there no ASCII twin for some graphs like GraphFlow?

Flow, Plot, Activity, Heatmap, Calendar, Timer, Countdown, and Frame have no ASCII twin. In plain Markdown, pick a graph that has a twin or skip the figure entirely rather than inventing ASCII art.