Exécutez n'importe quel Skill dans Manus
en un clic

Exécutez n'importe quel Skill dans Manus en un clic

diagram-build-validate

Étoiles2

Forks0

Mis à jour13 juin 2026 à 13:30

Build and validate diagram-generator outputs. Use when changing renderers, shared primitives, deliverable SVGs, draw.io exports, compare pages, or any diagram slug that needs rebuild, sanitization, and focused output checks.

Installation

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

canonical

canonical/diagram-generator

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

Développeurs de logicielsProfessions informatiques et mathématiques·SOC 15-1252

SKILL.md

readonly

name	diagram-build-validate
description	Build and validate diagram-generator outputs. Use when changing renderers, shared primitives, deliverable SVGs, draw.io exports, compare pages, or any diagram slug that needs rebuild, sanitization, and focused output checks.
argument-hint	Describe which diagram slugs or files changed

Diagram build and validate

When to use

Frame loader, layout engine, render, or preview code changed.
A frame YAML in scripts/diagrams/frames/ changed.
A new frame YAML was added.
A deliverable SVG changed and needs sanitization.

Procedure

Run npm --prefix packages/layout-engine test (TS — primary).
Run npm --prefix apps/preview test when preview routes, save flows, or shell behavior changed.
Run node scripts/check_no_new_python.mjs (spec 038 ratchet).
Start the preview server and confirm changed diagrams load at http://127.0.0.1:8100/view/v3:<slug> (manual look or tests — no agent screenshots unless the user asks).
Sanitize changed deliverable SVGs with python scripts/svg_illustrator_sanitize.py --write <svg>.
Update AGENTS.md (Handover section), TODO.md, or AGENT-INBOX.md only if the change altered current state or left durable follow-up.
Check the touched Markdown files for errors if the editor reports any.
Spot-check the changed SVG for syntax or portability issues.

Guardrails

Visual rules (gutter consistency, arrow clearance, typography hierarchy, box height floor, frame classes, separator sizing) are in DIAGRAM.md; runtime constants are in packages/layout-engine/src/tokens.ts and frame-classes.ts. Read both before running this procedure.

Key constraints to verify during build:

Do not skip the focused TypeScript tests when loader, layout, render, or preview code changed.
Do not add new Python product-path files; the ratchet must stay green.
Do not skip the sanitizer for changed deliverable SVGs.
Text must not overlap arrows, borders, icons, or other text.
Browser-verify the changed diagram in the v3 preview before treating the work as done (tests or user-confirmed load — not automatic screenshots).
When an arrow crosses helper text, change anchor sides or add waypoints — do not accept crossings.

Plus depuis ce dépôt

même dépôt

level-assignment

canonical/diagram-generator

Assign correct frame levels in YAML when nesting > 0. Use when creating or modifying a frame YAML that contains containers (items with children). Ensures siblings share the same visual class.

2026-07-132

diagram-language-sync

canonical/diagram-generator

Sync broader design-language specs into the diagram system. Use when importing typography, spacing, or grid rules from the upstream design language into tokens.ts, shared renderer constants, draw.io style sync, or layout helpers.

2026-07-072

diagram-redraw

canonical/diagram-generator

Redraw rough sketches or inconsistent diagrams into on-brand SVG and draw.io outputs. Use when adding a new diagram slug, translating a rough source into generator code, picking local icons, wiring compare pages, or producing editable outputs.

2026-07-072

drawio-review-promote

canonical/diagram-generator

Safely modify manually edited draw.io files. Use when preparing a review copy, checkpointing an original draw.io file, promoting reviewed changes back, or documenting a revert path for protected manual edits.

2026-04-252

name	diagram-build-validate
description	Build and validate diagram-generator outputs. Use when changing renderers, shared primitives, deliverable SVGs, draw.io exports, compare pages, or any diagram slug that needs rebuild, sanitization, and focused output checks.
argument-hint	Describe which diagram slugs or files changed

Diagram build and validate

When to use

Frame loader, layout engine, render, or preview code changed.
A frame YAML in scripts/diagrams/frames/ changed.
A new frame YAML was added.
A deliverable SVG changed and needs sanitization.

Procedure

Run npm --prefix packages/layout-engine test (TS — primary).
Run npm --prefix apps/preview test when preview routes, save flows, or shell behavior changed.
Run node scripts/check_no_new_python.mjs (spec 038 ratchet).
Start the preview server and confirm changed diagrams load at http://127.0.0.1:8100/view/v3:<slug> (manual look or tests — no agent screenshots unless the user asks).
Sanitize changed deliverable SVGs with python scripts/svg_illustrator_sanitize.py --write <svg>.
Update AGENTS.md (Handover section), TODO.md, or AGENT-INBOX.md only if the change altered current state or left durable follow-up.
Check the touched Markdown files for errors if the editor reports any.
Spot-check the changed SVG for syntax or portability issues.

Guardrails

Key constraints to verify during build:

Do not skip the focused TypeScript tests when loader, layout, render, or preview code changed.
Do not add new Python product-path files; the ratchet must stay green.
Do not skip the sanitizer for changed deliverable SVGs.
Text must not overlap arrows, borders, icons, or other text.
Browser-verify the changed diagram in the v3 preview before treating the work as done (tests or user-confirmed load — not automatic screenshots).
When an arrow crosses helper text, change anchor sides or add waypoints — do not accept crossings.