AlexAI-MCP

Semantic SVG — Data skill for Claude Code

Data community

Natural language and grounded data compiled into beautiful, machine-addressable SVGs.

How to install Semantic SVG

This entry records only its repository, not the path inside it, so there is no exact command to give. Open AlexAI-MCP/semantic-svg and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Semantic SVG does

Natural language and grounded data compiled into beautiful, machine-addressable SVGs.

Alternatives in Data

Archify — Agent skill for beautiful, verifiable architecture, workflow, sequence, data-flow, and lifecycle diagrams—self 17.2k ★
SQL Queries — Generate SQL queries from natural language across major dialects 7.8k ★
Book Translation Skill — You are a book translation assistant 489 ★

README

Semantic SVG

Turn natural-language intent and grounded data into SVGs that are beautiful to people and addressable by machines.

Semantic SVG is an open-source LLM skill plus deterministic compiler. The LLM directs the story and visual grammar; the compiler owns coordinates, XML, stable IDs, provenance, and verification. The finished file can be read as a poster, inspected as structured data, and enlarged without losing detail.

![Semantic SVG Image Intelligence autoplay showcase](./docs/assets/semantic-svg-canva-showcase.gif)

*The five-second showcase plays automatically and loops directly in this README.*

The example above contains **504 visible detail rows**, **2,520 atomic fields**, and **2,648 text elements** in one black-and-orange SVG. Small type is intentional: it stays non-overlapping and becomes fully readable when the vector is enlarged.

Watch The Demo

**[Open the 35-second workflow video](./docs/assets/semantic-svg-demo.mp4)**

The autoplay preview gives the first read immediately. The longer recording shows the real artifact at multiple zoom levels: a human can scan the whole composition, then inspect individual labels, types, sources, and machine-addressable IDs.

Why It Exists

Raw LLM-generated SVG tends to produce fragile XML, invented labels, drifting coordinates, and text collisions. Semantic SVG separates creative judgment from deterministic execution:

natural-language brief + grounded data
                  ↓
        story and visual grammar
                  ↓
     ArtifactSpec or detail inventory
                  ↓
       deterministic SVG compiler
                  ↓
 semantic QA + browser render + zoom review
                  ↓
          finished semantic SVG

Every meaningful object can carry `id`, `data-node-id`, `data-edge-id`, `data-source-ref`, coordinates, relation types, and embedded JSON metadata. The picture remains a real picture; the data remains queryable.