Fec Image Generation

---
name: fec-image-generation
description: Use when generating or editing diagrams, charts, visual assets, posters, UI mockups, product images, infographics, academic figures, comics, avatars, storyboards, brand boards, or image-edit workflows, especially when exported PNGs need visual QA and bounded self-repair. Prefer deterministic Mermaid/SVG/HTML/canvas sources for text-heavy diagrams; use HTML technical diagrams for browser-ready system blueprints, architecture, deployment topology, agent runtime, memory flow, before-after architecture, workflow, sequence, data-flow, lifecycle, runbook, PII/data-lineage, and state-machine diagrams. Do not use for ordinary UI polish without generated imagery.
---

# Image generation and chart workflow

## Purpose

Generate or edit diagrams, visual assets, and image workflows, and perform reviewable self-checks and repair iterations on exported PNGs.

## Procedure

1. Determine product type
   - When accuracy of text, structure, and connections is a priority, use Mermaid, SVG, HTML/CSS, canvas, or a graphics library to generate editable sources and then export as PNG.
   - Use HTML technical diagrams when the user needs a browser-ready single file with dark/light theme support for system blueprints, architecture, deployment topology, agent runtime, memory flow, before-after architecture, workflow, sequence, data-flow, lifecycle, runbook, state-machine, or PII/data-lineage diagrams.
   - Use the compatible HTML `workflow` route when Mermaid is unavailable or browser-specific lane/style delivery is required for process maps, approvals, automation runs, exception paths, and cyclical operating flows that need readable start/end, decision, actor, numbered-step, and summary treatment without requiring diagrams.net.
   - Use themed HTML technical diagrams when a system, agent, memory, data, or tool-call map needs semantic node shapes, flow-aware arrows, and a browser-ready source that can still be exported and QA-checked.
   - Use the interactive live diagram route when the user benefits from watching nodes and edges appear incrementally in a local browser, or when they want to drag, relabel, remove, zoom, and export a quick diagram during the session.
   - When aesthetics, texture, photos, illustrations, comics, product images or brand atmosphere are priorities, use image generation or editing tools, and then save the final assets to the project or report directory.

2. Clarify inputs and constraints
   - Collect audience, purpose, dimensions, language, required text, branding restrictions, editable source format, export format, and disabled elements.
   - For posters, UI mockups, brand boards and product images, first write a line of visual reading: target users, scenarios, sources of credibility, and main visual anchors.

3. Select Generate Route
   - ER diagrams, UML class diagrams, sequence diagrams, technical architecture diagrams, ML/deep learning, flow charts, etc., give priority to creating structured sources according to [diagram-workflows.md](references/diagram-workflows.md).
   - For themed browser-ready system blueprints, architecture, workflow, sequence, data-flow and lifecycle diagrams, read [html-technical-diagrams.md](references/html-technical-diagrams.md), then render JSON IR with [tech-diagram-render.mjs](scripts/tech-diagram-render.mjs). For process workflows, model participants as `lanes`, ordered actions as `nodes`, and exception or loop paths as `edges` with optional `waypoints`:
     ```bash
     node skills/fec-image-generation/scripts/tech-diagram-render.mjs --input diagram.json --output diagram.html --type architecture --manifest diagram.layout.json
     ```
   - For agent and memory diagrams, prefer `architecture` IR with semantic node types such as `agent`, `model`, `memory`, `vectorstore`, `graphdb`, `tool`, `document`, `queue`, `browser`, `user`, and `gateway`. Add connection `flow` values (`control`, `data`, `read`, `write`, `async`, `feedback`) when arrow meaning matters; two or more flow types produce an automatic flow legend.
   - Use optional `visual.style` for source-owned theme direction: `default`, `terminal`, `blueprint`, `minimal`, `glass`, `warm`, `openai`, or `editorial-dark`. Treat these as delivery themes, not brand guarantees.
   - When README-friendly SVG, PNG, JPG, or JPEG artifacts are needed from generated HTML/SVG sources, export with [export-diagram.mjs](scripts/export-diagram.mjs):
     ```bash
     node skills/fec-image-generation/scripts/export-diagram.mjs --input diagram.html --format svg
     node skills/fec-image-generation/scripts/export-diagram.mjs --input diagram.html --format png --output diagram.png --scale 2
     ```
   - For live interactive sketches, start [interactive-diagram-server.mjs](scripts/interactive-diagram-server.mjs), open the served [interactive-diagram.html](assets/interactive-diagram.html) page with a unique `?s=session-id`, then POST small JSON commands to `/cmd?s=session-id`:
     ```bash
     node skills/fec-image-generation/scripts/interactive-diagram-server.mjs --port 6100
     curl -s "http://127.0.0.1:6100/cmd?s=checkout-flow" -d '{"cmd":"init","title":"Checkout Flow","direction":"TB"}'
     curl -s "http://127.0.0.1:6100/cmd?s=checkout-flow" -d '{"cmd":"node","id":"cart","label":"Review cart","type":"process"}'
     ```
   - Use the draw.io studio workflow instead when the priority is editable `.drawio` source, official diagrams.net shapes, or long-term manual editing.
   - Posters, UI mockups, product graphics, infographics, academic graphics, comics, avatars, storyboards, brand boards and image editing, press [artifact-routing.md](references/artifact-routing.md) to choose generate, edit or hybrid routing.

