mcpField
V
visualize

visualize

github.com/camachoProductivity296 installs
Repository

About visualize

A skill that identifies the shape of content and presents it in a suitable visualization, from Mermaid diagrams to tables or ASCII. It is intended for turning concepts, flows, comparisons, and structures into a format suited to the output surface.

Key features

  1. 01Infer content from arguments or context
  2. 02Choose a format by content shape
  3. 03Support Mermaid, tables, and ASCII
  4. 04Use surface-aware rendering rules
  5. 05Accept an explicit format override

Use cases

  1. 01Diagram an architecture or request flow
  2. 02Show lifecycle states or data relationships
  3. 03Compare options or display a hierarchy

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/camacho/ai-skills --skill visualize

After installing, type/visualizein Claude Code to confirm it loaded.

Bundled filesscripts/render-mermaid.ts

Details

From the project README

/visualize

Auto-detect content shape and render the appropriate visualization. Follows the active-selection rule from ai-workspace/rules/visualizations.md.

Usage

/visualize                              # visualize the last discussed concept
/visualize <topic or file>              # visualize specific content
/visualize --format mermaid <topic>     # force a specific format

Steps

  1. Identify content. From args, recent conversation context, or a file path. Determine what needs visualizing.

  2. Classify content shape. Use this decision table:

    Content shapeSignalFormat
    Graph with nodes + edgesarchitecture, dependencies, flow between componentsMermaid graph or flowchart
    Sequence / interactionrequest flow, API calls, multi-step protocolMermaid sequenceDiagram
    State transitionsmodes, lifecycle, status changesMermaid stateDiagram-v2
    Comparison (3+ items)options, tradeoffs, feature matrixMarkdown table
    Hierarchy / treefile structure, org chart, simple nestingASCII art
    Contrast (2 items)before/after, good/bad, do/don'tInline pairs
    Entity relationshipsdata model, schemaMermaid erDiagram

  3. Check render surface. Mermaid in committed .md files renders on iOS/web/GitHub/VS Code. In terminal chunks, Mermaid is literal text — use ASCII instead. When surface is unknown, default to ASCII.

  4. Render.

    • ASCII / table / inline pairs: output directly in the response.
    • Mermaid: output as a fenced mermaid code block in the response. If high-resolution PNG is needed: 
      node --import tsx "${SKILL_DIR}/scripts/render-mermaid.ts" --input <mermaid-file> --output <png-path> --width 2400 --height 1800
    • Format override: if user passed --format, use that format regardless of auto-detection.

  5. Present. Show the visualization. If Mermaid PNG was rendered, display the path.

Failure modes

ConditionBehavior
Content shape ambiguousAsk: "This could be a [X] or [Y] — which fits better?"
Mermaid syntax errorShow the error, offer to fix
mmdc not availableFall back to fenced Mermaid block (renders on GitHub/web)

Cross-tool notes

  • Codex / Cursor: run scripts/render-mermaid.ts directly for PNG rendering. Content-shape detection is agent reasoning, not script logic.

Comments

Markdown supported