skills.rest
taewook486
taewook486COMMUNITY
Explore all skills by this author →
WebsiteGitHub

moai-domain-svg-infographic

Authors editable SVG technical infographics via computed layout and renders verified 2x PNGs with headless Chromium.

Updated Mar 22, 2026
Search Tags:#png#layout#svg#diagram#infographic#chromium#cjk
One-click install
npx skills add https://github.com/taewook486/Masters_degree --skill moai-domain-svg-infographic-taewook486
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-domain-svg-infographic
Source: https://github.com/taewook486/Masters_degree/tree/main/.claude/skills/moai-domain-svg-infographic
Command: npx skills add https://github.com/taewook486/Masters_degree --skill moai-domain-svg-infographic-taewook486

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Hand-drawn SVG diagrams drift out of alignment, overflow their containers, and break when labels change language. This Skill replaces eyeballing with a numeric layout pass: every coordinate is computed from a box table before any markup is written, then the source is linted and rendered to a verified 2x PNG. ## Core Features & Use Cases - Numeric layout pass: Build a box table with grid, containment, and derived-geometry formulas so every coordinate traces to arithmetic, with four archetypes (architecture stack, left-to-right flow, side-by-side comparison, hierarchy tree). - CJK-first text budgeting: Capacity formulas (Latin ~0.60em, CJK 1.00em per glyph) ensure Korean, Japanese, and Chinese labels fit their boxes before authoring. - Deterministic lint and verified render: check-svg.mjs reports file:line:column errors and heuristic warnings; render.mjs renders via headless Chromium, discloses the browser executable and version, and verifies PNG IHDR dimensions against the 2x target. - Use Case: Produce a slide-ready architecture diagram with Korean labels: compute the layout table, author the SVG, lint it, and render a dimension-verified PNG. ## Quick Start Ask the assistant to create an SVG architecture infographic of your system with Korean labels and render it as a 2x PNG.

Frequently Asked Questions about moai-domain-svg-infographic

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

FAQPage Schema
How do I create an SVG architecture diagram with precise layout?▼

Build a box table first with id, x, y, w, h per element, derive all centers and connector endpoints from formulas, then author the SVG from the table. Run check-svg.mjs to lint the source and render.mjs to produce a verified 2x PNG.

When should I use SVG instead of mermaid for diagrams?▼

Use SVG when the deliverable is an image file for slides, email, or offline use, when pixel-level control is required, or when CJK labels must wrap at exact widths. Markdown-embedded, frequently changing standard diagrams stay as mermaid.

How do I fit Korean or Japanese text in SVG boxes?▼

Budget CJK lines at 1.00em per glyph versus 0.60em for Latin, so a CJK line holds roughly 60% of the Latin character count. Rewrite labels to fit the computed capacity rather than truncating text or shrinking the font for one language.

Does the SVG renderer work without a browser installed?▼

No. render.mjs requires a Chromium-family browser found via CHROME_PATH, well-known install locations, or PATH. Without one it exits with code 2, and you deliver the editable SVG alone while stating that no PNG was produced.

Why do my SVG arrowheads render at different sizes?▼

The marker is missing an explicit markerUnits attribute, so the strokeWidth default rescales arrowheads with line width. Declare markerUnits="userSpaceOnUse" with markerWidth, markerHeight, refX, and refY; check-svg.mjs flags this as error SVG021.

What are the limitations of the SVG lint script?▼

Structural checks like unbalanced tags, duplicate ids, and unresolved references are deterministic errors, but text-overflow and viewBox-overflow findings are heuristic warnings based on character-advance estimation. Confirm each warning against the rendered PNG before reflowing the layout.

Related Skills

Explore More Design & Creative Skills→
ahostbrahostbr
12

obsidian-canvas-creator

Convert text into Obsidian Canvas JSON with MindMap or Freeform layouts.

Community
Advanced
decocmsdecocms
396

slides

Generate editable HTML slide decks from JSON data with live preview.

Official
Advanced
aiyinluyaaiyinluya
2

sn-md-to-html-report

Convert Markdown research files into standalone HTML reports with table of contents.

Community
Intermediate
aniryouaniryou

mermaid-check

Fix Mermaid diagrams that fail to parse on GitHub and Azure DevOps.

Community
Advanced