4. Export and self-check PNG
   - Read the exported PNG before each delivery to check whether the main body is truly rendered, whether the text is truncated, whether the connections are stacked, and whether the nodes overlap.
   - Run when there is a layout manifest:
     ```bash
     node skills/fec-image-generation/scripts/png-qa.mjs --png output.png --manifest layout.json --format markdown
     ```
   - Still running PNG basic checks without manifest:
     ```bash
     node skills/fec-image-generation/scripts/png-qa.mjs --png output.png --format json
     ```

5. Automatic repair loop
   - Default maximum of 2 rounds; can be increased to a soft cap of 5 rounds when explicitly requested by the user.
   - The repair object is the source file, prompt, layout parameter or export size, and does not directly destructively modify PNG pixels.
   - Click [png-qa-autofix.md](references/png-qa-autofix.md) to turn the problem into a specific fix: increase the canvas, wrap lines, move nodes, layer connections, adjust padding or re-export.

6. Delivery records
   - Describe final source files, PNG paths, build routes, QA rounds, issues found and fixed, text or branding risks that still require manual confirmation.

## Constraints

- Text-intensive images should not be generated solely from bitmap models; editable structured sources must be retained.
- HTML technical diagrams must keep the JSON source and generated HTML; exported PNG/SVG/JPG files are delivery artifacts, not the source of truth. Use `.drawio` instead when official vendor icons or long-term manual editing are the priority.
- Themed semantic diagrams are implemented through the Frontend Craft renderer. Do not add Python, shell, cairosvg, rsvg-convert, Puppeteer, CDN capture libraries, copied SVG templates, or external icon packs as required dependencies for this route.
- Interactive live diagrams are session-time previews. Save JSON/SVG/PNG exports when the diagram becomes a deliverable, and switch to HTML technical diagrams or `.drawio` when long-term source ownership matters.
- Do not treat screenshots, fake data, or placeholder images as final product images unless the user explicitly requests a concept draft.
- The original image is not directly overwritten; the editing workflow outputs a new file by default.
- Readable labels, line attributions, legends, axes, and accessible alternative descriptions are not sacrificed for aesthetics.
- PNG helper only does detection and suggestions; fixes must go back to source, prompt, or layout parameters.
- Self-check results cannot replace manual confirmation of proper nouns, formulas, paper illustrations, brand specifications and compliance information.

## Expected Output

Produce editable source, final PNG or edited image with generated routes and QA results. Diagrams should be clearly structured, with uncensored labels and uncluttered connections; visual assets should match purpose, size, brand tone, and delivery path.


## Technical diagram quality and tool routing

Prefer locally installed Mermaid for standard sequence diagrams and flowcharts. Reuse fec-drawio-studio for architecture that needs long-term manual editing; local Graphviz is optional for dense topology. Record unavailable tools and fall back to the compatible JSON/HTML route without installation, downloads or CDN. Preserve complete text and every node/relationship; do not silently rearrange explicit sizes, coordinates or waypoints.

```sh
node skills/fec-image-generation/scripts/mermaid-render.mjs --input sequence.mmd --output sequence.svg --report sequence.render.json
node skills/fec-image-generation/scripts/export-diagram.mjs --input diagram.html --format png --output diagram.png --theme light --scale 2 --manifest diagram.layout.json --output-manifest diagram.actual.json
node skills/fec-image-generation/scripts/png-qa.mjs --png diagram.png --manifest diagram.actual.json --format json
```

Use the exported actual manifest for PNG QA. The source manifest has SVG coordinates and estimated bounds and cannot be reused unchanged at 2x. Browser export waits for fonts and measures real text bounds; standalone SVG embeds theme styles. Successful rendering, estimates and passing automation do not prove visual acceptance. Inspect the final PNG and record tool versions, theme, scale, repair rounds, unresolved issues and partial acceptance. Higher resolution cannot repair truncated text or layout collisions.

Bundled internal modules and reproducible fixtures:
- [mermaid-render.mjs](scripts/mermaid-render.mjs)
- [diagram-layout.mjs](scripts/diagram-layout.mjs)
- [diagram-browser.mjs](scripts/diagram-browser.mjs)
- [quality examples](assets/quality-examples/README.md)
- [sequence.json](assets/quality-examples/sequence.json)
- [workflow.json](assets/quality-examples/workflow.json)
- [architecture.json](assets/quality-examples/architecture.json)
- [sequence.mmd](assets/quality-examples/sequence.mmd)
- [workflow.mmd](assets/quality-examples/workflow.mmd)

The built-in sequence route supports participants and ordered messages. Use Mermaid for activations, alt/loop/par fragments and complex async semantics; never silently simplify them into plain messages. Enable optional ELK only when the installed Mermaid version supports it, otherwise use its compatible default layout.

- [invalid-explicit.json](assets/quality-examples/invalid-explicit.json)

- [png-qa.mjs](scripts/png-qa.mjs)