diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json index ed0c44a..b2bd921 100644 --- a/.claude-plugin/marketplace.json +++ b/.claude-plugin/marketplace.json @@ -1,7 +1,7 @@ { "name": "diagram-design", "metadata": { - "description": "Editorial-quality technical and product diagrams — 13 types rendered as standalone HTML with inline SVG, skinnable to match your brand" + "description": "Editorial-quality technical and product diagrams — 26 types rendered as standalone HTML with inline SVG, skinnable to match your brand" }, "owner": { "name": "Cathryn Lavery" diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json index 45c2308..71e67b2 100644 --- a/.claude-plugin/plugin.json +++ b/.claude-plugin/plugin.json @@ -1,7 +1,7 @@ { "name": "diagram-design", - "description": "Editorial-quality technical and product diagrams — 13 types rendered as standalone HTML with inline SVG, skinnable to match your brand", - "version": "1.0.0", + "description": "Editorial-quality technical and product diagrams — 26 types rendered as standalone HTML with inline SVG, skinnable to match your brand", + "version": "2.0.0", "homepage": "https://github.com/cathrynlavery/diagram-design", "repository": "https://github.com/cathrynlavery/diagram-design", "license": "MIT", diff --git a/.codex-plugin/plugin.json b/.codex-plugin/plugin.json index e52c881..74ca72f 100644 --- a/.codex-plugin/plugin.json +++ b/.codex-plugin/plugin.json @@ -1,7 +1,7 @@ { "name": "diagram-design", - "description": "Editorial-quality technical and product diagrams - 13 types rendered as standalone HTML with inline SVG, skinnable to match your brand", - "version": "1.0.0", + "description": "Editorial-quality technical and product diagrams - 26 types rendered as standalone HTML with inline SVG, skinnable to match your brand", + "version": "2.0.0", "author": { "name": "Cathryn Lavery", "url": "https://github.com/cathrynlavery" diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4c4cc40 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.claude/ +.mcp.json diff --git a/README.md b/README.md index 39b07fc..504114a 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ ![Content site architecture](docs/screenshots/architecture.png) -14 types. One Claude Code skill. Your brand in 60 seconds — the skill reads your website and maps colors + fonts to every diagram. +26 types. One Claude Code skill. Your brand in 60 seconds — the skill reads your website and maps colors + fonts to every diagram. No Figma. No generic rounded boxes. No 30-minute color-picking sessions. @@ -14,7 +14,7 @@ No Figma. No generic rounded boxes. No 30-minute color-picking sessions. I write at [littlemight.com](https://littlemight.com?utm_source=diagram-design&utm_medium=readme&utm_campaign=github&utm_content=intro) (and run [BestSelf.co](https://bestself.co?utm_source=diagram-design&utm_medium=readme&utm_campaign=github&utm_content=intro) on the side). Every time I needed a diagram — an architecture sketch, a flowchart, a pyramid of what matters most — I'd ask Claude and get back a generic rounded-box thing that looked nothing like the rest of the site. I'd either fight with Figma for 30 minutes or just skip the diagram. -So I built a Claude Code skill for it. Fourteen types, editorial quality, matches your brand in 60 seconds by reading your website. +So I built a Claude Code skill for it. Twenty-six types, editorial quality, matches your brand in 60 seconds by reading your website. > *The highest-quality move is usually deletion.* Every node earns its place. The accent color is reserved for the 1–2 things the reader should look at first. Target density: 4/10. @@ -22,7 +22,7 @@ So I built a Claude Code skill for it. Fourteen types, editorial quality, matche ## What it makes -All 14 diagrams ship in three variants: minimal light, minimal dark, and full-editorial. Open any of them directly in a browser — no build step, no JS, no external images. +All 26 diagrams ship in three variants: minimal light, minimal dark, and full-editorial. Open any of them directly in a browser — no build step, no JS, no external images. @@ -32,7 +32,7 @@ All 14 diagrams ship in three variants: minimal light, minimal dark, and full-ed - + @@ -48,16 +48,31 @@ All 14 diagrams ship in three variants: minimal light, minimal dark, and full-ed - + - - - + + + + + + + + + + + + + + + + + +
State machine
State machine
States + transitions
ER / data model
ER / data model
Entities + fields
ER
ER / data model
Entities + fields
Timeline
Timeline
Events on an axis
Layers
Layer stack
Stacked abstractions
Pyramid
Pyramid / funnel
Ranked hierarchy or drop-off
 Consultant 2×2
Consultant 2×2
Scenario matrix · named cells
Consultant 2×2
Consultant 2×2
Scenario matrix · named cells
  Radar
Radar / Spider
Multi-axis comparison
IT current-state
IT current-state
Legacy landscape · modernization
High-Level
High-Level
End-to-end stack on a cluster
Bar chart
Bar chart
Categorical comparison
Line chart
Line chart
Trends over time
Gantt
Gantt
Tasks and phases on a timeline
Scatter plot
Scatter plot
Distribution and correlation
Process
Process
Multi-actor sequential workflow
Medallion
Medallion
Multi-tier data storage
Data flow
Data flow
Role-scoped pipeline steps
DP integration
DP integration
Sources → core → consumers
DP security matrix
DP security matrix
Per-role access permissions
-**Browse the live gallery:** open [`skills/diagram-design/assets/index.html`](skills/diagram-design/assets/index.html) in your browser to flip through all 14 diagrams with light / dark / full-editorial tabs. +**Browse the live gallery:** open [`skills/diagram-design/assets/index.html`](skills/diagram-design/assets/index.html) in your browser to flip through all 26 diagrams with light / dark / full-editorial tabs. --- @@ -78,6 +93,7 @@ Restart Claude Code. The skill registers as `diagram-design` and activates whene Quicker to install — but the skill lives in the plugin cache, so edits to `references/style-guide.md` don't survive plugin updates. Pick this if you just want to try it out; use the clone route above if you plan to customize the style guide by hand. **Claude Code:** + ``` /plugin marketplace add cathrynlavery/diagram-design /plugin install diagram-design@diagram-design @@ -86,6 +102,7 @@ Quicker to install — but the skill lives in the plugin cache, so edits to `ref **Claude Cowork:** Customize → Directory → Plugins → **+** → paste `cathrynlavery/diagram-design` → Sync, then install from the Personal list. **Codex:** + ``` npx skills add https://github.com/cathrynlavery/diagram-design --skill diagram-design ``` @@ -132,7 +149,7 @@ Before writing tokens, the skill verifies WCAG AA contrast on `ink` over `paper` ### Manual override -Prefer to set tokens by hand? Open [`skills/diagram-design/references/style-guide.md`](skills/diagram-design/references/style-guide.md) and edit the table. Everything downstream reads from there — all 14 diagrams, the annotation primitive, and the gallery all inherit semantic role names (`accent`, not `#eb6c36`). +Prefer to set tokens by hand? Open [`skills/diagram-design/references/style-guide.md`](skills/diagram-design/references/style-guide.md) and edit the table. Everything downstream reads from there — all 26 diagrams, the annotation primitive, and the gallery all inherit semantic role names (`accent`, not `#eb6c36`). ### First-run gate @@ -147,7 +164,7 @@ See [`skills/diagram-design/references/onboarding.md`](skills/diagram-design/ref ## Quickstart ```bash -# Open the gallery to see all 14 diagrams +# Open the gallery to see all 26 diagrams open ~/.claude/skills/diagram-design/assets/index.html # In Claude Code, just ask: @@ -165,6 +182,30 @@ cp assets/template-full.html my-diagram.html # editorial with summary cards --- +## Export to PNG / SVG + +Diagrams ship as self-contained HTML, but you can export the diagram itself for Figma, slides, or social cards. Use the slash command: + +``` +/diagram-design:export path/to/diagram.html +/diagram-design:export path/to/diagram.html --svg-only +/diagram-design:export path/to/diagram.html --png-only --scale=3 +``` + +Or just ask in natural language: + +``` +"Export this diagram as SVG and PNG." +"Save my-diagram.html as PNG." +``` + +- **SVG** — extracts the `` node and injects Google Fonts so it renders standalone in browsers, Figma, and Illustrator. +- **PNG** — rasterizes the diagram via Playwright at 2× by default. One-time setup: `pip install playwright && playwright install chromium`. + +Both formats are diagram-only — editorial cards and headers from `-full` variants aren't included. For a screenshot of the full editorial layout, use your browser's print-to-PDF or full-page screenshot. See [`skills/diagram-design/references/export.md`](skills/diagram-design/references/export.md) for the full procedure. + +--- + ## Architecture Progressive disclosure. `SKILL.md` is a lean index — it tells Claude how to pick a type and where to look for detail. Every type lives in its own reference file, loaded only when relevant. @@ -194,16 +235,16 @@ diagram-design/ ├── assets/ │ ├── index.html — live gallery, tabbed │ ├── template*.html — scaffolds for new diagrams -│ ├── example-.html — 3 variants × 14 types +│ ├── example-.html — 3 variants × 26 types │ └── example-quadrant-consultant.html — consultant-special 2×2 scenario matrix └── docs/screenshots/ — the images in this README ``` -This keeps Claude's working context tight (only load what you need) and makes the skill easy to extend — drop a new `type-.md` and wire it into the selection guide. +This keeps Claude's working context tight (only load what you need) and makes the skill easy to extend — drop a new `type-.md` and wire it into the selection guide. The skill ships with 32 reference files covering every diagram type, primitive, and utility. ### What loads when -The top-level `SKILL.md` is always in context. Everything else is pulled in only when relevant — this is what keeps the skill fast even with 15 reference files. +The top-level `SKILL.md` is always in context. Everything else is pulled in only when relevant — this is what keeps the skill fast even with 32 reference files. | You ask for… | Claude loads | |---|---| @@ -212,7 +253,7 @@ The top-level `SKILL.md` is always in context. Everything else is pulled in only | "Onboard this skill to my site" | `SKILL.md` + `references/onboarding.md` + `references/style-guide.md` | | "Add an editorial callout to this diagram" | `SKILL.md` + `references/primitive-annotation.md` | | "Give me a hand-drawn version" | `SKILL.md` + `references/primitive-sketchy.md` | -| Routine diagram-making (any of the 14 diagrams) | Only `SKILL.md` + that one type's reference | +| Routine diagram-making (any of the 26 diagrams) | Only `SKILL.md` + that one type's reference | No matter how many types exist, Claude only reads the one you need. Add a new type tomorrow and nothing else changes. @@ -228,6 +269,7 @@ One accent color, 1–2 focal elements per diagram. Three font families: Instrum - **Annotation callout** — italic Instrument Serif + dashed Bézier leader, for editorial asides that sit in the margins. See [`skills/diagram-design/references/primitive-annotation.md`](skills/diagram-design/references/primitive-annotation.md). - **Sketchy filter** — SVG turbulence + displacement map for a hand-drawn variant. Good for essays, not for technical docs. See [`skills/diagram-design/references/primitive-sketchy.md`](skills/diagram-design/references/primitive-sketchy.md). +- **Icon set** — 55 monochrome IT/cloud icons (laptop, phone, user, server, database, Docker, Kubernetes, AWS, Azure, GitHub, Postgres…) for richer architecture and sequence diagrams. Stroked icons from [Tabler Icons](https://tabler.io/icons) (MIT); brand silhouettes from [Simple Icons](https://simpleicons.org) (CC0). Each icon uses `currentColor` so it inherits the editorial skin or your onboarded brand. See [`skills/diagram-design/references/primitive-icons.md`](skills/diagram-design/references/primitive-icons.md); browse the [gallery](skills/diagram-design/assets/icons.html). Regenerate with `python scripts/build-icons.py`. --- diff --git a/THIRD_PARTY_LICENSES.md b/THIRD_PARTY_LICENSES.md new file mode 100644 index 0000000..df36f4a --- /dev/null +++ b/THIRD_PARTY_LICENSES.md @@ -0,0 +1,43 @@ +# Third-party licenses + +The diagram-design skill itself is MIT-licensed (see [`LICENSE`](LICENSE)). It bundles content from the following third-party sources, redistributed under their respective licenses. + +## Tabler Icons + +- **License:** MIT +- **Upstream:** https://github.com/tabler/tabler-icons +- **Used in:** stroked icons in `skills/diagram-design/references/primitive-icons.md` and `skills/diagram-design/assets/icons.html` (categories: Compute, People, Network, Data, Kubernetes, Action, DevOps, plus the stroked Brand outlines for Docker, Terraform, AWS, Azure, GitHub). + +The MIT license is reproduced in full at https://github.com/tabler/tabler-icons/blob/main/LICENSE. + +## Simple Icons + +- **License:** CC0 1.0 Universal (Public Domain Dedication) +- **Upstream:** https://github.com/simple-icons/simple-icons +- **Used in:** filled brand silhouettes in `skills/diagram-design/references/primitive-icons.md` and `skills/diagram-design/assets/icons.html` (Kubernetes, Google Cloud, PostgreSQL, Nginx, Gitea, Keycloak, MinIO, Apache NiFi, Apache Airflow, Trino, Apache Superset, Jupyter, Python, R). + +The CC0 dedication is reproduced in full at https://github.com/simple-icons/simple-icons/blob/develop/LICENSE.md. + +## log-z/logos + +- **License:** MIT +- **Upstream:** https://github.com/log-z/logos/tree/main/website-logos +- **Used in:** filled brand silhouettes that aren't carried by Simple Icons or Tabler — currently MySQL, Redis, and StarRocks. Source SVGs are 100×100 with embedded `", "", body, flags=re.DOTALL | re.IGNORECASE) + body = re.sub(r"]*>.*?", "", body, flags=re.DOTALL | re.IGNORECASE) + body = re.sub(r"]*>.*?", "", body, flags=re.DOTALL | re.IGNORECASE) + # Strip Inkscape canvas-offset translate transforms from group wrappers + body = re.sub(r'\btransform="translate\([^"]+\)"', '', body) + + def _rewrite_fill(m: re.Match) -> str: + """Keep white; turn everything else into currentColor.""" + hex_val = m.group(1).lower().strip() + if hex_val in ("#fff", "#ffffff", "white", "#fefefe", "#fdfdfd"): + return 'fill="#fff"' + return 'fill="currentColor"' + + # Rewrite inline style="fill:#rrggbb" → standalone fill= attribute + body = re.sub( + r'style="[^"]*fill:\s*(#[0-9a-fA-F]{3,8}|white)[^"]*"', + lambda m: _rewrite_fill(re.search(r'(#[0-9a-fA-F]{3,8}|white)', m.group(0))), + body, + ) + # Rewrite standalone fill="#rrggbb" attributes + body = re.sub( + r'\bfill="(#[0-9a-fA-F]{3,8}|white)"', + _rewrite_fill, + body, + ) + body = re.sub(r'\bstroke="#[0-9a-fA-F]{3,8}"', 'stroke="currentColor"', body) + body = re.sub(r'\bfill="none"', '', body) + body = re.sub(r"\s+", " ", body).strip() + return ( + f'{body}' + ) + + +def normalize_devicon(raw: str) -> str: + """Devicon SVGs have colored fills and a 128x128 or 32x32 viewBox. + Strip fills/classes and rewrite to 24x24 currentColor.""" + inner = re.search(r"]*>(.*?)", raw, flags=re.DOTALL | re.IGNORECASE) + if not inner: + raise ValueError("no in Devicon payload") + body = inner.group(1) + body = re.sub(r"]*>.*?", "", body, flags=re.DOTALL | re.IGNORECASE) + body = re.sub(r"]*>.*?", "", body, flags=re.DOTALL | re.IGNORECASE) + body = re.sub(r'\bfill="#[0-9a-fA-F]{3,8}"', 'fill="currentColor"', body) + body = re.sub(r'\bstroke="#[0-9a-fA-F]{3,8}"', 'stroke="currentColor"', body) + body = re.sub(r'\bclass="[^"]*"', 'fill="currentColor"', body) + body = re.sub(r"\s+", " ", body).strip() + return ( + '{body}' + ) + + +def normalize_logz(raw: str) -> str: + """log-z/logos SVGs are 100x100 with embedded ", raw, flags=re.DOTALL | re.IGNORECASE) + if not inner: + raise ValueError("no in log-z payload") + body = inner.group(1) + body = re.sub(r"]*>.*?", "", body, flags=re.DOTALL | re.IGNORECASE) + body = re.sub(r'\bclass="st\d+"', 'fill="currentColor"', body) + body = re.sub(r'\bfill="#[0-9a-fA-F]{3,8}"', 'fill="currentColor"', body) + body = re.sub(r"\s+", " ", body).strip() + return ( + '{body}' + ) + + +def build() -> tuple[list[str], list[str]]: + md_chunks: list[str] = [] + gallery_chunks: list[str] = [] + misses: list[str] = [] + + md_chunks.append( + "# Icons (primitive)\n\n" + "A monochrome 24×24 icon library for IT/cloud diagrams. Each icon " + "uses `currentColor` so it inherits ink from its parent SVG and " + "adapts to the editorial skin or any user-onboarded brand palette.\n\n" + "## Usage\n\n" + "Find the icon by name (the `### name` headings below). Copy the " + "fenced `` snippet into your diagram. Default size is 24×24; " + "wrap in `` to position and " + "resize. Set `color`, `fill`, or `stroke` on the parent group/SVG to " + "control color.\n\n" + "Generic icons are stroked (1.5px, hairline, like the rest of the " + "skill); brand silhouettes are filled. Don't mix the two styles in " + "the same diagram unnecessarily.\n\n" + ) + + for category, items in ICONS.items(): + md_chunks.append(f"## {category}\n\n") + gallery_chunks.append(f'

{category}

') + + for slot, source, source_id, blurb in items: + vpath = vendor_path(slot, source, source_id) + + if source == "tabler": + normalize = normalize_tabler + attribution = f"Tabler Icons / `{source_id}` (MIT)" + elif source == "simple": + normalize = normalize_simple + attribution = f"Simple Icons / `{source_id}` (CC0)" + elif source == "logz": + normalize = normalize_logz + attribution = f"log-z/logos / `{source_id}` (MIT)" + elif source.startswith("devicon"): + variant = source.split(":")[1] if ":" in source else "plain" + normalize = normalize_devicon + attribution = f"Devicon / `{source_id}-{variant}` (MIT)" + elif source == "url": + normalize = normalize_url + domain = re.sub(r"https?://([^/]+)/.*", r"\1", source_id) + attribution = f"Direct fetch / `{domain}` — verify license before use" + else: + raise ValueError(f"unknown source: {source}") + + if vpath.exists(): + print(f" local {source}/{source_id} -> {slot}", file=sys.stderr) + raw = vpath.read_text(encoding="utf-8") + else: + print(f" fetching {source}/{source_id} -> {slot}", file=sys.stderr) + if source == "tabler": + raw = fetch_tabler(source_id) + elif source == "simple": + raw = fetch_simple(source_id) + elif source == "logz": + raw = fetch_logz(source_id) + elif source.startswith("devicon"): + variant = source.split(":")[1] if ":" in source else "plain" + raw = fetch_devicon(source_id, variant) + elif source == "url": + raw = fetch_url(source_id) + if raw is not None: + vpath.parent.mkdir(parents=True, exist_ok=True) + vpath.write_text(raw, encoding="utf-8") + + if raw is None: + misses.append(f"{slot} <- {source}/{source_id}") + md_chunks.append( + f"### {slot}\n_NOT FOUND — please pick a fallback_\n\n" + ) + gallery_chunks.append( + f'
∅
' + f'
{slot}
' + ) + continue + + try: + snippet = normalize(raw) + except ValueError as e: + misses.append(f"{slot} <- {source}/{source_id} (parse: {e})") + continue + + md_chunks.append( + f"### {slot}\n{blurb}\n\n" + f"```svg\n{snippet}\n```\n\n" + f"Source: {attribution}\n\n" + ) + gallery_chunks.append( + f'
{snippet}
' + f'
{slot}
' + ) + + gallery_chunks.append("
") + + md_chunks.append( + "---\n\n" + "## License attribution\n\n" + "- **Tabler Icons** — MIT — https://github.com/tabler/tabler-icons\n" + "- **Simple Icons** — CC0 — https://github.com/simple-icons/simple-icons\n" + "- **Devicon** — MIT — https://github.com/devicons/devicon\n" + "- **log-z/logos** — MIT — https://github.com/log-z/logos\n\n" + "All libraries' licenses permit redistribution, including in this " + "repository's MIT-licensed source. Brand logos retain their " + "respective trademarks; this set is for documentation and " + "illustrative use only.\n" + ) + + return md_chunks, gallery_chunks, misses + + +GALLERY_TEMPLATE = """ + + + + + Icon library · Diagram Design + + + + +
+
+

Icons · Diagram Design

+

Icon library

+

A small, monochrome library for IT/cloud illustrations. Stroked icons from Tabler Icons (MIT); brand silhouettes from Simple Icons (CC0). Every icon uses currentColor so it inherits ink from its parent.

+
+ {SECTIONS} + +
+ + +""" + + +def main() -> int: + print("Building icon library…", file=sys.stderr) + md_chunks, gallery_chunks, misses = build() + + MD_OUT.parent.mkdir(parents=True, exist_ok=True) + MD_OUT.write_text("".join(md_chunks), encoding="utf-8") + + HTML_OUT.parent.mkdir(parents=True, exist_ok=True) + html = GALLERY_TEMPLATE.replace("{SECTIONS}", "\n".join(gallery_chunks)) + HTML_OUT.write_text(html, encoding="utf-8") + + total = sum(len(items) for items in ICONS.values()) + print(f"\nDone. {total - len(misses)}/{total} fetched.", file=sys.stderr) + print(f" primitive-icons.md: {MD_OUT}", file=sys.stderr) + print(f" icons.html: {HTML_OUT}", file=sys.stderr) + if misses: + print(f"\n {len(misses)} miss(es) — review and pick fallbacks:", file=sys.stderr) + for m in misses: + print(f" - {m}", file=sys.stderr) + return 1 + return 0 + + +if __name__ == "__main__": + sys.exit(main()) diff --git a/scripts/fix-mojibake.py b/scripts/fix-mojibake.py new file mode 100644 index 0000000..856cf17 --- /dev/null +++ b/scripts/fix-mojibake.py @@ -0,0 +1,61 @@ +"""Replace mojibake sequences in UTF-8 files with their original characters. + +The repo had a few files saved by a tool that interpreted UTF-8 as cp1252 and +re-saved as UTF-8, producing classic mojibake (em-dash --> 'â€"', section sign +--> '§', right arrow --> 'â†'', etc.). This script rewrites those sequences +in-place without touching legitimately-encoded UTF-8 elsewhere in the file. +""" +import sys + +PAIRS = [ + ('—', '—'), # em-dash + ('–', '–'), # en-dash + ('’', '’'), # right single quote + ('‘', '‘'), # left single quote + ('“', '“'), # left double quote + ('”', '”'), # right double quote + ('…', '…'), # horizontal ellipsis + ('•', '•'), # bullet + ('→', '→'), # right arrow + ('↑', '←'), # left arrow + ('↑', '↑'), # up arrow (same prefix collision - rare) + ('↓', '↓'), # down arrow + ('≤', '≤'), # less-than-or-equal + ('≥', '≥'), # greater-than-or-equal + ('×', '×'), # multiplication sign + ('÷', '÷'), # division sign + ('§', '§'), # section sign + ('°', '°'), # degree + ('½', '½'), # one-half + ('«', '«'), # « + ('»', '»'), # » + ('©', '©'), # © + ('®', '®'), # ® +] + + +def fix(path: str) -> int: + with open(path, 'rb') as f: + raw = f.read() + had_bom = raw.startswith(b'\xef\xbb\xbf') + if had_bom: + raw = raw[3:] + text = raw.decode('utf-8') + n = 0 + for bad, good in PAIRS: + if bad in text: + n += text.count(bad) + text = text.replace(bad, good) + if n == 0 and not had_bom: + print(f'{path}: no mojibake found') + return 0 + with open(path, 'w', encoding='utf-8', newline='\n') as f: + f.write(text) + note = f' (also stripped BOM)' if had_bom else '' + print(f'{path}: replaced {n} sequence(s){note}') + return n + + +if __name__ == '__main__': + for p in sys.argv[1:]: + fix(p) diff --git a/scripts/vendor/icons/devicon/rstudio-plain.svg b/scripts/vendor/icons/devicon/rstudio-plain.svg new file mode 100644 index 0000000..28c580a --- /dev/null +++ b/scripts/vendor/icons/devicon/rstudio-plain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/scripts/vendor/icons/devicon/spss-plain.svg b/scripts/vendor/icons/devicon/spss-plain.svg new file mode 100644 index 0000000..e4e43fa --- /dev/null +++ b/scripts/vendor/icons/devicon/spss-plain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/scripts/vendor/icons/logz/mysql.svg b/scripts/vendor/icons/logz/mysql.svg new file mode 100644 index 0000000..debc50f --- /dev/null +++ b/scripts/vendor/icons/logz/mysql.svg @@ -0,0 +1,25 @@ + + + + + + + + diff --git a/scripts/vendor/icons/logz/redis.svg b/scripts/vendor/icons/logz/redis.svg new file mode 100644 index 0000000..60a3f06 --- /dev/null +++ b/scripts/vendor/icons/logz/redis.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + diff --git a/scripts/vendor/icons/logz/starrocks.svg b/scripts/vendor/icons/logz/starrocks.svg new file mode 100644 index 0000000..0029dda --- /dev/null +++ b/scripts/vendor/icons/logz/starrocks.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + diff --git a/scripts/vendor/icons/simple/apacheairflow.svg b/scripts/vendor/icons/simple/apacheairflow.svg new file mode 100644 index 0000000..8cc4ad0 --- /dev/null +++ b/scripts/vendor/icons/simple/apacheairflow.svg @@ -0,0 +1 @@ +Apache Airflow \ No newline at end of file diff --git a/scripts/vendor/icons/simple/apachehive.svg b/scripts/vendor/icons/simple/apachehive.svg new file mode 100644 index 0000000..ae828a2 --- /dev/null +++ b/scripts/vendor/icons/simple/apachehive.svg @@ -0,0 +1 @@ +Apache Hive \ No newline at end of file diff --git a/scripts/vendor/icons/simple/apachenifi.svg b/scripts/vendor/icons/simple/apachenifi.svg new file mode 100644 index 0000000..a0b413b --- /dev/null +++ b/scripts/vendor/icons/simple/apachenifi.svg @@ -0,0 +1 @@ +Apache NiFi \ No newline at end of file diff --git a/scripts/vendor/icons/simple/apachesuperset.svg b/scripts/vendor/icons/simple/apachesuperset.svg new file mode 100644 index 0000000..7421ca0 --- /dev/null +++ b/scripts/vendor/icons/simple/apachesuperset.svg @@ -0,0 +1 @@ +Apache Superset \ No newline at end of file diff --git a/scripts/vendor/icons/simple/gitea.svg b/scripts/vendor/icons/simple/gitea.svg new file mode 100644 index 0000000..d870f71 --- /dev/null +++ b/scripts/vendor/icons/simple/gitea.svg @@ -0,0 +1 @@ +Gitea \ No newline at end of file diff --git a/scripts/vendor/icons/simple/googlecloud.svg b/scripts/vendor/icons/simple/googlecloud.svg new file mode 100644 index 0000000..b7b4dcc --- /dev/null +++ b/scripts/vendor/icons/simple/googlecloud.svg @@ -0,0 +1 @@ +Google Cloud \ No newline at end of file diff --git a/scripts/vendor/icons/simple/jupyter.svg b/scripts/vendor/icons/simple/jupyter.svg new file mode 100644 index 0000000..9353854 --- /dev/null +++ b/scripts/vendor/icons/simple/jupyter.svg @@ -0,0 +1 @@ +Jupyter \ No newline at end of file diff --git a/scripts/vendor/icons/simple/keycloak.svg b/scripts/vendor/icons/simple/keycloak.svg new file mode 100644 index 0000000..9a6d6f0 --- /dev/null +++ b/scripts/vendor/icons/simple/keycloak.svg @@ -0,0 +1 @@ +Keycloak \ No newline at end of file diff --git a/scripts/vendor/icons/simple/kubernetes.svg b/scripts/vendor/icons/simple/kubernetes.svg new file mode 100644 index 0000000..667f2d4 --- /dev/null +++ b/scripts/vendor/icons/simple/kubernetes.svg @@ -0,0 +1 @@ +Kubernetes \ No newline at end of file diff --git a/scripts/vendor/icons/simple/microsoftsqlserver.svg b/scripts/vendor/icons/simple/microsoftsqlserver.svg new file mode 100644 index 0000000..3b3da3f --- /dev/null +++ b/scripts/vendor/icons/simple/microsoftsqlserver.svg @@ -0,0 +1 @@ +Microsoft SQL Server \ No newline at end of file diff --git a/scripts/vendor/icons/simple/minio.svg b/scripts/vendor/icons/simple/minio.svg new file mode 100644 index 0000000..baf5f88 --- /dev/null +++ b/scripts/vendor/icons/simple/minio.svg @@ -0,0 +1 @@ +MinIO \ No newline at end of file diff --git a/scripts/vendor/icons/simple/nginx.svg b/scripts/vendor/icons/simple/nginx.svg new file mode 100644 index 0000000..5875410 --- /dev/null +++ b/scripts/vendor/icons/simple/nginx.svg @@ -0,0 +1 @@ +NGINX \ No newline at end of file diff --git a/scripts/vendor/icons/simple/oracle.svg b/scripts/vendor/icons/simple/oracle.svg new file mode 100644 index 0000000..a7b5a8d --- /dev/null +++ b/scripts/vendor/icons/simple/oracle.svg @@ -0,0 +1 @@ +Oracle \ No newline at end of file diff --git a/scripts/vendor/icons/simple/postgresql.svg b/scripts/vendor/icons/simple/postgresql.svg new file mode 100644 index 0000000..dcf75b7 --- /dev/null +++ b/scripts/vendor/icons/simple/postgresql.svg @@ -0,0 +1 @@ +PostgreSQL \ No newline at end of file diff --git a/scripts/vendor/icons/simple/powerbi.svg b/scripts/vendor/icons/simple/powerbi.svg new file mode 100644 index 0000000..1448662 --- /dev/null +++ b/scripts/vendor/icons/simple/powerbi.svg @@ -0,0 +1 @@ +Power BI \ No newline at end of file diff --git a/scripts/vendor/icons/simple/python.svg b/scripts/vendor/icons/simple/python.svg new file mode 100644 index 0000000..30587d8 --- /dev/null +++ b/scripts/vendor/icons/simple/python.svg @@ -0,0 +1 @@ +Python \ No newline at end of file diff --git a/scripts/vendor/icons/simple/qgis.svg b/scripts/vendor/icons/simple/qgis.svg new file mode 100644 index 0000000..a0d2e8d --- /dev/null +++ b/scripts/vendor/icons/simple/qgis.svg @@ -0,0 +1 @@ +QGIS \ No newline at end of file diff --git a/scripts/vendor/icons/simple/r.svg b/scripts/vendor/icons/simple/r.svg new file mode 100644 index 0000000..39c03e1 --- /dev/null +++ b/scripts/vendor/icons/simple/r.svg @@ -0,0 +1 @@ +R \ No newline at end of file diff --git a/scripts/vendor/icons/simple/redash.svg b/scripts/vendor/icons/simple/redash.svg new file mode 100644 index 0000000..32e7638 --- /dev/null +++ b/scripts/vendor/icons/simple/redash.svg @@ -0,0 +1 @@ +Redash \ No newline at end of file diff --git a/scripts/vendor/icons/simple/sqlite.svg b/scripts/vendor/icons/simple/sqlite.svg new file mode 100644 index 0000000..a776ea1 --- /dev/null +++ b/scripts/vendor/icons/simple/sqlite.svg @@ -0,0 +1 @@ +SQLite \ No newline at end of file diff --git a/scripts/vendor/icons/simple/tableau.svg b/scripts/vendor/icons/simple/tableau.svg new file mode 100644 index 0000000..0c24b37 --- /dev/null +++ b/scripts/vendor/icons/simple/tableau.svg @@ -0,0 +1 @@ +Tableau \ No newline at end of file diff --git a/scripts/vendor/icons/simple/trino.svg b/scripts/vendor/icons/simple/trino.svg new file mode 100644 index 0000000..e960ed2 --- /dev/null +++ b/scripts/vendor/icons/simple/trino.svg @@ -0,0 +1 @@ +Trino \ No newline at end of file diff --git a/scripts/vendor/icons/tabler/address-book.svg b/scripts/vendor/icons/tabler/address-book.svg new file mode 100644 index 0000000..4af540d --- /dev/null +++ b/scripts/vendor/icons/tabler/address-book.svg @@ -0,0 +1,24 @@ + + + + + + + + + diff --git a/scripts/vendor/icons/tabler/alert-triangle.svg b/scripts/vendor/icons/tabler/alert-triangle.svg new file mode 100644 index 0000000..03f550c --- /dev/null +++ b/scripts/vendor/icons/tabler/alert-triangle.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/scripts/vendor/icons/tabler/arrow-left.svg b/scripts/vendor/icons/tabler/arrow-left.svg new file mode 100644 index 0000000..a134e8a --- /dev/null +++ b/scripts/vendor/icons/tabler/arrow-left.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/scripts/vendor/icons/tabler/arrow-right-rhombus.svg b/scripts/vendor/icons/tabler/arrow-right-rhombus.svg new file mode 100644 index 0000000..56d4f7d --- /dev/null +++ b/scripts/vendor/icons/tabler/arrow-right-rhombus.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/scripts/vendor/icons/tabler/arrow-right.svg b/scripts/vendor/icons/tabler/arrow-right.svg new file mode 100644 index 0000000..b97ebd2 --- /dev/null +++ b/scripts/vendor/icons/tabler/arrow-right.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/scripts/vendor/icons/tabler/arrows-split.svg b/scripts/vendor/icons/tabler/arrows-split.svg new file mode 100644 index 0000000..b225146 --- /dev/null +++ b/scripts/vendor/icons/tabler/arrows-split.svg @@ -0,0 +1,22 @@ + + + + + + + diff --git a/scripts/vendor/icons/tabler/bolt.svg b/scripts/vendor/icons/tabler/bolt.svg new file mode 100644 index 0000000..3d8e365 --- /dev/null +++ b/scripts/vendor/icons/tabler/bolt.svg @@ -0,0 +1,19 @@ + + + + diff --git a/scripts/vendor/icons/tabler/braces.svg b/scripts/vendor/icons/tabler/braces.svg new file mode 100644 index 0000000..0fbd023 --- /dev/null +++ b/scripts/vendor/icons/tabler/braces.svg @@ -0,0 +1,20 @@ + + + + + diff --git a/scripts/vendor/icons/tabler/brand-aws.svg b/scripts/vendor/icons/tabler/brand-aws.svg new file mode 100644 index 0000000..c05828d --- /dev/null +++ b/scripts/vendor/icons/tabler/brand-aws.svg @@ -0,0 +1,24 @@ + + + + + + + + + diff --git a/scripts/vendor/icons/tabler/brand-azure.svg b/scripts/vendor/icons/tabler/brand-azure.svg new file mode 100644 index 0000000..e3bb468 --- /dev/null +++ b/scripts/vendor/icons/tabler/brand-azure.svg @@ -0,0 +1,20 @@ + + + + + diff --git a/scripts/vendor/icons/tabler/brand-docker.svg b/scripts/vendor/icons/tabler/brand-docker.svg new file mode 100644 index 0000000..175a804 --- /dev/null +++ b/scripts/vendor/icons/tabler/brand-docker.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + diff --git a/scripts/vendor/icons/tabler/brand-github.svg b/scripts/vendor/icons/tabler/brand-github.svg new file mode 100644 index 0000000..977f5a3 --- /dev/null +++ b/scripts/vendor/icons/tabler/brand-github.svg @@ -0,0 +1,19 @@ + + + + diff --git a/scripts/vendor/icons/tabler/brand-terraform.svg b/scripts/vendor/icons/tabler/brand-terraform.svg new file mode 100644 index 0000000..42e2e6d --- /dev/null +++ b/scripts/vendor/icons/tabler/brand-terraform.svg @@ -0,0 +1,20 @@ + + + + + diff --git a/scripts/vendor/icons/tabler/bucket.svg b/scripts/vendor/icons/tabler/bucket.svg new file mode 100644 index 0000000..a7fface --- /dev/null +++ b/scripts/vendor/icons/tabler/bucket.svg @@ -0,0 +1,20 @@ + + + + + diff --git a/scripts/vendor/icons/tabler/bug.svg b/scripts/vendor/icons/tabler/bug.svg new file mode 100644 index 0000000..791be9b --- /dev/null +++ b/scripts/vendor/icons/tabler/bug.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + diff --git a/scripts/vendor/icons/tabler/chart-line.svg b/scripts/vendor/icons/tabler/chart-line.svg new file mode 100644 index 0000000..6747e86 --- /dev/null +++ b/scripts/vendor/icons/tabler/chart-line.svg @@ -0,0 +1,20 @@ + + + + + diff --git a/scripts/vendor/icons/tabler/cloud.svg b/scripts/vendor/icons/tabler/cloud.svg new file mode 100644 index 0000000..dc277b6 --- /dev/null +++ b/scripts/vendor/icons/tabler/cloud.svg @@ -0,0 +1,19 @@ + + + + diff --git a/scripts/vendor/icons/tabler/cube.svg b/scripts/vendor/icons/tabler/cube.svg new file mode 100644 index 0000000..fe57d91 --- /dev/null +++ b/scripts/vendor/icons/tabler/cube.svg @@ -0,0 +1,22 @@ + + + + + + + diff --git a/scripts/vendor/icons/tabler/database.svg b/scripts/vendor/icons/tabler/database.svg new file mode 100644 index 0000000..2f6a00f --- /dev/null +++ b/scripts/vendor/icons/tabler/database.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/scripts/vendor/icons/tabler/device-desktop.svg b/scripts/vendor/icons/tabler/device-desktop.svg new file mode 100644 index 0000000..342f886 --- /dev/null +++ b/scripts/vendor/icons/tabler/device-desktop.svg @@ -0,0 +1,22 @@ + + + + + + + diff --git a/scripts/vendor/icons/tabler/device-floppy.svg b/scripts/vendor/icons/tabler/device-floppy.svg new file mode 100644 index 0000000..598874e --- /dev/null +++ b/scripts/vendor/icons/tabler/device-floppy.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/scripts/vendor/icons/tabler/device-laptop.svg b/scripts/vendor/icons/tabler/device-laptop.svg new file mode 100644 index 0000000..b757ebd --- /dev/null +++ b/scripts/vendor/icons/tabler/device-laptop.svg @@ -0,0 +1,20 @@ + + + + + diff --git a/scripts/vendor/icons/tabler/device-mobile.svg b/scripts/vendor/icons/tabler/device-mobile.svg new file mode 100644 index 0000000..6cbe33b --- /dev/null +++ b/scripts/vendor/icons/tabler/device-mobile.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/scripts/vendor/icons/tabler/device-sd-card.svg b/scripts/vendor/icons/tabler/device-sd-card.svg new file mode 100644 index 0000000..3d9b165 --- /dev/null +++ b/scripts/vendor/icons/tabler/device-sd-card.svg @@ -0,0 +1,22 @@ + + + + + + + diff --git a/scripts/vendor/icons/tabler/door-enter.svg b/scripts/vendor/icons/tabler/door-enter.svg new file mode 100644 index 0000000..ca300a1 --- /dev/null +++ b/scripts/vendor/icons/tabler/door-enter.svg @@ -0,0 +1,22 @@ + + + + + + + diff --git a/scripts/vendor/icons/tabler/file-text.svg b/scripts/vendor/icons/tabler/file-text.svg new file mode 100644 index 0000000..10f097c --- /dev/null +++ b/scripts/vendor/icons/tabler/file-text.svg @@ -0,0 +1,23 @@ + + + + + + + + diff --git a/scripts/vendor/icons/tabler/file-type-csv.svg b/scripts/vendor/icons/tabler/file-type-csv.svg new file mode 100644 index 0000000..91992d4 --- /dev/null +++ b/scripts/vendor/icons/tabler/file-type-csv.svg @@ -0,0 +1,23 @@ + + + + + + + + diff --git a/scripts/vendor/icons/tabler/file-type-txt.svg b/scripts/vendor/icons/tabler/file-type-txt.svg new file mode 100644 index 0000000..32acaa7 --- /dev/null +++ b/scripts/vendor/icons/tabler/file-type-txt.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + diff --git a/scripts/vendor/icons/tabler/file-type-xls.svg b/scripts/vendor/icons/tabler/file-type-xls.svg new file mode 100644 index 0000000..67bb29f --- /dev/null +++ b/scripts/vendor/icons/tabler/file-type-xls.svg @@ -0,0 +1,24 @@ + + + + + + + + + diff --git a/scripts/vendor/icons/tabler/file.svg b/scripts/vendor/icons/tabler/file.svg new file mode 100644 index 0000000..ea942f3 --- /dev/null +++ b/scripts/vendor/icons/tabler/file.svg @@ -0,0 +1,20 @@ + + + + + diff --git a/scripts/vendor/icons/tabler/git-branch.svg b/scripts/vendor/icons/tabler/git-branch.svg new file mode 100644 index 0000000..8cf2769 --- /dev/null +++ b/scripts/vendor/icons/tabler/git-branch.svg @@ -0,0 +1,24 @@ + + + + + + + + + diff --git a/scripts/vendor/icons/tabler/git-merge.svg b/scripts/vendor/icons/tabler/git-merge.svg new file mode 100644 index 0000000..ef4ad6d --- /dev/null +++ b/scripts/vendor/icons/tabler/git-merge.svg @@ -0,0 +1,23 @@ + + + + + + + + diff --git a/scripts/vendor/icons/tabler/hexagon.svg b/scripts/vendor/icons/tabler/hexagon.svg new file mode 100644 index 0000000..92501aa --- /dev/null +++ b/scripts/vendor/icons/tabler/hexagon.svg @@ -0,0 +1,19 @@ + + + + diff --git a/scripts/vendor/icons/tabler/key.svg b/scripts/vendor/icons/tabler/key.svg new file mode 100644 index 0000000..7423ac8 --- /dev/null +++ b/scripts/vendor/icons/tabler/key.svg @@ -0,0 +1,20 @@ + + + + + diff --git a/scripts/vendor/icons/tabler/lock.svg b/scripts/vendor/icons/tabler/lock.svg new file mode 100644 index 0000000..ee42eee --- /dev/null +++ b/scripts/vendor/icons/tabler/lock.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/scripts/vendor/icons/tabler/package.svg b/scripts/vendor/icons/tabler/package.svg new file mode 100644 index 0000000..c49b368 --- /dev/null +++ b/scripts/vendor/icons/tabler/package.svg @@ -0,0 +1,23 @@ + + + + + + + + diff --git a/scripts/vendor/icons/tabler/refresh.svg b/scripts/vendor/icons/tabler/refresh.svg new file mode 100644 index 0000000..40f59f7 --- /dev/null +++ b/scripts/vendor/icons/tabler/refresh.svg @@ -0,0 +1,20 @@ + + + + + diff --git a/scripts/vendor/icons/tabler/robot.svg b/scripts/vendor/icons/tabler/robot.svg new file mode 100644 index 0000000..7bbc2ce --- /dev/null +++ b/scripts/vendor/icons/tabler/robot.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + diff --git a/scripts/vendor/icons/tabler/rocket.svg b/scripts/vendor/icons/tabler/rocket.svg new file mode 100644 index 0000000..94267f6 --- /dev/null +++ b/scripts/vendor/icons/tabler/rocket.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/scripts/vendor/icons/tabler/search.svg b/scripts/vendor/icons/tabler/search.svg new file mode 100644 index 0000000..78f3109 --- /dev/null +++ b/scripts/vendor/icons/tabler/search.svg @@ -0,0 +1,20 @@ + + + + + diff --git a/scripts/vendor/icons/tabler/server.svg b/scripts/vendor/icons/tabler/server.svg new file mode 100644 index 0000000..1266679 --- /dev/null +++ b/scripts/vendor/icons/tabler/server.svg @@ -0,0 +1,22 @@ + + + + + + + diff --git a/scripts/vendor/icons/tabler/shield-lock.svg b/scripts/vendor/icons/tabler/shield-lock.svg new file mode 100644 index 0000000..12ae407 --- /dev/null +++ b/scripts/vendor/icons/tabler/shield-lock.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/scripts/vendor/icons/tabler/sql.svg b/scripts/vendor/icons/tabler/sql.svg new file mode 100644 index 0000000..0ebde42 --- /dev/null +++ b/scripts/vendor/icons/tabler/sql.svg @@ -0,0 +1,22 @@ + + + + + + + diff --git a/scripts/vendor/icons/tabler/stack-2.svg b/scripts/vendor/icons/tabler/stack-2.svg new file mode 100644 index 0000000..5af5c9b --- /dev/null +++ b/scripts/vendor/icons/tabler/stack-2.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/scripts/vendor/icons/tabler/tag.svg b/scripts/vendor/icons/tabler/tag.svg new file mode 100644 index 0000000..bb5fe21 --- /dev/null +++ b/scripts/vendor/icons/tabler/tag.svg @@ -0,0 +1,20 @@ + + + + + diff --git a/scripts/vendor/icons/tabler/terminal.svg b/scripts/vendor/icons/tabler/terminal.svg new file mode 100644 index 0000000..b270261 --- /dev/null +++ b/scripts/vendor/icons/tabler/terminal.svg @@ -0,0 +1,20 @@ + + + + + diff --git a/scripts/vendor/icons/tabler/test-pipe.svg b/scripts/vendor/icons/tabler/test-pipe.svg new file mode 100644 index 0000000..2a0e98a --- /dev/null +++ b/scripts/vendor/icons/tabler/test-pipe.svg @@ -0,0 +1,22 @@ + + + + + + + diff --git a/scripts/vendor/icons/tabler/topology-star.svg b/scripts/vendor/icons/tabler/topology-star.svg new file mode 100644 index 0000000..2186404 --- /dev/null +++ b/scripts/vendor/icons/tabler/topology-star.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + diff --git a/scripts/vendor/icons/tabler/user-shield.svg b/scripts/vendor/icons/tabler/user-shield.svg new file mode 100644 index 0000000..67e0851 --- /dev/null +++ b/scripts/vendor/icons/tabler/user-shield.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/scripts/vendor/icons/tabler/user.svg b/scripts/vendor/icons/tabler/user.svg new file mode 100644 index 0000000..3f687db --- /dev/null +++ b/scripts/vendor/icons/tabler/user.svg @@ -0,0 +1,20 @@ + + + + + diff --git a/scripts/vendor/icons/tabler/users.svg b/scripts/vendor/icons/tabler/users.svg new file mode 100644 index 0000000..b870141 --- /dev/null +++ b/scripts/vendor/icons/tabler/users.svg @@ -0,0 +1,22 @@ + + + + + + + diff --git a/scripts/vendor/icons/tabler/wall.svg b/scripts/vendor/icons/tabler/wall.svg new file mode 100644 index 0000000..9cb05a8 --- /dev/null +++ b/scripts/vendor/icons/tabler/wall.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + diff --git a/scripts/vendor/icons/tabler/world-cog.svg b/scripts/vendor/icons/tabler/world-cog.svg new file mode 100644 index 0000000..db7abfc --- /dev/null +++ b/scripts/vendor/icons/tabler/world-cog.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + diff --git a/scripts/vendor/icons/tabler/world-www.svg b/scripts/vendor/icons/tabler/world-www.svg new file mode 100644 index 0000000..23ced18 --- /dev/null +++ b/scripts/vendor/icons/tabler/world-www.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + diff --git a/scripts/vendor/icons/tabler/world.svg b/scripts/vendor/icons/tabler/world.svg new file mode 100644 index 0000000..9f2fe14 --- /dev/null +++ b/scripts/vendor/icons/tabler/world.svg @@ -0,0 +1,23 @@ + + + + + + + + diff --git a/scripts/vendor/icons/url/dagster.svg b/scripts/vendor/icons/url/dagster.svg new file mode 100644 index 0000000..b5a601c --- /dev/null +++ b/scripts/vendor/icons/url/dagster.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/scripts/vendor/icons/url/hop.svg b/scripts/vendor/icons/url/hop.svg new file mode 100644 index 0000000..8afcb57 --- /dev/null +++ b/scripts/vendor/icons/url/hop.svg @@ -0,0 +1,53 @@ + +image/svg+xml + + diff --git a/scripts/vendor/icons/url/pentaho.svg b/scripts/vendor/icons/url/pentaho.svg new file mode 100644 index 0000000..570eaab --- /dev/null +++ b/scripts/vendor/icons/url/pentaho.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/scripts/vendor/icons/url/stata.svg b/scripts/vendor/icons/url/stata.svg new file mode 100644 index 0000000..508b412 --- /dev/null +++ b/scripts/vendor/icons/url/stata.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/skills/diagram-design/SKILL.md b/skills/diagram-design/SKILL.md index 1104423..c75671a 100644 --- a/skills/diagram-design/SKILL.md +++ b/skills/diagram-design/SKILL.md @@ -1,16 +1,16 @@ --- name: diagram-design -description: Create technical and product diagrams — architecture, flowchart, sequence, state machine, ER / data model, timeline, swimlane, quadrant, nested, tree, org chart, layer stack, venn, pyramid — as standalone HTML files with inline SVG. Ships with a neutral editorial skin and a first-run gate that prompts users to customize the style guide (colors, fonts) from their own website before generating. Includes annotation-callout primitive and optional sketchy variant. +description: Create technical and product diagrams — architecture, IT current-state, flowchart, sequence, state machine, ER / data model, timeline, swimlane, quadrant, radar / spider, nested, tree, org chart, layer stack, venn, pyramid / funnel, bar chart, line chart, Gantt, scatter plot, high-level, process, medallion, data flow, DP integration, DP security matrix — as standalone HTML files with inline SVG. Ships with a neutral editorial skin and a first-run gate that prompts users to customize the style guide (colors, fonts) from their own website before generating. Includes annotation-callout primitive and optional sketchy variant. license: MIT metadata: - version: "1.0" + version: "2.0" --- # Diagram Design Create visual diagrams as self-contained HTML files with inline SVG and CSS, following an opinionated editorial design system. -Fourteen diagram types. One shared design system, complexity budget, and taste gate. Type-specific conventions live in `references/` and are loaded only when you pick a type. +Twenty-six diagram types. One shared design system, complexity budget, and taste gate. Type-specific conventions live in `references/` and are loaded only when you pick a type. --- @@ -20,12 +20,15 @@ Fourteen diagram types. One shared design system, complexity budget, and taste g Open [`references/style-guide.md`](references/style-guide.md) and check the default tokens. If they're still the shipped defaults (paper `#faf7f2`, ink `#1c1917`, accent `#b5523a` rust), **pause and ask the user**: -> *"This is your first Schematic in this project. The style guide is still at the default (neutral stone + rust). Do you want to customize it to match your brand first? Options: (a) run onboarding — I'll pull colors and fonts from your website, (b) paste your tokens manually, (c) proceed with the default for now."* +> *"This is your first Schematic in this project. The style guide is still at the default (neutral stone + rust). Do you want to customize it to match your brand first? Options: (a) pull from your website URL, (b) extract from an installed skill, (c) extract from a local folder / design-system directory, (d) paste tokens manually, (e) proceed with the default for now."* Then branch: -- **(a)** → follow [`references/onboarding.md`](references/onboarding.md) to fetch the site, extract palette + fonts, propose a diff, and write `style-guide.md`. -- **(b)** → accept the user's tokens and write them into `style-guide.md` under a new "Custom tokens" section. -- **(c)** → proceed; optionally remind the user they can run onboarding later. + +- **(a)** → follow [`references/onboarding.md § URL`](references/onboarding.md) to fetch the site, extract palette + fonts, propose a diff, and write `style-guide.md`. +- **(b)** → follow [`references/onboarding.md § Skill`](references/onboarding.md) — ask which skill, read its SKILL.md / CSS / token files, map to semantic roles, propose diff. +- **(c)** → follow [`references/onboarding.md § Folder`](references/onboarding.md) — ask for the path, glob for CSS/JSON/MD token files, map to semantic roles, propose diff. +- **(d)** → accept the user's tokens and write them into `style-guide.md` under a new "Custom tokens" section. +- **(e)** → proceed; optionally remind the user they can run onboarding later. **Once the style guide has been customized** (or the user explicitly opted for default), skip this gate on subsequent runs. A simple way to detect customization: if the `accent` value in `style-guide.md` differs from `#b5523a`, assume custom. @@ -40,6 +43,7 @@ Don't silently ship default-skinned diagrams into a branded project — that's t From `.impeccable.md`: *"Confident restraint. Earn every element. One color accent, two families, a small spacing vocabulary. If removing it wouldn't hurt the page, remove it."* Applied to schematics: + - Every node represents a distinct idea. Two nodes that always travel together are one node. - Every connection carries information. If the relationship is obvious from layout, remove the line. - Coral is **editorial, not a flag.** 1–2 focal nodes per diagram. Using it on 5 nodes erases the signal. @@ -51,9 +55,10 @@ Applied to schematics: ## 2. When to Use -Use for any of the 14 diagram types (§3) when a reader will learn more from a visual than from prose, a table, or a bulleted list. +Use for any of the 26 diagram types (§3) when a reader will learn more from a visual than from prose, a table, or a bulleted list. **Don't use for:** + - Quick unicode diagrams → use **wiretext**. - Lists of things → table or bullets. - Simple before/after → table. @@ -70,6 +75,7 @@ Before drawing, ask: *Would the reader learn more from this than from a well-wri | If you're showing… | Use | Reference | |---|---|---| | Components + connections in a system | **Architecture** | [type-architecture.md](references/type-architecture.md) | +| Legacy IT landscape grouped by phase/department; documents the *before* state in modernization proposals | **IT current-state** | [type-it-state.md](references/type-it-state.md) | | Decision logic with branches | **Flowchart** | [type-flowchart.md](references/type-flowchart.md) | | Time-ordered messages between actors | **Sequence** | [type-sequence.md](references/type-sequence.md) | | States + transitions + guards | **State machine** | [type-state.md](references/type-state.md) | @@ -77,14 +83,26 @@ Before drawing, ask: *Would the reader learn more from this than from a well-wri | Events positioned in time | **Timeline** | [type-timeline.md](references/type-timeline.md) | | Cross-functional process with handoffs | **Swimlane** | [type-swimlane.md](references/type-swimlane.md) | | Two-axis positioning / prioritization | **Quadrant** | [type-quadrant.md](references/type-quadrant.md) | +| Multiple entities scored across 3–5 quantitative criteria | **Radar / Spider** | [type-radar.md](references/type-radar.md) | | Hierarchy through containment / scope | **Nested** | [type-nested.md](references/type-nested.md) | | Parent → children relationships | **Tree** | [type-tree.md](references/type-tree.md) | | Human/agent/team ownership, reporting, routing, escalation | **Org chart** | [type-org-chart.md](references/type-org-chart.md) | | Stacked abstraction levels | **Layer stack** | [type-layers.md](references/type-layers.md) | | Overlap between sets | **Venn** | [type-venn.md](references/type-venn.md) | | Ranked hierarchy or conversion drop-off | **Pyramid / funnel** | [type-pyramid.md](references/type-pyramid.md) | +| Quantitative comparison across categories | **Bar chart** | [type-bar.md](references/type-bar.md) | +| Continuous trends over time | **Line chart** | [type-line.md](references/type-line.md) | +| Tasks and phases on a timeline | **Gantt** | [type-gantt.md](references/type-gantt.md) | +| Distribution and correlation between two variables | **Scatter plot** | [type-scatter.md](references/type-scatter.md) | +| End-to-end data stack on a container cluster | **High-Level** | [type-high-level.md](references/type-high-level.md) | +| Multi-actor sequential process with data handoffs | **Process** | [type-process.md](references/type-process.md) | +| Multi-tier data storage with quality levels and access policies | **Medallion** | [type-medallion.md](references/type-medallion.md) | +| Role-scoped data flow: who does what at each pipeline step | **Data flow** | [type-data-flow.md](references/type-data-flow.md) | +| Integration topology of a data platform — sources → core → consumers | **DP integration** | [type-dp-integration.md](references/type-dp-integration.md) | +| Per-role / per-component access permissions matrix | **DP security matrix** | [type-dp-security-matrix.md](references/type-dp-security-matrix.md) | Rules of thumb: + - If a 3-column table communicates the same thing, pick the table. - If you're combining two types, pick the dominant axis — don't hybridize grammars. - If you're past the complexity budget (§7), split into an overview + detail. @@ -109,6 +127,11 @@ These mark "AI slop" schematics of any type: | Shadow on any element | Shadows are out. Borders are in. | | `rounded-2xl` on boxes | Max radius 6–10px or none | | Coral on every "important" node | Coral is 1–2 editorial accents, not a signaling system | +| Diagonal / slanted connectors between off-axis nodes | Rounded right-angle (orthogonal) elbows are mandatory — see §6 Mandatory connector rules | +| Arrow label sitting on or touching its connector | Label must have a 6–10px gap above the line so the connector stays visible | +| Two connectors overlapping or running on the same path | Each connection must be independently traceable — bridge crossings, offset parallels | +| Two connectors sharing a single attach point on a box | Fan attach points along the edge (≥12px apart) so every arrow is clearly distinct — see §6 rule 4 | +| Connector routed behind a non-endpoint box without need | Reroute around intervening boxes; the dashed-transit exception (§6 rule 5) only applies when an unavoidable intervening box sits on the direct path | Type-specific anti-patterns live in each `references/type-*.md`. @@ -165,8 +188,10 @@ Type-specific anti-patterns live in each `references/type-*.md`. ## 6. Core SVG Primitives Universal building blocks. Type-specialized primitives (lifeline, activation bar, region) live in the relevant `references/type-*.md`. Optional primitives: + - Editorial callouts → [primitive-annotation.md](references/primitive-annotation.md) - Hand-drawn variant → [primitive-sketchy.md](references/primitive-sketchy.md) +- Icon set (laptop, server, DB, K8s, Docker, AWS, …) → [primitive-icons.md](references/primitive-icons.md). Browse the gallery at [`assets/icons.html`](../assets/icons.html). ### Background @@ -213,6 +238,30 @@ Don't use the dot pattern when the diagram sits inside a product page, slide, or **Draw arrows before boxes** so z-order puts lines behind nodes. +### Mandatory connector rules + +These five rules are **non-negotiable**. Run the pre-output checklist (§9) to verify before producing any diagram. + +1. **Rounded right-angle (orthogonal) connectors are mandatory.** Never use diagonal `` or straight slanted paths between nodes that don't share an x or y axis. Every bend must be a quarter-arc with `r=8` (or `r=6` minimum for tight layouts). See `references/type-architecture.md` for the elbow-path formula. Reserve plain straight `` only for connections whose endpoints share the same x or y coordinate. Diagonal connectors are an automatic fail. + +2. **Label-to-connector margin: 6–10px gap, always.** A label must never sit *on* its arrow — the connector must remain visible. Place the label centered above (or beside, for vertical segments) the line with a **minimum 6px gap** between the bottom of the label's mask rect and the connector stroke. The opaque mask rect prevents the arrow from bleeding through, but the *visible* gap between mask edge and line preserves the reader's ability to trace the connection. If the label is large enough that 6px feels cramped, push it to 8–10px. Never let the mask rect touch or overlap the stroke. + +3. **No overlapping connectors.** Two connectors must never share the same stroke path, run parallel on top of each other, or be drawn on top of each other for any segment. When two orthogonal arrows must cross at a single point, apply the **bridge / hop** primitive (see `references/type-architecture.md` § Crossing arrows). When two arrows naturally want to overlap, offset their routing by ≥12px so each line is independently traceable. If you find yourself stacking connectors, redesign the layout — it means two nodes are too close, or the diagram is over budget (split into overview + detail). + +4. **Shared edge → fan the attach points.** When two or more connectors enter or exit the *same edge* of a box, each must have its own distinct attach point along that edge — **no two connectors may share a single point on a box**. Spread the attach points evenly along the edge with **≥12px** between adjacent points (8px minimum for very small boxes). Routing rules: + - For N connectors on an edge of length L, attach point `k` (1..N) sits at offset `L * k / (N + 1)` from the edge's leading corner. + - When the connectors fan out to destinations on different sides, route each one orthogonally from its own attach point — no merging strokes near the box. + - When two parallel connectors run in the same direction, keep them ≥12px apart along their entire length, not just at the attach point. Each arrow must remain independently traceable end-to-end. + + No connector may hide another. If you can't tell two arrows apart at a glance, the layout has failed. + +5. **A connector must not pass behind a box that isn't its source or destination — except when the box is geometrically unavoidable on a direct orthogonal path.** Reroute around intervening boxes by default. The only legitimate exception is when a cross-cutting node (e.g., a footer service, a horizontal layer bar) physically sits between the connector's source and destination on the only straight path between them — for example, a `METRICS` arrow exiting an `Observability` footer bar and rising into a zone above must cross the `Active Directory` footer bar that sits between them. In that exception: + - The stroke must be **dashed** (e.g., `stroke-dasharray="4,3"`) to signal "transit, not interaction" — it tells the reader the intervening box is not an endpoint. + - The label sits at the **visible end** of the connector (typically near the source) so it doesn't fall behind the intervening box. + - No marker (arrowhead) may land on the intervening box's edge — the marker resolves at the true destination only. + + When in doubt, reroute. The exception exists for the narrow case where rerouting is geometrically impossible, not as a shortcut to avoid layout work. + ### Node box — full pattern ```svg @@ -232,17 +281,23 @@ Don't use the dot pattern when the diagram sits inside a product page, slide, or font-family="'Geist Mono', monospace" text-anchor="middle">tech:port ``` -### Arrow labels — always mask +### Arrow labels — always mask, always with margin -Every arrow label needs an opaque rect behind it. Without one it bleeds through the line. +Every arrow label needs an opaque rect behind it. Without one it bleeds through the line. **And the label must sit with a visible gap above the connector — never on top of it.** ```svg - - + +WRITE ``` -Rules: ≤14 characters, all-caps, centered on segment midpoint, 8–10px above line. Never `writing-mode` vertical. +Rules: + +- ≤14 characters, all-caps, centered on segment midpoint. +- **Mandatory 6–10px gap** between the bottom of the mask rect and the arrow stroke. The connector must remain visible — a label that hides its own arrow is a hard fail. +- Never `writing-mode` vertical. +- For vertical segments, place the label to the side (not on the line) with the same 6–10px horizontal gap. ### Legend — horizontal strip at the bottom @@ -297,6 +352,13 @@ Quick check: if a coordinate ends in 1, 2, 3, 5, 6, 7, 9 — fix it. | Max layers (layer stack) | 6 | | Max circles (venn) | 3 | | Max layers (pyramid) | 6 | +| Max radar axes | 5 | +| Max radar series | 5 | +| Max focal radar series | 1 | +| Max bars (bar chart) | 8 | +| Max series (line chart) | 5 | +| Max tasks (Gantt) | 12 | +| Max points (scatter plot) | 30 | | Max annotation callouts | 2 | If you exceed, split into two diagrams (overview + detail). @@ -326,6 +388,7 @@ Don't use 3 identical generic cards. Vary the treatment: ``` Rules: + - `background: #ffffff` (not paper — slight lift without shadow) - `border: 1px solid rgba(45,49,66,0.12)` - `border-radius: 6px`, `padding: 1.25rem` @@ -339,23 +402,32 @@ Rules: Run before producing any diagram. **Type fit:** + - [ ] Right type for what I'm showing? (§3 selection guide) - [ ] Would a table / paragraph do the same job? (If yes — don't draw.) - [ ] Loaded the matching `references/type-*.md`? **Remove test:** + - [ ] Can I remove any node? (Would a reader still understand?) - [ ] Can I merge any two nodes? (Do they always travel together?) - [ ] Can I remove any arrow? (Is the relationship obvious from layout?) - [ ] Can I remove any label? (Does color or shape already signal it?) **Signal:** + - [ ] Coral used on ≤2 elements? If more, which actually deserve focal status? - [ ] Legend covers every type used — and nothing extra? - [ ] Within the type's complexity budget (§7)? **Technical:** + - [ ] Arrows drawn before boxes? +- [ ] **Every connector between off-axis nodes uses a rounded right-angle elbow (`r=8`)? No diagonal `` slants?** +- [ ] **Every arrow label has a visible 6–10px gap above its connector? (Mask rect not touching the stroke.)** +- [ ] **No two connectors overlap, share a stroke path, or run on top of each other? Crossings use the bridge/hop primitive?** +- [ ] **When several connectors enter or exit the same edge of a box, each has its own attach point (≥12px apart)? No connector hides another?** +- [ ] **No connector passes behind a non-endpoint box, except the unavoidable-intervening-box case (§6 rule 5) — and in that case, the stroke is dashed and the label sits at the visible end?** - [ ] Every arrow label has an opaque `fill="#f5f5f5"` rect behind it? - [ ] Legend is a horizontal bottom strip, not floating? - [ ] No vertical `writing-mode` text? @@ -363,6 +435,7 @@ Run before producing any diagram. - [ ] Every font size, coord, width, height, gap divisible by 4? **Typography:** + - [ ] Human-readable names in Geist sans, not Geist Mono? - [ ] Technical sublabels (ports, commands, URLs) in Geist Mono? - [ ] Page title in Instrument Serif? @@ -396,8 +469,13 @@ Every diagram ships in three variants (see `assets/`): ## 11. Output Always produce a single self-contained `.html` file: + - Embedded CSS (no external except Google Fonts) - Inline SVG (no external images) - No JavaScript required Renders correctly in any modern browser. + +### Exporting to PNG / SVG + +When the user asks to export, save, rasterize, or convert a generated diagram to `.png` or `.svg`, load [`references/export.md`](references/export.md) and follow the procedure there. Both formats deliver the diagram only (the `` node) — editorial wrappers like cards and headers are dropped by design. Export is **manual** — never produce export files unprompted. diff --git a/skills/diagram-design/assets/example-architecture-dark.html b/skills/diagram-design/assets/example-architecture-dark.html index f82abf3..186d97a 100644 --- a/skills/diagram-design/assets/example-architecture-dark.html +++ b/skills/diagram-design/assets/example-architecture-dark.html @@ -71,24 +71,39 @@ + + + + CONTENT + - - + + + + + HTTPS + + RESP + SSR - - READ MDX + + READ MDX - - QUERY + + QUERY @@ -156,6 +171,9 @@ Primary flow + + + Return / async diff --git a/skills/diagram-design/assets/example-architecture-full.html b/skills/diagram-design/assets/example-architecture-full.html index e302710..6b89738 100644 --- a/skills/diagram-design/assets/example-architecture-full.html +++ b/skills/diagram-design/assets/example-architecture-full.html @@ -61,24 +61,39 @@ + + + + CONTENT + - - + + + + + HTTPS + + RESP + SSR - - READ MDX + + READ MDX - - QUERY + + QUERY @@ -146,6 +161,9 @@ Primary flow + + + Return / async diff --git a/skills/diagram-design/assets/example-architecture.html b/skills/diagram-design/assets/example-architecture.html index e9d32fe..506a625 100644 --- a/skills/diagram-design/assets/example-architecture.html +++ b/skills/diagram-design/assets/example-architecture.html @@ -71,24 +71,40 @@ + + + + CONTENT + - - + + + + + + HTTPS + + RESP + SSR - - READ MDX + + READ MDX - - QUERY + + QUERY @@ -156,6 +172,9 @@ Primary flow + + + Return / async diff --git a/skills/diagram-design/assets/example-bar-dark.html b/skills/diagram-design/assets/example-bar-dark.html new file mode 100644 index 0000000..b140ef4 --- /dev/null +++ b/skills/diagram-design/assets/example-bar-dark.html @@ -0,0 +1,127 @@ + + + + + + Sprint velocity · Bar chart · dark + + + + +
+

Bar · Diagram Design

+

Sprint velocity · 8-sprint view

+ + + + + + + + + + + + + STORY POINTS + + + + + + + + + + + + + + + 20 + 40 + 60 + 80 + 100 + 120 + + + + + + 72 + + + + + 88 + + + + + 95 + + + + + 78 + + + + + 110 + + + + + 102 + + + + + 85 + + + + + 93 + + + S1 + S2 + S3 + S4 + S5 + S6 + S7 + S8 + + + + LEGEND + + + Sprint 5 · record high + + + Other sprints + +
+ + diff --git a/skills/diagram-design/assets/example-bar-full.html b/skills/diagram-design/assets/example-bar-full.html new file mode 100644 index 0000000..1763d82 --- /dev/null +++ b/skills/diagram-design/assets/example-bar-full.html @@ -0,0 +1,103 @@ + + + + + + Sprint velocity · Bar chart + + + + +
+
+

Bar · Diagram Design

+

Sprint velocity · 8-sprint view

+

Story points delivered per two-week sprint over one product cycle. Sprint 5 is the standout — a focused scope and no mid-sprint scope additions.

+
+
+ + + + + STORY POINTS + + + + + + + + + 20 + 40 + 60 + 80 + 100 + 120 + 72 + 88 + 95 + 78 + 110 + 102 + 85 + 93 + S1 + S2 + S3 + S4 + S5 + S6 + S7 + S8 + + LEGEND + + Sprint 5 · record high + + Other sprints + +
+
+
+

RECORD SPRINT

+

Sprint 5 · 110 points

+

No mid-sprint additions, zero carry-over from S4, and the team's highest-complexity stories were completed two days early. The bar is not the goal — the conditions are.

+
+
+

Trend: rising with one dip

+

Average across 8 sprints: 89 points. S4 dipped to 78 — a dependency on an external API that shipped late. Excluding S4, the underlying trajectory is +4 pts/sprint.

+
+
+

What the chart doesn't show

+

Story points measure scope delivered, not value shipped. S3 at 95 points included three stories that were deprioritised before the sprint ended — they don't appear in the count.

+
+
+ +
+ + diff --git a/skills/diagram-design/assets/example-bar.html b/skills/diagram-design/assets/example-bar.html new file mode 100644 index 0000000..3e08381 --- /dev/null +++ b/skills/diagram-design/assets/example-bar.html @@ -0,0 +1,127 @@ + + + + + + Sprint velocity · Bar chart + + + + +
+

Bar · Diagram Design

+

Sprint velocity · 8-sprint view

+ + + + + + + + + + + + + STORY POINTS + + + + + + + + + + + + + + + 20 + 40 + 60 + 80 + 100 + 120 + + + + + + 72 + + + + + 88 + + + + + 95 + + + + + 78 + + + + + 110 + + + + + 102 + + + + + 85 + + + + + 93 + + + S1 + S2 + S3 + S4 + S5 + S6 + S7 + S8 + + + + LEGEND + + + Sprint 5 · record high + + + Other sprints + +
+ + diff --git a/skills/diagram-design/assets/example-data-flow-dark.html b/skills/diagram-design/assets/example-data-flow-dark.html new file mode 100644 index 0000000..de914de --- /dev/null +++ b/skills/diagram-design/assets/example-data-flow-dark.html @@ -0,0 +1,143 @@ + + + + + + Analytics pipeline · Data flow · Dark + + + + +
+

Data flow · Diagram Design

+

Role-scoped analytics pipeline

+ + + Role-scoped analytics data flow + A Data Engineer ingests and stores commerce data, a Data Scientist transforms and analyzes it, and an Analyst publishes a dashboard. + + + + + + + + + + + + + + + + + + + + 01INGEST + 02STORE + 03TRANSFORM + 04ANALYZE + 05PUBLISH + + + + DATAENGINEER + DATASCIENTIST + ANALYTICSANALYST + + + + + + + + + RAW TABLE + + + + ENG + Capture Eventsshop events → batchNiFi ingest + LS + DB + + + + ENG + Land Recordsevents · ordersObject storage + DB + DB + + + + SCI + Clean & Modelraw → trusted tableTrino · notebooks + DB + TB + + + + SCI + Curate Metricsconversion · revenueTrino SQL + TB + TB + + + + ANL + Publish Dashboardmetrics → decisionsBI workspace + TB + FL + + + STEPS + 01Ingest + 02Store + 03Transform + 04Analyze + 05Publish + + + DATA TYPE + LSStream + DBDataset + TBTable + FLDashboard + left chip = input · right chip = output + + + FLOW + Standard handoff + Focal handoff + Published output + +
+ + diff --git a/skills/diagram-design/assets/example-data-flow-full.html b/skills/diagram-design/assets/example-data-flow-full.html new file mode 100644 index 0000000..fe8cd88 --- /dev/null +++ b/skills/diagram-design/assets/example-data-flow-full.html @@ -0,0 +1,185 @@ + + + + + + Analytics pipeline · Data flow · Full + + + + +
+
+

Data flow · Diagram Design

+

Role-scoped analytics pipeline

+

Typed commerce data crosses clear ownership boundaries: engineering lands it, data science makes it trustworthy, and analytics publishes it.

+
+ +
+ + Role-scoped analytics data flow + A Data Engineer ingests and stores commerce data, a Data Scientist transforms and analyzes it, and an Analyst publishes a dashboard. + + + + + + + + + + + + + + + + + + + + 01INGEST + 02STORE + 03TRANSFORM + 04ANALYZE + 05PUBLISH + + + + DATAENGINEER + DATASCIENTIST + ANALYTICSANALYST + + + + + + + + + RAW TABLE + + + + ENG + Capture Eventsshop events → batchNiFi ingest + LS + DB + + + + ENG + Land Recordsevents · ordersObject storage + DB + DB + + + + SCI + Clean & Modelraw → trusted tableTrino · notebooks + DB + TB + + + + SCI + Curate Metricsconversion · revenueTrino SQL + TB + TB + + + + ANL + Publish Dashboardmetrics → decisionsBI workspace + TB + FL + + + STEPS + 01Ingest + 02Store + 03Transform + 04Analyze + 05Publish + + + DATA TYPE + LSStream + DBDataset + TBTable + FLDashboard + left chip = input · right chip = output + + + FLOW + Standard handoff + Focal handoff + Published output + +
+ +
+
+

THE HANDOFF

+

Raw becomes analysis-ready

+

The focal handoff marks the moment stored records become a trusted table owned by data science.

+
+
+

Roles stay explicit

+
  • Data Engineer ingests and lands
  • Data Scientist transforms and models
  • Analyst publishes the dashboard
+
+
+

Payloads explain change

+

Left and right chips show the input and output type at every active pipeline step.

+
+
+ +
+ commerce analytics · data flow + example · schematic skill +
+
+ + diff --git a/skills/diagram-design/assets/example-data-flow.html b/skills/diagram-design/assets/example-data-flow.html new file mode 100644 index 0000000..6cdff4a --- /dev/null +++ b/skills/diagram-design/assets/example-data-flow.html @@ -0,0 +1,143 @@ + + + + + + Analytics pipeline · Data flow + + + + +
+

Data flow · Diagram Design

+

Role-scoped analytics pipeline

+ + + Role-scoped analytics data flow + A Data Engineer ingests and stores commerce data, a Data Scientist transforms and analyzes it, and an Analyst publishes a dashboard. + + + + + + + + + + + + + + + + + + + + 01INGEST + 02STORE + 03TRANSFORM + 04ANALYZE + 05PUBLISH + + + + DATAENGINEER + DATASCIENTIST + ANALYTICSANALYST + + + + + + + + + RAW TABLE + + + + ENG + Capture Eventsshop events → batchNiFi ingest + LS + DB + + + + ENG + Land Recordsevents · ordersObject storage + DB + DB + + + + SCI + Clean & Modelraw → trusted tableTrino · notebooks + DB + TB + + + + SCI + Curate Metricsconversion · revenueTrino SQL + TB + TB + + + + ANL + Publish Dashboardmetrics → decisionsBI workspace + TB + FL + + + STEPS + 01Ingest + 02Store + 03Transform + 04Analyze + 05Publish + + + DATA TYPE + LSStream + DBDataset + TBTable + FLDashboard + left chip = input · right chip = output + + + FLOW + Standard handoff + Focal handoff + Published output + +
+ + diff --git a/skills/diagram-design/assets/example-datalake-dark.html b/skills/diagram-design/assets/example-datalake-dark.html new file mode 100644 index 0000000..137974d --- /dev/null +++ b/skills/diagram-design/assets/example-datalake-dark.html @@ -0,0 +1,241 @@ + + + + + + Open data lake · Architecture + + + + +
+

Architecture · Diagram Design

+

Open data lake · End-to-end stack

+ + + + + + + + + + + + + + + + + + + + + + + + SOURCES + INGEST + DATA LAKE + QUERY + CONSUME + + + + + + + + + + + + SQL + + + + + + + + + WRITE + + + + + + EXT + + + + + + App servers + Events · logs + + + + + + EXT + + + + + + Databases + CDC · exports + + + + + + FLOW + + + + Apache NiFi + Route · transform + + + + + + ORCH + + + + Airflow + DAG scheduling + + + + + + STORE + + + + MinIO + Object store · S3-API + + + + + + QUERY + + + + Trino + SQL · any format + + + + + + OLAP + + + + + + + StarRocks + MPP · hot layer + + + + + + BI + + + + Superset + Dashboards + + + + + + NB + + + + JupyterLab + Exploration + + + + + + PROC + + + + Python + Batch · ML + + + LEGEND + + + MinIO data lake (focal) + + + Ingest · query tools + + + BI · notebooks · pipelines + + + Write-back path (batch) + + + Primary query path + +
+ + diff --git a/skills/diagram-design/assets/example-datalake-full.html b/skills/diagram-design/assets/example-datalake-full.html new file mode 100644 index 0000000..85608d0 --- /dev/null +++ b/skills/diagram-design/assets/example-datalake-full.html @@ -0,0 +1,246 @@ + + + + + + Open data lake · Architecture + + + + +
+
+

Architecture · Diagram Design

+

Open data lake · End-to-end stack

+

Five functional zones from raw event ingestion to analytics consumption. MinIO is the focal centre — every other tool either lands data into it or reads out of it.

+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + SOURCES + INGEST + DATA LAKE + QUERY + CONSUME + + + + + + + + + SQL + + + + + + + WRITE + + + + + EXT + + + + + + App servers + Events · logs + + + + + EXT + + + + + + Databases + CDC · exports + + + + + FLOW + + + + Apache NiFi + Route · transform + + + + + ORCH + + + + Airflow + DAG scheduling + + + + + STORE + + + + MinIO + Object store · S3-API + + + + + QUERY + + + + Trino + SQL · any format + + + + + OLAP + + + + + + + StarRocks + MPP · hot layer + + + + + BI + + + + Superset + Dashboards + + + + + NB + + + + JupyterLab + Exploration + + + + + PROC + + + + Python + Batch · ML + + + LEGEND + + MinIO data lake (focal) + + Ingest · query tools + + BI · notebooks · pipelines + + Write-back path (batch) + + Primary query path + +
+ +
+
+

FOCAL · STORAGE

+

MinIO — data lake core

+

S3-compatible object storage. Every tool in the stack either lands data here or reads from it. All formats land as raw files; Iceberg table metadata sits alongside them. When in doubt, write to MinIO.

+
+
+

Ingest — NiFi + Airflow

+
    +
  • NiFi: real-time routing, record-level transformation, CDC fan-out
  • +
  • Airflow: batch scheduling, cross-system DAGs, retry semantics
  • +
  • Two tools, two tempos — they complement rather than replace each other
  • +
+
+
+

Query — Trino + StarRocks

+
    +
  • Trino: federated ad-hoc SQL across any file format, any catalog
  • +
  • StarRocks: sub-second MPP for hot partitions and dashboard queries
  • +
  • Different latency budgets, same underlying lake
  • +
+
+
+

Consume

+

Superset for dashboards, JupyterLab for exploration, Python for batch ML. All three can write processed results back to MinIO via the dashed write-back path.

+
+
+ + +
+ + diff --git a/skills/diagram-design/assets/example-datalake.html b/skills/diagram-design/assets/example-datalake.html new file mode 100644 index 0000000..9c1e268 --- /dev/null +++ b/skills/diagram-design/assets/example-datalake.html @@ -0,0 +1,267 @@ + + + + + + Open data lake · Architecture + + + + +
+

Architecture · Diagram Design

+

Open data lake · End-to-end stack

+ + + + + + + + + + + + + + + + + + + + + + + + + + + SOURCES + INGEST + DATA LAKE + QUERY + CONSUME + + + + + + + + + + + + + + + + + + + + + SQL + + + + + + + + + + + + + + WRITE + + + + + + + + EXT + + + + + + App servers + Events · logs + + + + + + EXT + + + + + + Databases + CDC · exports + + + + + + FLOW + + + + Apache NiFi + Route · transform + + + + + + ORCH + + + + Airflow + DAG scheduling + + + + + + STORE + + + + MinIO + Object store · S3-API + + + + + + QUERY + + + + Trino + SQL · any format + + + + + + OLAP + + + + + + + StarRocks + MPP · hot layer + + + + + + BI + + + + Superset + Dashboards + + + + + + NB + + + + JupyterLab + Exploration + + + + + + PROC + + + + Python + Batch · ML + + + + LEGEND + + + MinIO data lake (focal) + + + Ingest · query tools + + + BI · notebooks · pipelines + + + Write-back path (batch) + + + Primary query path + +
+ + diff --git a/skills/diagram-design/assets/example-dp-integration-dark.html b/skills/diagram-design/assets/example-dp-integration-dark.html new file mode 100644 index 0000000..4bd2da2 --- /dev/null +++ b/skills/diagram-design/assets/example-dp-integration-dark.html @@ -0,0 +1,78 @@ + + + + + + Generic data platform · Integration topology (dark) + + + + +
+

DP Integration · Diagram Design

+

Generic data platform integration topology

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + RESTCSVEVENTSREADJDBCKERNELHTTPS + AUTHAUTH + + DATA PLATFORM + + + CRMcustomer records + POS exportsdaily CSV batches + Event streamnear-real-time events + + + DAGOrchestratorschedules · retries · lineage + STOREObject storageversioned data objects + SQLQuery enginefederated SQL access + + + BI tooldashboards · reports + NotebooksPython · exploration + Partner APIscoped data products + + + Identity providerSSO · service identities · policy groups + Centralized loggingplatform events · audit trail · retention + + TYPE KEYSource / consumerFocal platform surfaceOrchestrationPrimary data pathLayer-wide service + +
+ + diff --git a/skills/diagram-design/assets/example-dp-integration-full.html b/skills/diagram-design/assets/example-dp-integration-full.html new file mode 100644 index 0000000..994e254 --- /dev/null +++ b/skills/diagram-design/assets/example-dp-integration-full.html @@ -0,0 +1,88 @@ + + + + + + Generic data platform · Integration overview + + + + +
+

DP Integration · Diagram Design

+

Generic data platform integration topology

+

Three source patterns land in shared object storage, a query surface serves three consumer modes, and platform-wide services remain visibly cross-cutting.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + RESTCSVEVENTSREADJDBCKERNELHTTPS + AUTHAUTH + + DATA PLATFORM + + + CRMcustomer records + POS exportsdaily CSV batches + Event streamnear-real-time events + + + DAGOrchestratorschedules · retries · lineage + STOREObject storageversioned data objects + SQLQuery enginefederated SQL access + + + BI tooldashboards · reports + NotebooksPython · exploration + Partner APIscoped data products + + + Identity providerSSO · service identities · policy groups + Centralized loggingplatform events · audit trail · retention + + TYPE KEYSource / consumerFocal platform surfaceOrchestrationPrimary data pathLayer-wide service + +
+
+

THE HEADLINE

Storage and query are the platform core

The two focal surfaces separate durable ingestion from governed access without hiding the wire protocols.

+

Every integration stays explicit

  • CRM arrives over REST
  • Point-of-sale data arrives as CSV
  • Consumers use JDBC, kernels, or HTTPS
+

Services apply to the whole layer

Identity and centralized logging terminate at the platform boundary, not at an individual component.

+
+
data platform · integration topologyexample · diagram design
+
+ + diff --git a/skills/diagram-design/assets/example-dp-integration.html b/skills/diagram-design/assets/example-dp-integration.html new file mode 100644 index 0000000..0acee3c --- /dev/null +++ b/skills/diagram-design/assets/example-dp-integration.html @@ -0,0 +1,78 @@ + + + + + + Generic data platform · Integration topology + + + + +
+

DP Integration · Diagram Design

+

Generic data platform integration topology

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + RESTCSVEVENTSREADJDBCKERNELHTTPS + AUTHAUTH + + DATA PLATFORM + + + CRMcustomer records + POS exportsdaily CSV batches + Event streamnear-real-time events + + + DAGOrchestratorschedules · retries · lineage + STOREObject storageversioned data objects + SQLQuery enginefederated SQL access + + + BI tooldashboards · reports + NotebooksPython · exploration + Partner APIscoped data products + + + Identity providerSSO · service identities · policy groups + Centralized loggingplatform events · audit trail · retention + + TYPE KEYSource / consumerFocal platform surfaceOrchestrationPrimary data pathLayer-wide service + +
+ + diff --git a/skills/diagram-design/assets/example-dp-security-matrix-dark.html b/skills/diagram-design/assets/example-dp-security-matrix-dark.html new file mode 100644 index 0000000..bf56ebc --- /dev/null +++ b/skills/diagram-design/assets/example-dp-security-matrix-dark.html @@ -0,0 +1,31 @@ + + + + + Data Platform · Access Matrix · Dark + + + +

DP security matrix · Diagram Design

Data platform access matrix

Five operating roles × five platform components, expressed as admin, write, read, or none.

+ + Data platform access matrixA five by five permission matrix for platform roles and components. + Componentvs. AD group + Data EngineerGRP-DATA-ENGData ScientistGRP-DATA-SCIAnalystGRP-ANALYSTAdministratorGRP-ADMINExternal PartnerGRP-PARTNER + Object storageS3WriteReadNoneAdminNone + Query engineSQLWriteReadReadAdminRead + NotebooksPYWriteWriteNoneAdminNone + BI toolDASHWriteReadWriteAdminReadshared dashboards + OrchestratorDAGWriteReadNoneAdminNone + LEGENDAdminWriteReadNonepartner read boundary + +
+ diff --git a/skills/diagram-design/assets/example-dp-security-matrix-full.html b/skills/diagram-design/assets/example-dp-security-matrix-full.html new file mode 100644 index 0000000..c84f82e --- /dev/null +++ b/skills/diagram-design/assets/example-dp-security-matrix-full.html @@ -0,0 +1,32 @@ + + + + + Data Platform · Access Matrix · Editorial + + + +

DP security matrix · Diagram Design

Data platform access matrix

A compact policy view for five human roles across storage, query, analysis, reporting, and orchestration. Each intersection resolves to one explicit permission level.

+ + Data platform access matrixA five by five permission matrix for platform roles and components. + Componentvs. AD group + Data EngineerGRP-DATA-ENGData ScientistGRP-DATA-SCIAnalystGRP-ANALYSTAdministratorGRP-ADMINExternal PartnerGRP-PARTNER + Object storageS3WriteReadNoneAdminNone + Query engineSQLWriteReadReadAdminRead + NotebooksPYWriteWriteNoneAdminNone + BI toolDASHWriteReadWriteAdminReadshared dashboards + OrchestratorDAGWriteReadNoneAdminNone + LEGENDAdminWriteReadNonepartner read boundary + +
+

THE HEADLINE

Partner access stops at BI

External partners receive read-only shared dashboards. They cannot enter storage, notebooks, or orchestration.

Administration stays separate

  • Administrators hold admin rights everywhere.
  • Engineers write across the platform.
  • Scientists write only in notebooks.

Analyst scope is narrow

Analysts query governed data and author BI content, while object storage, notebooks, and workflow controls remain unavailable.

+
data platform · access policyexample · diagram design
+
+ diff --git a/skills/diagram-design/assets/example-dp-security-matrix.html b/skills/diagram-design/assets/example-dp-security-matrix.html new file mode 100644 index 0000000..c296051 --- /dev/null +++ b/skills/diagram-design/assets/example-dp-security-matrix.html @@ -0,0 +1,88 @@ + + + + + + Data Platform · Access Matrix + + + + +
+

DP security matrix · Diagram Design

Data platform access matrix

Five operating roles × five platform components, expressed as admin, write, read, or none.

+
+ + Data platform access matrixA five by five permission matrix for platform roles and components. + + + + Componentvs. AD group + Data EngineerGRP-DATA-ENG + Data ScientistGRP-DATA-SCI + AnalystGRP-ANALYST + AdministratorGRP-ADMIN + External PartnerGRP-PARTNER + + + Object storageS3 + Write + Read + None + Admin + None + + + Query engineSQL + Write + Read + Read + Admin + Read + + + NotebooksPY + Write + Write + None + Admin + None + + + BI toolDASH + Write + Read + Write + Admin + Readshared dashboards + + + OrchestratorDAG + Write + Read + None + Admin + None + + + LEGEND + AdminWriteReadNonepartner read boundary + +
+
+ + diff --git a/skills/diagram-design/assets/example-er-dark.html b/skills/diagram-design/assets/example-er-dark.html index 9df8116..4fd0d72 100644 --- a/skills/diagram-design/assets/example-er-dark.html +++ b/skills/diagram-design/assets/example-er-dark.html @@ -73,7 +73,7 @@ - + diff --git a/skills/diagram-design/assets/example-er-full.html b/skills/diagram-design/assets/example-er-full.html index 835b9ba..3a4be82 100644 --- a/skills/diagram-design/assets/example-er-full.html +++ b/skills/diagram-design/assets/example-er-full.html @@ -54,7 +54,7 @@ - + diff --git a/skills/diagram-design/assets/example-er.html b/skills/diagram-design/assets/example-er.html index 71aa489..b31cd5e 100644 --- a/skills/diagram-design/assets/example-er.html +++ b/skills/diagram-design/assets/example-er.html @@ -73,7 +73,7 @@ - + diff --git a/skills/diagram-design/assets/example-gantt-dark.html b/skills/diagram-design/assets/example-gantt-dark.html new file mode 100644 index 0000000..a4e5360 --- /dev/null +++ b/skills/diagram-design/assets/example-gantt-dark.html @@ -0,0 +1,135 @@ + + + + + + Q2 product launch · Gantt · dark + + + + +
+

Gantt · Diagram Design

+

Q2 product launch · 12-week plan

+ + + + + + + + + + + + + + + + + + + + + + + + + April + May + June + + + + + + + + + + + + + + + + + + + + + + + DISCOVERY + DESIGN + LAUNCH + + + + + + Market research + + + + + + User interviews + + + + + + Wireframes + + + + + + Prototype + + + + + + Design review + + + GATE + + + + Development + + + + + + Beta testing + + + + + + LEGEND + + + Design review · critical gate + + + Task + + + Phase + +
+ + diff --git a/skills/diagram-design/assets/example-gantt-full.html b/skills/diagram-design/assets/example-gantt-full.html new file mode 100644 index 0000000..1beedf6 --- /dev/null +++ b/skills/diagram-design/assets/example-gantt-full.html @@ -0,0 +1,125 @@ + + + + + + Q2 product launch · Gantt + + + + +
+
+

Gantt · Diagram Design

+

Q2 product launch · 12-week plan

+

Three phases from research through launch. Design review in week 8 is the critical gate — development doesn't continue until sign-off.

+
+
+ + + + + + + + April + May + June + + + + + + + + + + + + + + DISCOVERY + DESIGN + LAUNCH + + Market research + + + + User interviews + + + + Wireframes + + + + Prototype + + + + Design review + + + GATE + + Development + + + + Beta testing + + + + LEGEND + + Design review · critical gate + + Task + + Phase + +
+
+
+

CRITICAL GATE

+

Design review — week 8

+

Development begins in week 7 but the full build is contingent on design sign-off. Starting before the gate means dev can fix implementation issues early, not rebuild from scratch post-review.

+
+
+

Discovery ↔ Design overlap

+

User interviews (W2–W4) overlap with wireframes (W4–W6) by one week. This is intentional — the first round of interview findings feeds directly into iteration without a formal handoff ceremony.

+
+
+

Float in the schedule

+

Beta testing (W10–W12) has two weeks of overlap with dev end (W11). If dev slips by one week, beta absorbs it. If dev slips two weeks, the launch date moves — there is no buffer beyond that.

+
+
+ +
+ + diff --git a/skills/diagram-design/assets/example-gantt.html b/skills/diagram-design/assets/example-gantt.html new file mode 100644 index 0000000..9d3c6cc --- /dev/null +++ b/skills/diagram-design/assets/example-gantt.html @@ -0,0 +1,135 @@ + + + + + + Q2 product launch · Gantt + + + + +
+

Gantt · Diagram Design

+

Q2 product launch · 12-week plan

+ + + + + + + + + + + + + + + + + + + + + + + + + April + May + June + + + + + + + + + + + + + + + + + + + + + + + DISCOVERY + DESIGN + LAUNCH + + + + + + Market research + + + + + + User interviews + + + + + + Wireframes + + + + + + Prototype + + + + + + Design review + + + GATE + + + + Development + + + + + + Beta testing + + + + + + LEGEND + + + Design review · critical gate + + + Task + + + Phase + +
+ + diff --git a/skills/diagram-design/assets/example-high-level-dark.html b/skills/diagram-design/assets/example-high-level-dark.html new file mode 100644 index 0000000..b963042 --- /dev/null +++ b/skills/diagram-design/assets/example-high-level-dark.html @@ -0,0 +1,249 @@ + + + + + + High-level architecture · End-to-end stack + + + + +
+

Architecture · Diagram Design

+

High-level architecture · End-to-end stack

+ + + + + + + + + + + + + + + + + + + + + + + + + + + DATA SOURCES + INGESTION + STORAGE + TRANSFORMATION & ANALYSIS + VISUALIZATION + + + + SOURCES + + + + + + + + + + + + + + + + + + + + + + + + EXT + + + + + + WEB + Census · Survey · Admin + + + + + EXT + + + + + FTP + Census · Business + + + + + EXT + + + + + + DB Connection + CDC · SQL · API + + + + + EXT + + + + + + Legacy System + Trade data + + + + + + + Orchestration / Workflow Automation + (Apache Airflow) + + + + + COLL + + + + Apache NiFi + Collect · route · transform + + + + + VIRT + + + + Trino + SQL · data virtualization + + + + + STORE + + + + MinIO / S3 + Object store · S3-API + + + + + ANLZ + + + + Data Modeling + Notebook · Python · R + + + + + DASH + + + + Dashboards + Superset · reports + + + + + + + + + + Kubernetes + + + + + + + + Identity Manager + (Active Directory) + + + + LEGEND + + External source · outside cluster + + Kubernetes boundary + + Focal component (MinIO) + + Primary data path + + Orchestration trigger + +
+ + diff --git a/skills/diagram-design/assets/example-high-level-full.html b/skills/diagram-design/assets/example-high-level-full.html new file mode 100644 index 0000000..893d2ab --- /dev/null +++ b/skills/diagram-design/assets/example-high-level-full.html @@ -0,0 +1,245 @@ + + + + + + High-level architecture · End-to-end stack + + + + +
+
+

Architecture · Diagram Design

+

High-level architecture · End-to-end stack

+

Five functional phases from raw source ingestion to business visualization. Apache NiFi collects, MinIO stores, Trino virtualizes, notebooks model — all orchestrated by Airflow and secured by Active Directory, running on Kubernetes.

+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + DATA SOURCES + INGESTION + STORAGE + TRANSFORMATION & ANALYSIS + VISUALIZATION + + + + SOURCES + + + + + + + + + + + + + + + + + + + + + + + EXT + + WEB + Census · Survey · Admin + + + + EXT + + FTP + Census · Business + + + + EXT + + DB Connection + CDC · SQL · API + + + + EXT + + Legacy System + Trade data + + + + + Orchestration / Workflow Automation + (Apache Airflow) + + + + + COLL + + Apache NiFi + Collect · route · transform + + + + + VIRT + + Trino + SQL · data virtualization + + + + + STORE + + MinIO / S3 + Object store · S3-API + + + + + ANLZ + + Data Modeling + Notebook · Python · R + + + + + DASH + + Dashboards + Superset · reports + + + + Kubernetes + + + + Identity Manager + (Active Directory) + + + + LEGEND + + External source · outside cluster + + Kubernetes boundary + + Focal component (MinIO) + + Primary data path + + Orchestration trigger + +
+ +
+
+

Ingestion · Apache NiFi

+
+
+

Data collection

+
+
    +
  • Collects from WEB (HTTP/REST), FTP, database CDC, and legacy file exports
  • +
  • No-code dataflow routing with back-pressure and guaranteed delivery
  • +
  • Lands raw data into MinIO and exposes it to Trino simultaneously
  • +
  • Orchestrated by Airflow DAGs for scheduled batch and event-driven runs
  • +
+
+
+

Storage · MinIO / S3

+
+
+

Object store (focal)

+
+
    +
  • S3-compatible API — single storage surface for all tools in the stack
  • +
  • Holds raw, cleansed, and curated layers (bronze / silver / gold paths)
  • +
  • Trino virtualizes directly over MinIO buckets — no ETL copy step needed
  • +
  • Python notebooks write model outputs back as Parquet for further querying
  • +
+
+
+

Query & Serve · Trino + Superset

+
+
+

Analysis & visualization

+
+
    +
  • Trino federates SQL queries across MinIO, databases, and APIs in one query
  • +
  • JupyterLab notebooks run Python and R for statistical modeling and ML
  • +
  • Superset dashboards connect to Trino for live, governed report delivery
  • +
  • Active Directory enforces row- and column-level access across all surfaces
  • +
+
+
+ + +
+ + diff --git a/skills/diagram-design/assets/example-high-level-vertical-dark.html b/skills/diagram-design/assets/example-high-level-vertical-dark.html new file mode 100644 index 0000000..5c67efe --- /dev/null +++ b/skills/diagram-design/assets/example-high-level-vertical-dark.html @@ -0,0 +1,272 @@ + + + + + + High-level architecture · Vertical chevrons (dark) + + + + +
+

Architecture · Diagram Design · Parametric

+

High-level architecture · Vertical Orchestration + Security

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + DATA SOURCES + INGESTION + STORAGE + TRANSFORM + VISUALIZATION + + + + ORCHESTRATION + + SECURITY + + OBSERVABILITY + + + + SOURCES + + + + + + + + + + + + + + + + + + + + + + + + + EXT + + + + + + PostgreSQL + CDC · SQL · API + + + + EXT + + + + + + SFTP drop + Batch · landing + + + + EXT + + + + + + Web forms + Survey · admin + + + + EXT + + + + + + Legacy system + Trade · mainframe + + + + + + + Orchestration / Workflow Automation + (Apache Airflow) + + + + + COLL + + + + Apache NiFi + Collect · route · transform + + + + VIRT + + + + Trino + SQL · data virtualization + + + + + STORE + + + + MinIO / S3 + Object store · S3-API + + + + ANLZ + + + + Notebooks + Jupyter · Python · R + + + + DASH + + + + Superset + Dashboards · reports + + + + + + + + + + Kubernetes + + + + + + Identity Manager + (Keycloak · LDAP · OIDC) + + + + + + + + + Monitoring & Observability + (Prometheus · Grafana · Loki) + + + + LEGEND + + + External · outside cluster + + + Kubernetes boundary + + + Focal (storage hub) + + + Primary path + + + Orchestration trigger + + + Query read-back + +
+ + diff --git a/skills/diagram-design/assets/example-high-level-vertical-full.html b/skills/diagram-design/assets/example-high-level-vertical-full.html new file mode 100644 index 0000000..eb0a57e --- /dev/null +++ b/skills/diagram-design/assets/example-high-level-vertical-full.html @@ -0,0 +1,250 @@ + + + + + + High-level architecture · Vertical chevrons (editorial) + + + + +
+
+

Architecture · Diagram Design · Parametric

+

High-level architecture · Vertical Orchestration + Security

+

Five horizontal phases (Sources → Ingestion → Storage → Transformation → Visualization) plus three cross-cutting verticals (Orchestration, Security, Observability) rendered as a reserved right strip. Two cross-cutting bars stack below the cluster — Identity and Monitoring — each paired 1:1 with a vertical chevron. The diagram is fully parametric: chevrons, sources, components, and connections drive every coordinate.

+
+ +
+ + + + + + + + + + + + + + + + + + + + + DATA SOURCES + INGESTION + STORAGE + TRANSFORM + VISUALIZATION + + + + ORCHESTRATION + + SECURITY + + OBSERVABILITY + + + + SOURCES + + + + + + + + + + + + + + + + + + + + + EXT + + PostgreSQL + CDC · SQL · API + + + + EXT + + SFTP drop + Batch · landing + + + + EXT + + Web forms + Survey · admin + + + + EXT + + Legacy system + Trade · mainframe + + + + + Orchestration / Workflow Automation + (Apache Airflow) + + + + + COLL + + Apache NiFi + Collect · route · transform + + + + VIRT + + Trino + SQL · data virtualization + + + + STORE + + MinIO / S3 + Object store · S3-API + + + + ANLZ + + Notebooks + Jupyter · Python · R + + + + DASH + + Superset + Dashboards · reports + + + + Kubernetes + + + + Identity Manager + (Keycloak · LDAP · OIDC) + + + + + Monitoring & Observability + (Prometheus · Grafana · Loki) + + + + LEGEND + + External · outside cluster + + Kubernetes boundary + + Focal (storage hub) + + Primary path + + Orchestration trigger + + Query read-back + +
+ +
+
+

Vertical · Orchestration

+
+
+

Workflow automation

+
+
    +
  • Apache Airflow runs as a full-width bar at the top of the cluster — visible to every cluster node
  • +
  • Trigger drops are always dashed (style: trigger), originating from the bar's bottom edge
  • +
  • The vertical Orchestration chevron in the right strip labels the cross-cutting column
  • +
  • One bar component per vertical chevron — enforced by the pairing rule
  • +
+
+
+

Storage · MinIO / S3 (focal)

+
+
+

Object store hub

+
+
    +
  • Single focal node — accent border, accent ink, accent connectors
  • +
  • Every edge touching the focal node is automatically style: primary (accent stroke)
  • +
  • Trino virtualizes MinIO buckets — read-back drawn as style: query (dashed dim)
  • +
  • Notebooks consume curated data; their output writes back as Parquet
  • +
+
+
+

Verticals · Security + Observability

+
+
+

Cross-cutting concerns

+
+
    +
  • Multiple cross-cutting bars stack below the cluster, one row per concern (44 px each)
  • +
  • Each crosscut pairs 1:1 with a vertical chevron in the right strip (count constraint)
  • +
  • Bars emit no individual connectors — semantic is "applies to everything above"
  • +
  • Components carry an optional color override (Identity Manager rendered in rust-red here) — applies to border, icon, and name; connectors stay topology-driven
  • +
+
+
+ + +
+ + diff --git a/skills/diagram-design/assets/example-high-level-vertical.html b/skills/diagram-design/assets/example-high-level-vertical.html new file mode 100644 index 0000000..9541d4e --- /dev/null +++ b/skills/diagram-design/assets/example-high-level-vertical.html @@ -0,0 +1,323 @@ + + + + + + High-level architecture · Vertical chevrons (Orchestration + Security) + + + + +
+

Architecture · Diagram Design · Parametric

+

High-level architecture · Vertical Orchestration + Security

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + DATA SOURCES + INGESTION + STORAGE + TRANSFORM + VISUALIZATION + + + + + ORCHESTRATION + + + SECURITY + + + OBSERVABILITY + + + + + SOURCES + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + EXT + + + + + + PostgreSQL + CDC · SQL · API + + + + + EXT + + + + + + SFTP drop + Batch · landing + + + + + EXT + + + + + + Web forms + Survey · admin + + + + + EXT + + + + + + Legacy system + Trade · mainframe + + + + + + + Orchestration / Workflow Automation + (Apache Airflow) + + + + + + + COLL + + + + Apache NiFi + Collect · route · transform + + + + + VIRT + + + + Trino + SQL · data virtualization + + + + + STORE + + + + MinIO / S3 + Object store · S3-API + + + + + ANLZ + + + + Notebooks + Jupyter · Python · R + + + + + DASH + + + + Superset + Dashboards · reports + + + + + + + + + + Kubernetes + + + + + + Identity Manager + (Keycloak · LDAP · OIDC) + + + + + + + + + Monitoring & Observability + (Prometheus · Grafana · Loki) + + + + LEGEND + + + External · outside cluster + + + Kubernetes boundary + + + Focal (storage hub) + + + Primary path + + + Orchestration trigger + + + Query read-back + +
+ + diff --git a/skills/diagram-design/assets/example-high-level.html b/skills/diagram-design/assets/example-high-level.html new file mode 100644 index 0000000..2f24bc8 --- /dev/null +++ b/skills/diagram-design/assets/example-high-level.html @@ -0,0 +1,299 @@ + + + + + + High-level architecture · End-to-end stack + + + + +
+

Architecture · Diagram Design

+

High-level architecture · End-to-end stack

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + DATA SOURCES + INGESTION + STORAGE + TRANSFORMATION & ANALYSIS + VISUALIZATION + + + + + SOURCES + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + EXT + + + + + + WEB + Census · Survey · Admin + + + + + + EXT + + + + + + FTP + Census · Business + + + + + + EXT + + + + + + DB Connection + CDC · SQL · API + + + + + + EXT + + + + + + Legacy System + Trade data + + + + + + + Orchestration / Workflow Automation + (Apache Airflow) + + + + + + COLL + + + + Apache NiFi + Collect · route · transform + + + + + + VIRT + + + + Trino + SQL · data virtualization + + + + + + STORE + + + + MinIO / S3 + Object store · S3-API + + + + + + ANLZ + + + + Data Modeling + Notebook · Python · R + + + + + + DASH + + + + Dashboards + Superset · reports + + + + + + + + + + Kubernetes + + + + + + + + Identity Manager + (Active Directory) + + + + LEGEND + + + External source · outside cluster + + + Kubernetes boundary + + + Focal component (MinIO) + + + Primary data path + + + Orchestration trigger + +
+ + diff --git a/skills/diagram-design/assets/example-it-state-dark.html b/skills/diagram-design/assets/example-it-state-dark.html new file mode 100644 index 0000000..b14dae9 --- /dev/null +++ b/skills/diagram-design/assets/example-it-state-dark.html @@ -0,0 +1,90 @@ + + + + + + Northwind Retail · Current IT Landscape · Dark + + + + +
+

IT current-state · Northwind Retail

+

Legacy retail reporting landscape

+

File exports, desktop spreadsheets, and manual publication before a shared data platform.

+
+ + Northwind Retail current IT landscapeThree zones show collection, processing, and dissemination through manual file handoffs. + + + + + + + + + + + COLLECTION + PROCESSING + DISSEMINATION + + + + + + + + + + + Point-of-Sale Exportsnightly · CSV + Online Store Exportorders · flat file + Supplier Price Listsexternal · XLSX + Shared Driveno version controldepartment folders + Spreadsheet Handoffslocal workbooks · macrosmanual reconciliation + On-prem RDBMSinventory · finance + Reporting Portalmanual refresh + Email Report Packsweekly · PDF + Regional Managers12 store regions + + CSV + EXPORT + XLSX + COPY + LOAD + XLSX + PDF + EMAIL + + LEGEND + data flow + pain-point + external + bottleneck + +
+
+ + diff --git a/skills/diagram-design/assets/example-it-state-full.html b/skills/diagram-design/assets/example-it-state-full.html new file mode 100644 index 0000000..9a9a480 --- /dev/null +++ b/skills/diagram-design/assets/example-it-state-full.html @@ -0,0 +1,69 @@ + + + + + + Northwind Retail · Current IT Landscape · Editorial + + + + +
+

IT current-state · Northwind Retail

Legacy retail reporting landscape

Sales and supplier files converge on a shared drive, move through desktop workbooks, and reach regional teams through a manually refreshed portal and emailed report packs.

+
+ + Northwind Retail current IT landscapeThree zones show collection, processing, and dissemination through manual file handoffs. + + + + + + COLLECTIONPROCESSINGDISSEMINATION + + + Point-of-Sale Exportsnightly · CSV + Online Store Exportorders · flat file + Supplier Price Listsexternal · XLSX + Shared Driveno version controldepartment folders + Spreadsheet Handoffslocal workbooks · macrosmanual reconciliation + On-prem RDBMSinventory · finance + Reporting Portalmanual refresh + Email Report Packsweekly · PDF + Regional Managers12 store regions + CSVEXPORTXLSX + COPYLOADXLSXPDFEMAIL + LEGENDdata flowpain-pointexternalbottleneck + +
+
+

THE HEADLINE

Two manual bottlenecks

  • The shared drive has no version history.
  • The portal depends on a person-led refresh.
  • Spreadsheet copies break traceability.
+

File-based exchanges

  • Stores export nightly CSV files.
  • Suppliers email changing workbooks.
  • Regional packs leave as PDF attachments.
+

System that remains

The on-premises relational database remains the inventory and finance source of record while the surrounding handoffs are modernized.

+
+
Northwind Retail · IT current-stateexample · diagram design
+
+ + diff --git a/skills/diagram-design/assets/example-it-state.html b/skills/diagram-design/assets/example-it-state.html new file mode 100644 index 0000000..471e990 --- /dev/null +++ b/skills/diagram-design/assets/example-it-state.html @@ -0,0 +1,128 @@ + + + + + + Northwind Retail · Current IT Landscape + + + + +
+

IT current-state · Northwind Retail

+

Legacy retail reporting landscape

+

File exports, desktop spreadsheets, and manual publication before a shared data platform.

+
+ + Northwind Retail current IT landscape + Three zones show collection, processing, and dissemination through manual file handoffs. + + + + + + + + + + + + + + + + COLLECTION + + + PROCESSING + + + DISSEMINATION + + + + + + + + + + + + + + Point-of-Sale Exportsnightly · CSV + + Online Store Exportorders · flat file + + Supplier Price Listsexternal · XLSX + + + + Shared Driveno version controldepartment folders + + Spreadsheet Handoffslocal workbooks · macrosmanual reconciliation + + On-prem RDBMSinventory · finance + + + + Reporting Portalmanual refresh + + Email Report Packsweekly · PDF + + Regional Managers12 store regions + + + CSV + EXPORT + XLSX + COPY + LOAD + XLSX + PDF + EMAIL + + + + LEGEND + data flow + pain-point + external + bottleneck + +
+
+ + diff --git a/skills/diagram-design/assets/example-line-dark.html b/skills/diagram-design/assets/example-line-dark.html new file mode 100644 index 0000000..a5a7859 --- /dev/null +++ b/skills/diagram-design/assets/example-line-dark.html @@ -0,0 +1,109 @@ + + + + + + Weekly signups · Line chart · dark + + + + +
+

Line · Diagram Design

+

Weekly signups · Organic leads the growth

+ + + + + + + + + + + + + SIGNUPS / WEEK + + + + + + + + + + + + + + + 40 + 80 + 120 + 160 + 200 + 240 + + + + + + + + + + + + + + + + + + + + + + + + + + W1 + W2 + W3 + W4 + W5 + W6 + W7 + W8 + + + + LEGEND + + + + Organic · focal + + + Direct + + + Referral + +
+ + diff --git a/skills/diagram-design/assets/example-line-full.html b/skills/diagram-design/assets/example-line-full.html new file mode 100644 index 0000000..5535184 --- /dev/null +++ b/skills/diagram-design/assets/example-line-full.html @@ -0,0 +1,103 @@ + + + + + + Weekly signups · Line chart + + + + +
+
+

Line · Diagram Design

+

Weekly signups · Organic leads the growth

+

Signup volume by acquisition channel over eight weeks. Organic search is both the largest and fastest-growing channel; Direct is the stable baseline.

+
+
+ + + + + SIGNUPS / WEEK + + + + + + + + + 40 + 80 + 120 + 160 + 200 + 240 + + + + + + + W1 + W2 + W3 + W4 + W5 + W6 + W7 + W8 + + LEGEND + + Organic · focal + + Direct + + Referral + +
+
+
+

FOCAL · ORGANIC

+

Organic search driving 55% of new signups

+

75% week-over-week growth over 8 weeks — from 120 to 210 signups. Two long-form guides published in W4 account for the step change. The W5 dip is a weekday holiday effect.

+
+
+

Direct: stable core

+

22% growth (80→98) — this is mostly returning users and brand-aware discovery. The near-flat slope is a healthy baseline, not stagnation. It means the product retains its direct audience while organic expands.

+
+
+

Referral: early signal

+

67% growth (45→75), driven by one integration partner. Volatile week-to-week but directionally positive. Worth a dedicated channel review before investing further in partner programmes.

+
+
+ +
+ + diff --git a/skills/diagram-design/assets/example-line.html b/skills/diagram-design/assets/example-line.html new file mode 100644 index 0000000..b74d8e5 --- /dev/null +++ b/skills/diagram-design/assets/example-line.html @@ -0,0 +1,109 @@ + + + + + + Weekly signups · Line chart + + + + +
+

Line · Diagram Design

+

Weekly signups · Organic leads the growth

+ + + + + + + + + + + + + SIGNUPS / WEEK + + + + + + + + + + + + + + + 40 + 80 + 120 + 160 + 200 + 240 + + + + + + + + + + + + + + + + + + + + + + + + + + W1 + W2 + W3 + W4 + W5 + W6 + W7 + W8 + + + + LEGEND + + + + Organic · focal + + + Direct + + + Referral + +
+ + diff --git a/skills/diagram-design/assets/example-medallion-dark.html b/skills/diagram-design/assets/example-medallion-dark.html new file mode 100644 index 0000000..05a250e --- /dev/null +++ b/skills/diagram-design/assets/example-medallion-dark.html @@ -0,0 +1,159 @@ + + + + + + E-commerce analytics · Medallion · Dark + + + + +
+

Medallion · Diagram Design

+

Five-tier e-commerce analytics storage

+ + + Five-tier e-commerce analytics medallion + Clickstream events and order records move from raw storage through anonymized, staging, and aggregated tiers before lifecycle archiving. + + + + + + + + + + + + + + + + + + MASK IDS + CLEAN + JOIN + AGGREGATE + LIFECYCLE + + + + + + Raw + raw-commerce + Tool +
NiFi ingest
+ Format +
JSON · Parquet
+ Writer +
Data Engineer
+ E-COMMERCE EXAMPLE + clickstream events + order records + + + + + + Anonymized + anon-commerce + Tool +
Trino SQL
+ Format +
Iceberg · partitioned
+ Writer +
Data Engineer
+ E-COMMERCE EXAMPLE + session pseudonyms + masked customer IDs + + + + + + Staging + staging-commerce + Tool +
Trino · notebooks
+ Format +
Iceberg · cleaned
+ Writer +
Data Scientist
+ E-COMMERCE EXAMPLE + joined order facts + validated event rows + + + + + + Aggregated + analytics-marts + Tool +
Trino INSERT
+ Format +
Iceberg · metrics
+ Writer +
Data Scientist
+ E-COMMERCE EXAMPLE + daily conversion rate + revenue by channel + + + + + + Archive + archive-commerce + Tool +
Object storage lifecycle
+ Format +
Cold tier · immutable
+ Writer +
Data Engineer
+ E-COMMERCE EXAMPLE + retained clickstream + closed order snapshots + + + + + SQL PATH + Trino INSERT INTO … SELECT + filter · join · aggregate — repeatable transforms + + + NOTEBOOK PATH + Python notebooks on object storage + explore · validate · model — interactive analysis +
+
+ + diff --git a/skills/diagram-design/assets/example-medallion-full.html b/skills/diagram-design/assets/example-medallion-full.html new file mode 100644 index 0000000..e8858b5 --- /dev/null +++ b/skills/diagram-design/assets/example-medallion-full.html @@ -0,0 +1,201 @@ + + + + + + E-commerce analytics · Medallion · Full + + + + +
+
+

Medallion · Diagram Design

+

Five-tier e-commerce analytics storage

+

A quality ladder for clickstream events and order records, from immutable landing data to dashboard-ready metrics and cold retention.

+
+ +
+ + Five-tier e-commerce analytics medallion + Clickstream events and order records move from raw storage through anonymized, staging, and aggregated tiers before lifecycle archiving. + + + + + + + + + + + + + + + + + + MASK IDS + CLEAN + JOIN + AGGREGATE + LIFECYCLE + + + + + + Raw + raw-commerce + Tool +
NiFi ingest
+ Format +
JSON · Parquet
+ Writer +
Data Engineer
+ E-COMMERCE EXAMPLE + clickstream events + order records + + + + + + Anonymized + anon-commerce + Tool +
Trino SQL
+ Format +
Iceberg · partitioned
+ Writer +
Data Engineer
+ E-COMMERCE EXAMPLE + session pseudonyms + masked customer IDs + + + + + + Staging + staging-commerce + Tool +
Trino · notebooks
+ Format +
Iceberg · cleaned
+ Writer +
Data Scientist
+ E-COMMERCE EXAMPLE + joined order facts + validated event rows + + + + + + Aggregated + analytics-marts + Tool +
Trino INSERT
+ Format +
Iceberg · metrics
+ Writer +
Data Scientist
+ E-COMMERCE EXAMPLE + daily conversion rate + revenue by channel + + + + + + Archive + archive-commerce + Tool +
Object storage lifecycle
+ Format +
Cold tier · immutable
+ Writer +
Data Engineer
+ E-COMMERCE EXAMPLE + retained clickstream + closed order snapshots + + + + + SQL PATH + Trino INSERT INTO … SELECT + filter · join · aggregate — repeatable transforms + + + NOTEBOOK PATH + Python notebooks on object storage + explore · validate · model — interactive analysis +
+
+ +
+
+

THE HEADLINE

+

Aggregated is the query surface

+

Dashboards read stable metrics instead of recomputing joins across raw commerce records.

+
+
+

Quality rises by tier

+
  • Identifiers are masked first
  • Events and orders are validated
  • Metrics are versioned for reuse
+
+
+

Two write modes

+

Trino handles repeatable promotion jobs; notebooks support exploration before logic is operationalized.

+
+
+ +
+ e-commerce analytics · medallion + example · schematic skill +
+
+ + diff --git a/skills/diagram-design/assets/example-medallion.html b/skills/diagram-design/assets/example-medallion.html new file mode 100644 index 0000000..6ba495e --- /dev/null +++ b/skills/diagram-design/assets/example-medallion.html @@ -0,0 +1,159 @@ + + + + + + E-commerce analytics · Medallion + + + + +
+

Medallion · Diagram Design

+

Five-tier e-commerce analytics storage

+ + + Five-tier e-commerce analytics medallion + Clickstream events and order records move from raw storage through anonymized, staging, and aggregated tiers before lifecycle archiving. + + + + + + + + + + + + + + + + + + MASK IDS + CLEAN + JOIN + AGGREGATE + LIFECYCLE + + + + + + Raw + raw-commerce + Tool +
NiFi ingest
+ Format +
JSON · Parquet
+ Writer +
Data Engineer
+ E-COMMERCE EXAMPLE + clickstream events + order records + + + + + + Anonymized + anon-commerce + Tool +
Trino SQL
+ Format +
Iceberg · partitioned
+ Writer +
Data Engineer
+ E-COMMERCE EXAMPLE + session pseudonyms + masked customer IDs + + + + + + Staging + staging-commerce + Tool +
Trino · notebooks
+ Format +
Iceberg · cleaned
+ Writer +
Data Scientist
+ E-COMMERCE EXAMPLE + joined order facts + validated event rows + + + + + + Aggregated + analytics-marts + Tool +
Trino INSERT
+ Format +
Iceberg · metrics
+ Writer +
Data Scientist
+ E-COMMERCE EXAMPLE + daily conversion rate + revenue by channel + + + + + + Archive + archive-commerce + Tool +
Object storage lifecycle
+ Format +
Cold tier · immutable
+ Writer +
Data Engineer
+ E-COMMERCE EXAMPLE + retained clickstream + closed order snapshots + + + + + SQL PATH + Trino INSERT INTO … SELECT + filter · join · aggregate — repeatable transforms + + + NOTEBOOK PATH + Python notebooks on object storage + explore · validate · model — interactive analysis +
+
+ + diff --git a/skills/diagram-design/assets/example-process-dark.html b/skills/diagram-design/assets/example-process-dark.html new file mode 100644 index 0000000..7f00489 --- /dev/null +++ b/skills/diagram-design/assets/example-process-dark.html @@ -0,0 +1,62 @@ + + + + + + Order fulfillment · Process (dark) + + + + +
+

Process · Diagram Design

+

Order fulfillment across four teams

+ + + + + + + + + + + + CUSTOMERSUPPORTWAREHOUSEFINANCE + + 1ORDER + 2VERIFY + 3ALLOCATE + 4PICK + 5PACK + 6PAY + 7RECEIVE + 8CLOSE + + + + + + CUSPlace ordercart → orderstorefrontDB + SUPVerify orderorder → clearedservice deskDBDB + WHSAllocate stockorder → pick listinventory systemDBLS + WHSPick itemslist → pickedhandheld scannerLSLS + WHSPack orderpicked → shipmentpacking stationLSFL + FINCapture paymentshipment → receiptpayment gatewayFLTB + CUSReceive shipmentreceipt → confirmeddelivery portalTBWB + SUPClose orderconfirmed → closedservice deskWB + + + STEPS1ORDER2VERIFY3ALLOCATE4PICK5PACK6PAY7RECEIVE8CLOSE + DATA TYPEDB · recordsLS · taskFL · documentTB · transactionWB · web statusLEFT IN · RIGHT OUT + FLOWCritical handoffSequential handoff + +
+ + diff --git a/skills/diagram-design/assets/example-process-full.html b/skills/diagram-design/assets/example-process-full.html new file mode 100644 index 0000000..924c080 --- /dev/null +++ b/skills/diagram-design/assets/example-process-full.html @@ -0,0 +1,72 @@ + + + + + + Order fulfillment · Process overview + + + + +
+

Process · Diagram Design

+

Order fulfillment across four teams

+

One order moves through customer, support, warehouse, and finance ownership, while the payload chips show what each handoff carries.

+
+ + + + + + + + + + + + CUSTOMERSUPPORTWAREHOUSEFINANCE + + 1ORDER + 2VERIFY + 3ALLOCATE + 4PICK + 5PACK + 6PAY + 7RECEIVE + 8CLOSE + + + + + + CUSPlace ordercart → orderstorefrontDB + SUPVerify orderorder → clearedservice deskDBDB + WHSAllocate stockorder → pick listinventory systemDBLS + WHSPick itemslist → pickedhandheld scannerLSLS + WHSPack orderpicked → shipmentpacking stationLSFL + FINCapture paymentshipment → receiptpayment gatewayFLTB + CUSReceive shipmentreceipt → confirmeddelivery portalTBWB + SUPClose orderconfirmed → closedservice deskWB + + + STEPS1ORDER2VERIFY3ALLOCATE4PICK5PACK6PAY7RECEIVE8CLOSE + DATA TYPEDB · recordsLS · taskFL · documentTB · transactionWB · web statusLEFT IN · RIGHT OUT + FLOWCritical handoffSequential handoff + +
+
+

THE PIVOT

Stock allocation commits the order

The focal handoff turns a verified order record into an actionable warehouse pick list.

+

Ownership stays explicit

  • Support verifies and closes
  • Warehouse allocates, picks, and packs
  • Finance captures the final payment
+

Payloads change with the work

Records become tasks, then documents, transactions, and a customer-visible status.

+
+
order fulfillment · processexample · diagram design
+
+ + diff --git a/skills/diagram-design/assets/example-process.html b/skills/diagram-design/assets/example-process.html new file mode 100644 index 0000000..3b4926e --- /dev/null +++ b/skills/diagram-design/assets/example-process.html @@ -0,0 +1,62 @@ + + + + + + Order fulfillment · Process + + + + +
+

Process · Diagram Design

+

Order fulfillment across four teams

+ + + + + + + + + + + + CUSTOMERSUPPORTWAREHOUSEFINANCE + + 1ORDER + 2VERIFY + 3ALLOCATE + 4PICK + 5PACK + 6PAY + 7RECEIVE + 8CLOSE + + + + + + CUSPlace ordercart → orderstorefrontDB + SUPVerify orderorder → clearedservice deskDBDB + WHSAllocate stockorder → pick listinventory systemDBLS + WHSPick itemslist → pickedhandheld scannerLSLS + WHSPack orderpicked → shipmentpacking stationLSFL + FINCapture paymentshipment → receiptpayment gatewayFLTB + CUSReceive shipmentreceipt → confirmeddelivery portalTBWB + SUPClose orderconfirmed → closedservice deskWB + + + STEPS1ORDER2VERIFY3ALLOCATE4PICK5PACK6PAY7RECEIVE8CLOSE + DATA TYPEDB · recordsLS · taskFL · documentTB · transactionWB · web statusLEFT IN · RIGHT OUT + FLOWCritical handoffSequential handoff + +
+ + diff --git a/skills/diagram-design/assets/example-radar-dark.html b/skills/diagram-design/assets/example-radar-dark.html new file mode 100644 index 0000000..16cba6b --- /dev/null +++ b/skills/diagram-design/assets/example-radar-dark.html @@ -0,0 +1,137 @@ + + + + + + Storage backends · Capability radar + + + + +
+

Radar · Diagram Design

+

Storage backends · Capability radar

+ + + + + + + + + + + + + + + + + + + + + + + + + + + Small-file handling + Large-object reads + Write throughput + Operational simplicity + Iceberg integration + + + 10 + 8 + 6 + 4 + 2 + + + + + + + + + + + + + + + + + + + + + + LEGEND + + + MinIO · recommended + + + Amazon S3 + + + Ceph + + + Google Cloud Storage + + One coral. Position is the signal — color reserved for the recommended option. + +
+ + diff --git a/skills/diagram-design/assets/example-radar-full.html b/skills/diagram-design/assets/example-radar-full.html new file mode 100644 index 0000000..642b0a2 --- /dev/null +++ b/skills/diagram-design/assets/example-radar-full.html @@ -0,0 +1,133 @@ + + + + + + Storage backends · Capability radar + + + + +
+
+

Radar · Diagram Design

+

Storage backends · Capability radar

+

Four object-storage candidates scored 0–10 across five workload dimensions. The chart is a decision tool — the recommended option carries the only colored fill; everything else sits in the muted comparison palette.

+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + Small-file handling + Large-object reads + Write throughput + Operational simplicity + Iceberg integration + + 10 + 8 + 6 + 4 + 2 + + + + + + + + + + + + + + + LEGEND + + + MinIO · recommended + + + Amazon S3 + + + Ceph + + + Google Cloud Storage + +
+ +
+
+

RECOMMENDED

+

MinIO

+

9 across the board, weakest only on large-object reads. The clear pick when small-file performance and Iceberg integration matter and you can run the operator yourself.

+
+
+

Amazon S3

+

The reference implementation: top-class on large-object reads and write throughput, but a hard step down on operational simplicity once you factor in IAM, lifecycle, and bucket policy sprawl.

+
+
+

Ceph

+

Capable across the board, but the lowest score on operational simplicity. Pick it when you already run Ceph or need block + object + file from one cluster — not for a fresh greenfield.

+
+
+

Google Cloud Storage

+

Solid middle path. No standout dimension — which is itself an answer when the team optimises for "boring, managed, fine."

+
+
+ + +
+ + diff --git a/skills/diagram-design/assets/example-radar.html b/skills/diagram-design/assets/example-radar.html new file mode 100644 index 0000000..378ac52 --- /dev/null +++ b/skills/diagram-design/assets/example-radar.html @@ -0,0 +1,137 @@ + + + + + + Storage backends · Capability radar + + + + +
+

Radar · Diagram Design

+

Storage backends · Capability radar

+ + + + + + + + + + + + + + + + + + + + + + + + + + + Small-file handling + Large-object reads + Write throughput + Operational simplicity + Iceberg integration + + + 10 + 8 + 6 + 4 + 2 + + + + + + + + + + + + + + + + + + + + + + LEGEND + + + MinIO · recommended + + + Amazon S3 + + + Ceph + + + Google Cloud Storage + + One coral. Position is the signal — color reserved for the recommended option. + +
+ + diff --git a/skills/diagram-design/assets/example-scatter-dark.html b/skills/diagram-design/assets/example-scatter-dark.html new file mode 100644 index 0000000..cb601d3 --- /dev/null +++ b/skills/diagram-design/assets/example-scatter-dark.html @@ -0,0 +1,139 @@ + + + + + + Deploy frequency vs lead time · Scatter · dark + + + + +
+

Scatter · Diagram Design

+

Deploy frequency vs. lead time · 12 teams

+ + + + + + + + + + + + + + + LEAD TIME (DAYS) + DEPLOYS PER WEEK + + + + + + + + + + + + + + + + + + + 6 + 12 + 18 + 24 + 0 + + + 0 + 4 + 8 + 12 + 16 + 20 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + PLATFORM + + + HIGH LEAD TIME + LOW LEAD TIME + + + + LEGEND + + + Platform team · best performer + + + Engineering team + + + Trend + +
+ + diff --git a/skills/diagram-design/assets/example-scatter-full.html b/skills/diagram-design/assets/example-scatter-full.html new file mode 100644 index 0000000..2f6f701 --- /dev/null +++ b/skills/diagram-design/assets/example-scatter-full.html @@ -0,0 +1,114 @@ + + + + + + Deploy frequency vs lead time · Scatter + + + + +
+
+

Scatter · Diagram Design

+

Deploy frequency vs. lead time · 12 teams

+

Each point is an engineering team. Moving right means deploying more often; moving down means shipping faster. The Platform team occupies the lower-right — the ideal quadrant.

+
+
+ + + + + LEAD TIME (DAYS) + DEPLOYS PER WEEK + + + + + + + + + + + 6 + 12 + 18 + 24 + 0 + 0 + 4 + 8 + 12 + 16 + 20 + + + + + + + + + + + + + + + PLATFORM + HIGH LEAD TIME + LOW LEAD TIME + + LEGEND + + Platform team · best performer + + Engineering team + + Trend + +
+
+
+

BEST PERFORMER

+

Platform team · (18, 3)

+

18 deploys/week with a 3-day lead time. This combination is achievable because they own the full stack — no cross-team approval gates, and their CI pipeline runs under 4 minutes.

+
+
+

Correlation is clear

+

Every team to the right of the median deploy frequency (8/week) is also below the median lead time (12 days). The relationship isn't causal — both are symptoms of the same underlying practice: small, frequent, reversible changes.

+
+
+

Two outliers worth examining

+

The team at (2,20) ships rarely and slowly — high coupling, long approval chains. The team at (12,10) deploys frequently but with higher-than-expected lead time — likely a large monorepo with slow integration tests.

+
+
+ +
+ + diff --git a/skills/diagram-design/assets/example-scatter.html b/skills/diagram-design/assets/example-scatter.html new file mode 100644 index 0000000..7b1012f --- /dev/null +++ b/skills/diagram-design/assets/example-scatter.html @@ -0,0 +1,139 @@ + + + + + + Deploy frequency vs lead time · Scatter + + + + +
+

Scatter · Diagram Design

+

Deploy frequency vs. lead time · 12 teams

+ + + + + + + + + + + + + + + LEAD TIME (DAYS) + DEPLOYS PER WEEK + + + + + + + + + + + + + + + + + + + 6 + 12 + 18 + 24 + 0 + + + 0 + 4 + 8 + 12 + 16 + 20 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + PLATFORM + + + HIGH LEAD TIME + LOW LEAD TIME + + + + LEGEND + + + Platform team · best performer + + + Engineering team + + + Trend + +
+ + diff --git a/skills/diagram-design/assets/icons.html b/skills/diagram-design/assets/icons.html new file mode 100644 index 0000000..fa7da5d --- /dev/null +++ b/skills/diagram-design/assets/icons.html @@ -0,0 +1,230 @@ + + + + + + Icon library · Diagram Design + + + + +
+
+

Icons · Diagram Design

+

Icon library

+

A small, monochrome library for IT/cloud illustrations. Stroked icons from Tabler Icons (MIT); brand silhouettes from Simple Icons (CC0). Every icon uses currentColor so it inherits ink from its parent.

+
+

Compute

+
laptop
+
phone
+
desktop
+
server
+
container
+
vm
+
+

People

+
user
+
users
+
admin
+
robot
+
+

Network

+
cloud
+
internet
+
cdn
+
firewall
+
vpn
+
load-balancer
+
gateway
+
dns
+
+

Data

+
database
+
file
+
log
+
queue
+
cache
+
bucket
+
backup
+
search
+
+

Kubernetes

+
pod
+
node
+
service
+
deployment
+
ingress
+
volume
+
+

Action

+
api
+
request
+
response
+
sync
+
lock
+
key
+
alert
+
+

DevOps

+
git-branch
+
terminal
+
pipeline
+
bug
+
monitoring
+
test
+
+

Brand

+
docker
+
terraform
+
aws
+
azure
+
github
+
Kubernetes
kubernetes
+
Google Cloud
gcp
+
PostgreSQL
postgres
+
redis
+
NGINX
nginx
+
Gitea
gitea
+
Keycloak
keycloak
+
active-directory
+
MinIO
minio
+
mysql
+
Oracle
oracle
+
Microsoft SQL Server
sqlserver
+
SQLite
sqlite
+
Apache Hive
hive
+
starrocks
+
+

Data stack

+
Apache NiFi
nifi
+
Apache Airflow
airflow
+
image/svg+xml
hop
+
pentaho
+
dagster
+
Trino
trino
+
Apache Superset
superset
+
Redash
redash
+
Tableau
tableau
+
Power BI
powerbi
+
Jupyter
jupyter
+
+

Language

+
Python
python
+
R
r
+
sql
+
+

Statistical tools

+
spss
+
∅
sas
+
stata
+
rstudio
+
QGIS
qgis
+
+

File formats

+
excel
+
csv
+
txt
+
+
+ Tabler Icons · MIT · github.com/tabler/tabler-icons  ·  Simple Icons · CC0 · github.com/simple-icons/simple-icons  ·  Devicon · MIT · github.com/devicons/devicon +
+
+ + diff --git a/skills/diagram-design/assets/index.html b/skills/diagram-design/assets/index.html index 17d51bf..f638f11 100644 --- a/skills/diagram-design/assets/index.html +++ b/skills/diagram-design/assets/index.html @@ -1,207 +1,330 @@ - + - - - - Diagram Design · Gallery - - - - -
-
-

Diagram Design · gallery

- open in new tab ↗ -
+ main { + flex: 1 1 auto; + position: relative; + background: var(--paper-2); + overflow: hidden; + } + iframe { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + border: 0; + background: var(--paper); + display: block; + } + + + +
+
+

+ Diagram Design + · gallery +

+ +
-
- - - - - - - - - - - - - - -
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-
- - - -
-
+
+ + + +
+
-
- -
+
+ +
- - + bindTabs("type-tabs", "type"); + bindTabs("variant-tabs", "variant"); + update(); + + diff --git a/skills/diagram-design/references/export.md b/skills/diagram-design/references/export.md new file mode 100644 index 0000000..c22ddf1 --- /dev/null +++ b/skills/diagram-design/references/export.md @@ -0,0 +1,107 @@ +# Export to PNG / SVG + +Convert a generated diagram HTML file into a portable `.svg` and/or `.png` next to it. **Manual only — never run unprompted.** + +## Trigger + +Load this file when: + +- The user invokes `/diagram-design:export ` (the plugin's slash command — defined in `commands/export.md` at the repo root). +- The user asks in natural language to export, save, rasterize, convert, or download a diagram in `.svg` or `.png` form. Typical phrasings: + - "export this as PNG" + - "save as SVG" + - "give me a PNG of that diagram" + - "rasterize it" + - "convert to png and svg" + +The slash command is a thin wrapper that delegates here — both paths run the same procedure below. + +## Scope + +Both formats are **diagram-only** — just the `` node. Editorial wrappers (header, summary cards, footer in `-full` variants) are intentionally dropped: the export deliverable is the diagram itself, suitable for Figma, slides, social cards, or blog images. + +If the user explicitly asks for "a screenshot of the whole page including the cards", that's a different request — fall back to a normal full-page screenshot via the user's OS or browser. + +## SVG export procedure + +1. Read the source HTML file. +2. Extract the **first** `...` block. Use a multiline regex anchored on ``. Most generated diagrams have only one SVG; if there are multiple, the first is the diagram (gallery files are an exception — see *Edge cases*). +3. Make it standalone: + - Ensure the opening tag has `xmlns="http://www.w3.org/2000/svg"`. Add it if missing. + - Ensure a `viewBox` is present. The skill's templates always include one; warn the user if absent rather than guessing. + - Inject Google Fonts `@import` so the SVG renders with correct typography in a browser: + ```svg + + + + ``` + If the SVG already contains a `` block, **merge** the ``. If absent, the file isn't from a current template — fix the source rather than working around it in export. + +## What this command never does + +- Modifies the source HTML. +- Adds export buttons or `