slide-arch-diagram

Renders business workflows as FE/BE/DB three-lane architecture diagrams in HTML/CSS slides.

21|3|Updated Mar 6, 2026
One-click install
npx skills add https://github.com/peter-tu-zynkr/zynkr-skill-builder --skill slide-arch-diagram-peter-tu-zynkr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: slide-arch-diagram
Source: https://github.com/peter-tu-zynkr/zynkr-skill-builder/tree/main/skills/1-brand-marketing/slide-arch-diagram
Command: npx skills add https://github.com/peter-tu-zynkr/zynkr-skill-builder --skill slide-arch-diagram-peter-tu-zynkr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Turning an ideated business workflow into a clear architecture view for a presentation is hard: flowcharts don't show who owns each step, and ad-hoc diagrams mix up inputs, processes, and data. This Skill converts one workflow into a slide-ready three-lane diagram (Front End / Back End / Database) with disciplined element placement and a single verdict line about automatibility. ## Core Features & Use Cases - IPO-to-lane placement: Decomposes a workflow into inputs, process steps, stored knowledge, and output, then places each element into the FE, BE, or DB lane using canonical decision questions and golden rules. - Production-proven render contract: Ships a complete .arch HTML/CSS component (octagon BE nodes, doc/folder icons, drawn arrows, law line) with runtime-loaded brand tokens and a QA checklist of bugs that shipped once. - Use Case: You describe a lead-enrichment workflow in free text; the Skill places the CRM records in the DB lane, chains three process octagons across the BE lane, drops the human input from FE, rises the output document back to FE, and closes with one orange verdict like "全自動——但品質完全由 Input 決定". ## Quick Start Ask the AI to draw your described business workflow as an FE/BE/DB architecture diagram on a slide page.

Frequently Asked Questions about slide-arch-diagram

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

FAQPage Schema
How do I draw a business workflow as an architecture diagram for a slide?▼

Hand the workflow to the Skill as free text, an IPO breakdown, or a slide packet entry. It decomposes the flow into inputs, process steps, stored knowledge, and output, places each into Front End, Back End, or Database lanes, and renders a left-to-right HTML/CSS diagram.

What is the difference between FE/BE/DB lanes and Input/Process/Output?▼

FE/BE/DB are the three horizontal lanes showing ownership: human interaction, execution and rules, and stored state. IPO is the unit stitched across those lanes, not the lanes themselves; each input, process, and output element is placed into the correct lane.

Can this diagram be exported to PowerPoint or pptx files?▼

No, version 1 renders HTML/CSS artifact deck pages only; pptxgenjs rendering is deferred to v2 because the octagon clip-path and lane grid need a native-shape recipe. To use it in Slides today, screenshot the diagram and insert it as a full-bleed image.

Does the Skill hard-code brand colors and fonts?▼

No, brand tokens load at runtime from a configured source such as a brand guide doc or token manifest, mapped onto CSS custom properties like --sage-deep and --orange. If no brand is configured, it falls back to neutral visual defaults and tells the user.

When should I use product-flow-design instead of this Skill?▼

Use product-flow-design when the same FE/BE/DB convention must be drawn into Lucid charts rather than rendered as slide pages. This Skill only renders HTML/CSS slide diagrams and does not write storylines, paginate decks, or select page layouts.