@taloswork/ose-shared 0.1.8 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (155) hide show
  1. package/package.json +3 -3
  2. package/skills/cozy-static-svg/SKILL.md +76 -0
  3. package/skills/cozy-static-svg/references/approved-preview.png +0 -0
  4. package/skills/cozy-static-svg/references/cross-platform.md +73 -0
  5. package/skills/cozy-static-svg/references/moon_keeps_watch.svg +229 -0
  6. package/skills/cozy-static-svg/references/style-anchor.md +271 -0
  7. package/skills/cozy-static-svg/scripts/artkit.py +321 -0
  8. package/skills/cozy-static-svg/scripts/to_png.py +333 -0
  9. package/skills/diagram-design/SKILL.md +568 -0
  10. package/skills/diagram-design/assets/example-architecture-dark.html +182 -0
  11. package/skills/diagram-design/assets/example-architecture-full.html +194 -0
  12. package/skills/diagram-design/assets/example-architecture.html +183 -0
  13. package/skills/diagram-design/assets/example-bar-dark.html +129 -0
  14. package/skills/diagram-design/assets/example-bar-full.html +105 -0
  15. package/skills/diagram-design/assets/example-bar.html +129 -0
  16. package/skills/diagram-design/assets/example-data-flow-dark.html +143 -0
  17. package/skills/diagram-design/assets/example-data-flow-full.html +185 -0
  18. package/skills/diagram-design/assets/example-data-flow.html +143 -0
  19. package/skills/diagram-design/assets/example-datalake-dark.html +243 -0
  20. package/skills/diagram-design/assets/example-datalake-full.html +248 -0
  21. package/skills/diagram-design/assets/example-datalake.html +269 -0
  22. package/skills/diagram-design/assets/example-dp-integration-dark.html +80 -0
  23. package/skills/diagram-design/assets/example-dp-integration-full.html +90 -0
  24. package/skills/diagram-design/assets/example-dp-integration.html +80 -0
  25. package/skills/diagram-design/assets/example-dp-security-matrix-dark.html +31 -0
  26. package/skills/diagram-design/assets/example-dp-security-matrix-full.html +32 -0
  27. package/skills/diagram-design/assets/example-dp-security-matrix.html +88 -0
  28. package/skills/diagram-design/assets/example-er-dark.html +202 -0
  29. package/skills/diagram-design/assets/example-er-full.html +205 -0
  30. package/skills/diagram-design/assets/example-er.html +202 -0
  31. package/skills/diagram-design/assets/example-flowchart-dark.html +156 -0
  32. package/skills/diagram-design/assets/example-flowchart-full.html +159 -0
  33. package/skills/diagram-design/assets/example-flowchart.html +156 -0
  34. package/skills/diagram-design/assets/example-gantt-dark.html +137 -0
  35. package/skills/diagram-design/assets/example-gantt-full.html +127 -0
  36. package/skills/diagram-design/assets/example-gantt.html +137 -0
  37. package/skills/diagram-design/assets/example-high-level-dark.html +251 -0
  38. package/skills/diagram-design/assets/example-high-level-full.html +247 -0
  39. package/skills/diagram-design/assets/example-high-level-vertical-dark.html +274 -0
  40. package/skills/diagram-design/assets/example-high-level-vertical-full.html +252 -0
  41. package/skills/diagram-design/assets/example-high-level-vertical.html +325 -0
  42. package/skills/diagram-design/assets/example-high-level.html +301 -0
  43. package/skills/diagram-design/assets/example-import-drawio.html +185 -0
  44. package/skills/diagram-design/assets/example-import-mermaid.html +70 -0
  45. package/skills/diagram-design/assets/example-it-state-dark.html +90 -0
  46. package/skills/diagram-design/assets/example-it-state-full.html +69 -0
  47. package/skills/diagram-design/assets/example-it-state.html +128 -0
  48. package/skills/diagram-design/assets/example-layers-dark.html +123 -0
  49. package/skills/diagram-design/assets/example-layers-full.html +126 -0
  50. package/skills/diagram-design/assets/example-layers.html +123 -0
  51. package/skills/diagram-design/assets/example-line-dark.html +111 -0
  52. package/skills/diagram-design/assets/example-line-full.html +105 -0
  53. package/skills/diagram-design/assets/example-line.html +111 -0
  54. package/skills/diagram-design/assets/example-loop-dark.html +100 -0
  55. package/skills/diagram-design/assets/example-loop-full.html +137 -0
  56. package/skills/diagram-design/assets/example-loop-terminal.html +347 -0
  57. package/skills/diagram-design/assets/example-loop.html +100 -0
  58. package/skills/diagram-design/assets/example-medallion-dark.html +159 -0
  59. package/skills/diagram-design/assets/example-medallion-full.html +201 -0
  60. package/skills/diagram-design/assets/example-medallion.html +159 -0
  61. package/skills/diagram-design/assets/example-nested-dark.html +132 -0
  62. package/skills/diagram-design/assets/example-nested-full.html +135 -0
  63. package/skills/diagram-design/assets/example-nested.html +136 -0
  64. package/skills/diagram-design/assets/example-org-chart-dark.html +45 -0
  65. package/skills/diagram-design/assets/example-org-chart-full.html +45 -0
  66. package/skills/diagram-design/assets/example-org-chart.html +45 -0
  67. package/skills/diagram-design/assets/example-paved-road-animated.html +546 -0
  68. package/skills/diagram-design/assets/example-policy-trace-animated.html +490 -0
  69. package/skills/diagram-design/assets/example-process-dark.html +64 -0
  70. package/skills/diagram-design/assets/example-process-full.html +74 -0
  71. package/skills/diagram-design/assets/example-process.html +64 -0
  72. package/skills/diagram-design/assets/example-pyramid-dark.html +119 -0
  73. package/skills/diagram-design/assets/example-pyramid-full.html +122 -0
  74. package/skills/diagram-design/assets/example-pyramid.html +119 -0
  75. package/skills/diagram-design/assets/example-quadrant-consultant.html +166 -0
  76. package/skills/diagram-design/assets/example-quadrant-dark.html +135 -0
  77. package/skills/diagram-design/assets/example-quadrant-full.html +138 -0
  78. package/skills/diagram-design/assets/example-quadrant.html +135 -0
  79. package/skills/diagram-design/assets/example-queue-animated.html +577 -0
  80. package/skills/diagram-design/assets/example-radar-dark.html +139 -0
  81. package/skills/diagram-design/assets/example-radar-full.html +135 -0
  82. package/skills/diagram-design/assets/example-radar.html +139 -0
  83. package/skills/diagram-design/assets/example-scatter-dark.html +141 -0
  84. package/skills/diagram-design/assets/example-scatter-full.html +116 -0
  85. package/skills/diagram-design/assets/example-scatter.html +141 -0
  86. package/skills/diagram-design/assets/example-sequence-dark.html +222 -0
  87. package/skills/diagram-design/assets/example-sequence-full.html +388 -0
  88. package/skills/diagram-design/assets/example-sequence-oauth-dark.html +188 -0
  89. package/skills/diagram-design/assets/example-sequence-oauth-full.html +350 -0
  90. package/skills/diagram-design/assets/example-sequence-oauth.html +227 -0
  91. package/skills/diagram-design/assets/example-sequence.html +222 -0
  92. package/skills/diagram-design/assets/example-state-dark.html +147 -0
  93. package/skills/diagram-design/assets/example-state-full.html +150 -0
  94. package/skills/diagram-design/assets/example-state.html +147 -0
  95. package/skills/diagram-design/assets/example-swimlane-dark.html +172 -0
  96. package/skills/diagram-design/assets/example-swimlane-full.html +175 -0
  97. package/skills/diagram-design/assets/example-swimlane.html +172 -0
  98. package/skills/diagram-design/assets/example-timeline-dark.html +135 -0
  99. package/skills/diagram-design/assets/example-timeline-full.html +138 -0
  100. package/skills/diagram-design/assets/example-timeline.html +135 -0
  101. package/skills/diagram-design/assets/example-tree-dark.html +173 -0
  102. package/skills/diagram-design/assets/example-tree-full.html +176 -0
  103. package/skills/diagram-design/assets/example-tree.html +173 -0
  104. package/skills/diagram-design/assets/example-venn-dark.html +132 -0
  105. package/skills/diagram-design/assets/example-venn-full.html +135 -0
  106. package/skills/diagram-design/assets/example-venn.html +110 -0
  107. package/skills/diagram-design/assets/icons.html +230 -0
  108. package/skills/diagram-design/assets/index.html +369 -0
  109. package/skills/diagram-design/assets/template-dark.html +85 -0
  110. package/skills/diagram-design/assets/template-full.html +413 -0
  111. package/skills/diagram-design/assets/template-motion.html +434 -0
  112. package/skills/diagram-design/assets/template-terminal.html +173 -0
  113. package/skills/diagram-design/assets/template.html +86 -0
  114. package/skills/diagram-design/references/animation.md +141 -0
  115. package/skills/diagram-design/references/export.md +136 -0
  116. package/skills/diagram-design/references/import-drawio.md +171 -0
  117. package/skills/diagram-design/references/import-mermaid.md +126 -0
  118. package/skills/diagram-design/references/onboarding.md +297 -0
  119. package/skills/diagram-design/references/output-spec.md +181 -0
  120. package/skills/diagram-design/references/primitive-annotation.md +36 -0
  121. package/skills/diagram-design/references/primitive-icons.md +827 -0
  122. package/skills/diagram-design/references/primitive-sketchy.md +43 -0
  123. package/skills/diagram-design/references/primitive-terminal.md +76 -0
  124. package/skills/diagram-design/references/semantic-patterns.md +122 -0
  125. package/skills/diagram-design/references/style-guide.md +139 -0
  126. package/skills/diagram-design/references/type-architecture.md +78 -0
  127. package/skills/diagram-design/references/type-bar.md +48 -0
  128. package/skills/diagram-design/references/type-data-flow.md +374 -0
  129. package/skills/diagram-design/references/type-dp-integration.md +410 -0
  130. package/skills/diagram-design/references/type-dp-security-matrix.md +379 -0
  131. package/skills/diagram-design/references/type-er.md +23 -0
  132. package/skills/diagram-design/references/type-flowchart.md +23 -0
  133. package/skills/diagram-design/references/type-gantt.md +45 -0
  134. package/skills/diagram-design/references/type-high-level.md +458 -0
  135. package/skills/diagram-design/references/type-it-state.md +470 -0
  136. package/skills/diagram-design/references/type-layers.md +26 -0
  137. package/skills/diagram-design/references/type-line.md +44 -0
  138. package/skills/diagram-design/references/type-loop.md +223 -0
  139. package/skills/diagram-design/references/type-medallion.md +356 -0
  140. package/skills/diagram-design/references/type-nested.md +22 -0
  141. package/skills/diagram-design/references/type-org-chart.md +44 -0
  142. package/skills/diagram-design/references/type-process.md +495 -0
  143. package/skills/diagram-design/references/type-pyramid.md +33 -0
  144. package/skills/diagram-design/references/type-quadrant.md +81 -0
  145. package/skills/diagram-design/references/type-radar.md +80 -0
  146. package/skills/diagram-design/references/type-scatter.md +39 -0
  147. package/skills/diagram-design/references/type-sequence.md +130 -0
  148. package/skills/diagram-design/references/type-state.md +21 -0
  149. package/skills/diagram-design/references/type-swimlane.md +20 -0
  150. package/skills/diagram-design/references/type-timeline.md +20 -0
  151. package/skills/diagram-design/references/type-tree.md +24 -0
  152. package/skills/diagram-design/references/type-venn.md +26 -0
  153. package/skills/diagram-design/scripts/drawio_extract.py +856 -0
  154. package/skills/diagram-design/scripts/mermaid_extract.py +1285 -0
  155. package/skills/diagram-design/scripts/self_check.py +389 -0
package/skills/diagram-design/assets/example-high-level.html ADDED
@@ -0,0 +1,301 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>High-level architecture · End-to-end stack</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
8
+ <style>
9
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
10
+ :root {
11
+ --color-paper: #f5f5f5;
12
+ --color-ink: #2d3142;
13
+ --color-muted: #4f5d75;
14
+ --color-accent: #eb6c36;
15
+ --font-sans: 'Geist', system-ui, sans-serif;
16
+ --font-serif: 'Instrument Serif', serif;
17
+ --font-mono: 'Geist Mono', ui-monospace, monospace;
18
+ }
19
+ body {
20
+ font-family: var(--font-sans);
21
+ background: var(--color-paper);
22
+ color: var(--color-ink);
23
+ min-height: 100vh;
24
+ display: flex;
25
+ align-items: center;
26
+ justify-content: center;
27
+ padding: 3rem 2rem;
28
+ }
29
+ .frame { max-width: 1200px; width: 100%; }
30
+ .eyebrow {
31
+ font-family: var(--font-mono);
32
+ font-size: 0.66rem;
33
+ font-weight: 500;
34
+ letter-spacing: 0.18em;
35
+ text-transform: uppercase;
36
+ color: var(--color-muted);
37
+ margin-bottom: 0.5rem;
38
+ }
39
+ h1 {
40
+ font-family: var(--font-serif);
41
+ font-size: clamp(1.5rem, 2.4vw + 0.75rem, 2rem);
42
+ font-weight: 400;
43
+ letter-spacing: -0.02em;
44
+ line-height: 1.15;
45
+ margin-bottom: 1.5rem;
46
+ }
47
+ svg { width: 100%; min-width: 960px; display: block; }
48
+ </style>
49
+ </head>
50
+ <body>
51
+ <div class="frame">
52
+ <p class="eyebrow">Architecture · Diagram Design</p>
53
+ <h1>High-level architecture · End-to-end stack</h1>
54
+
55
+ <svg viewBox="0 0 1000 540" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="high-level-title high-level-desc">
56
+ <title id="high-level-title">High-level architecture · End-to-end stack</title>
57
+ <desc id="high-level-desc">Architecture diagram showing data sources moving through Apache NiFi and MinIO into Trino, data modeling, and Superset dashboards, with Airflow orchestration.</desc>
58
+ <defs>
59
+ <pattern id="dots" width="22" height="22" patternUnits="userSpaceOnUse">
60
+ <circle cx="1" cy="1" r="0.9" fill="rgba(45,49,66,0.10)"/>
61
+ </pattern>
62
+ <marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
63
+ <polygon points="0 0, 8 3, 0 6" fill="#4f5d75"/>
64
+ </marker>
65
+ <marker id="arrow-accent" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
66
+ <polygon points="0 0, 8 3, 0 6" fill="#eb6c36"/>
67
+ </marker>
68
+ <marker id="arrow-sm" markerWidth="6" markerHeight="5" refX="5" refY="2.5" orient="auto">
69
+ <polygon points="0 0, 6 2.5, 0 5" fill="#4f5d75"/>
70
+ </marker>
71
+ </defs>
72
+
73
+ <!-- Background -->
74
+ <rect width="100%" height="100%" fill="#f5f5f5"/>
75
+ <rect width="100%" height="100%" fill="url(#dots)" opacity="0.55"/>
76
+
77
+ <!-- ═══════════════════════════════════════════
78
+ PHASE CHEVRON BANNER
79
+ ═══════════════════════════════════════════ -->
80
+ <polygon points="0,4 188,4 200,18 188,32 0,32" fill="#2d3142"/>
81
+ <polygon points="200,4 388,4 400,18 388,32 200,32 212,18" fill="#3d4460"/>
82
+ <polygon points="400,4 588,4 600,18 588,32 400,32 412,18" fill="#2d3142"/>
83
+ <polygon points="600,4 788,4 800,18 788,32 600,32 612,18" fill="#3d4460"/>
84
+ <polygon points="800,4 1000,4 1000,32 800,32 812,18" fill="#2d3142"/>
85
+
86
+ <text x="100" y="21" fill="#f5f5f5" font-size="7" font-family="'Geist Mono', monospace" letter-spacing="0.14em" text-anchor="middle">DATA SOURCES</text>
87
+ <text x="300" y="21" fill="#f5f5f5" font-size="7" font-family="'Geist Mono', monospace" letter-spacing="0.14em" text-anchor="middle">INGESTION</text>
88
+ <text x="500" y="21" fill="#f5f5f5" font-size="7" font-family="'Geist Mono', monospace" letter-spacing="0.14em" text-anchor="middle">STORAGE</text>
89
+ <text x="700" y="21" fill="#f5f5f5" font-size="7" font-family="'Geist Mono', monospace" letter-spacing="0.13em" text-anchor="middle">TRANSFORMATION &amp; ANALYSIS</text>
90
+ <text x="900" y="21" fill="#f5f5f5" font-size="7" font-family="'Geist Mono', monospace" letter-spacing="0.14em" text-anchor="middle">VISUALIZATION</text>
91
+
92
+ <!-- ═══════════════════════════════════════════
93
+ STRUCTURAL ZONES
94
+ ═══════════════════════════════════════════ -->
95
+ <!-- Data sources zone (external, dashed border) -->
96
+ <rect x="4" y="40" width="152" height="336" rx="6" fill="rgba(45,49,66,0.02)" stroke="rgba(45,49,66,0.20)" stroke-width="0.8" stroke-dasharray="6,3"/>
97
+ <text x="80" y="52" fill="#4f5d75" font-size="7" font-family="'Geist Mono', monospace" letter-spacing="0.14em" text-anchor="middle">SOURCES</text>
98
+
99
+ <!-- Kubernetes boundary (solid) -->
100
+ <rect x="164" y="40" width="832" height="336" rx="8" fill="rgba(45,49,66,0.02)" stroke="rgba(45,49,66,0.18)" stroke-width="1.2"/>
101
+
102
+ <!-- Identity Manager bar -->
103
+ <rect x="4" y="388" width="992" height="40" rx="6" fill="rgba(45,49,66,0.05)" stroke="rgba(45,49,66,0.20)" stroke-width="0.8"/>
104
+
105
+ <!-- ═══════════════════════════════════════════
106
+ ARROWS — drawn before boxes (z-order rule)
107
+ ═══════════════════════════════════════════ -->
108
+
109
+ <!-- Data sources → NiFi (staggered entry points) -->
110
+ <path d="M 144,92 H 156 Q 164,92 164,100 V 112 Q 164,120 176,120" fill="none" stroke="#4f5d75" stroke-width="1" marker-end="url(#arrow)"/>
111
+ <path d="M 144,172 H 156 Q 164,172 164,164 V 144 Q 164,136 176,136" fill="none" stroke="#4f5d75" stroke-width="1" marker-end="url(#arrow)"/>
112
+ <path d="M 144,252 H 156 Q 164,252 164,244 V 160 Q 164,152 176,152" fill="none" stroke="#4f5d75" stroke-width="1" marker-end="url(#arrow)"/>
113
+ <path d="M 144,336 H 156 Q 164,336 164,328 V 176 Q 164,168 176,168" fill="none" stroke="#4f5d75" stroke-width="1" marker-end="url(#arrow)"/>
114
+
115
+ <!-- Airflow → tools (dashed orchestration drops) -->
116
+ <line x1="452" y1="96" x2="452" y2="104" stroke="#4f5d75" stroke-width="1" stroke-dasharray="4,3" marker-end="url(#arrow-sm)"/>
117
+ <line x1="682" y1="96" x2="682" y2="144" stroke="#4f5d75" stroke-width="1" stroke-dasharray="4,3" marker-end="url(#arrow-sm)"/>
118
+ <line x1="896" y1="96" x2="896" y2="144" stroke="#4f5d75" stroke-width="1" stroke-dasharray="4,3" marker-end="url(#arrow-sm)"/>
119
+
120
+ <!-- NiFi → Trino (bend up) -->
121
+ <path d="M 328,152 H 344 Q 348,152 348,148 V 144 Q 348,140 352,140 H 372" fill="none" stroke="#4f5d75" stroke-width="1" marker-end="url(#arrow)"/>
122
+
123
+ <!-- NiFi → MinIO (bend down — ACCENT primary path) -->
124
+ <path d="M 328,152 H 344 Q 352,152 352,160 V 240 Q 352,248 372,248" fill="none" stroke="#eb6c36" stroke-width="1.2" marker-end="url(#arrow-accent)"/>
125
+
126
+ <!-- Trino → MinIO (vertical, Trino queries storage) -->
127
+ <line x1="448" y1="176" x2="448" y2="208" stroke="#4f5d75" stroke-width="1" marker-end="url(#arrow)"/>
128
+ <!-- MinIO → Trino (write-back, dashed) -->
129
+ <line x1="456" y1="208" x2="456" y2="176" stroke="rgba(45,49,66,0.30)" stroke-width="1" stroke-dasharray="4,3" marker-end="url(#arrow)"/>
130
+
131
+ <!-- Trino → Data Modeling (bend down) -->
132
+ <path d="M 532,140 H 556 Q 564,140 564,148 V 176 Q 564,184 600,184" fill="none" stroke="#4f5d75" stroke-width="1" marker-end="url(#arrow)"/>
133
+
134
+ <!-- MinIO → Data Modeling (bend up — ACCENT primary path) -->
135
+ <path d="M 532,248 H 556 Q 564,248 564,240 V 192 Q 564,184 600,184" fill="none" stroke="#eb6c36" stroke-width="1.2" marker-end="url(#arrow-accent)"/>
136
+
137
+ <!-- Data Modeling → Dashboards (straight) -->
138
+ <line x1="764" y1="184" x2="820" y2="184" stroke="#4f5d75" stroke-width="1" marker-end="url(#arrow)"/>
139
+
140
+ <!-- ═══════════════════════════════════════════
141
+ NODES
142
+ ═══════════════════════════════════════════ -->
143
+
144
+ <!-- ── WEB ── -->
145
+ <rect x="12" y="60" width="132" height="64" rx="6" fill="#f5f5f5"/>
146
+ <rect x="12" y="60" width="132" height="64" rx="6" fill="white" stroke="rgba(45,49,66,0.22)" stroke-width="1"/>
147
+ <rect x="20" y="66" width="22" height="12" rx="2" fill="transparent" stroke="rgba(45,49,66,0.28)" stroke-width="0.8"/>
148
+ <text x="31" y="75" fill="rgba(45,49,66,0.55)" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">EXT</text>
149
+ <svg x="66" y="66" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#2d3142" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
150
+ <circle cx="12" cy="12" r="9"/>
151
+ <path d="M3.6 9h16.8M3.6 15h16.8"/>
152
+ <path d="M11.5 3a17 17 0 0 0 0 18M12.5 3a17 17 0 0 1 0 18"/>
153
+ </svg>
154
+ <text x="78" y="102" fill="#2d3142" font-size="11" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">WEB</text>
155
+ <text x="78" y="114" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle">Census · Survey · Admin</text>
156
+
157
+ <!-- ── FTP ── -->
158
+ <rect x="12" y="140" width="132" height="64" rx="6" fill="#f5f5f5"/>
159
+ <rect x="12" y="140" width="132" height="64" rx="6" fill="white" stroke="rgba(45,49,66,0.22)" stroke-width="1"/>
160
+ <rect x="20" y="146" width="22" height="12" rx="2" fill="transparent" stroke="rgba(45,49,66,0.28)" stroke-width="0.8"/>
161
+ <text x="31" y="155" fill="rgba(45,49,66,0.55)" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">EXT</text>
162
+ <svg x="66" y="146" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#2d3142" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
163
+ <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/>
164
+ <path d="M7 9l5 -5l5 5"/>
165
+ <path d="M12 4l0 12"/>
166
+ </svg>
167
+ <text x="78" y="182" fill="#2d3142" font-size="11" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">FTP</text>
168
+ <text x="78" y="194" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle">Census · Business</text>
169
+
170
+ <!-- ── DB Connection ── -->
171
+ <rect x="12" y="220" width="132" height="64" rx="6" fill="#f5f5f5"/>
172
+ <rect x="12" y="220" width="132" height="64" rx="6" fill="white" stroke="rgba(45,49,66,0.22)" stroke-width="1"/>
173
+ <rect x="20" y="226" width="22" height="12" rx="2" fill="transparent" stroke="rgba(45,49,66,0.28)" stroke-width="0.8"/>
174
+ <text x="31" y="235" fill="rgba(45,49,66,0.55)" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">EXT</text>
175
+ <svg x="66" y="226" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#2d3142" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
176
+ <path d="M4 6a8 3 0 1 0 16 0a8 3 0 1 0 -16 0"/>
177
+ <path d="M4 6v6a8 3 0 0 0 16 0v-6"/>
178
+ <path d="M4 12v6a8 3 0 0 0 16 0v-6"/>
179
+ </svg>
180
+ <text x="78" y="262" fill="#2d3142" font-size="11" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">DB Connection</text>
181
+ <text x="78" y="274" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle">CDC · SQL · API</text>
182
+
183
+ <!-- ── Legacy System ── -->
184
+ <rect x="12" y="304" width="132" height="64" rx="6" fill="#f5f5f5"/>
185
+ <rect x="12" y="304" width="132" height="64" rx="6" fill="white" stroke="rgba(45,49,66,0.22)" stroke-width="1"/>
186
+ <rect x="20" y="310" width="22" height="12" rx="2" fill="transparent" stroke="rgba(45,49,66,0.28)" stroke-width="0.8"/>
187
+ <text x="31" y="319" fill="rgba(45,49,66,0.55)" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">EXT</text>
188
+ <svg x="66" y="310" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#2d3142" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
189
+ <path d="M3 7a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3"/>
190
+ <path d="M3 15a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3l0 -2"/>
191
+ <path d="M7 8l0 .01"/><path d="M7 16l0 .01"/>
192
+ </svg>
193
+ <text x="78" y="346" fill="#2d3142" font-size="11" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Legacy System</text>
194
+ <text x="78" y="358" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle">Trade data</text>
195
+
196
+ <!-- ── Airflow orchestration bar ── -->
197
+ <rect x="176" y="52" width="808" height="44" rx="4" fill="rgba(45,49,66,0.05)" stroke="rgba(45,49,66,0.18)" stroke-width="0.8"/>
198
+ <svg x="950" y="58" width="24" height="24" viewBox="0 0 24 24" fill="#4f5d75" aria-hidden="true">
199
+ <path d="M17.195 16.822l4.002-4.102C23.55 10.308 23.934 5.154 24 .43a.396.396 0 0 0-.246-.373.392.392 0 0 0-.437.09l-6.495 6.658-4.102-4.003C10.309.45 5.154.066.43 0H.423a.397.397 0 0 0-.277.683l6.658 6.494-4.003 4.103C.45 13.692.065 18.846 0 23.57a.398.398 0 0 0 .683.282l6.494-6.657 3.934 3.837.17.165c2.41 2.353 7.565 2.737 12.288 2.803h.006a.397.397 0 0 0 .277-.683l-6.657-6.495z"/>
200
+ </svg>
201
+ <text x="564" y="71" fill="#2d3142" font-size="10" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Orchestration / Workflow Automation</text>
202
+ <text x="564" y="84" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle">(Apache Airflow)</text>
203
+
204
+ <!-- ── Apache NiFi ── -->
205
+ <rect x="176" y="112" width="152" height="80" rx="6" fill="#f5f5f5"/>
206
+ <rect x="176" y="112" width="152" height="80" rx="6" fill="white" stroke="rgba(45,49,66,0.25)" stroke-width="1"/>
207
+ <rect x="184" y="118" width="30" height="12" rx="2" fill="transparent" stroke="rgba(45,49,66,0.28)" stroke-width="0.8"/>
208
+ <text x="199" y="127" fill="rgba(45,49,66,0.55)" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">COLL</text>
209
+ <svg x="240" y="118" width="24" height="24" viewBox="0 0 24 24" fill="#2d3142" aria-hidden="true">
210
+ <path d="M11.648 0a.093.093 0 0 0-.084.053A30.71 30.71 0 0 1 8.592 4.73c-2.09 2.728-5.145 6.466-5.145 10.364a8.201 8.201 0 0 0 8.201 8.2v-5.003c0-.106.087-.193.194-.193h2.81v-2.813c0-.106.087-.191.194-.191h5.004c0-3.9-3.056-7.636-5.145-10.364A30.712 30.712 0 0 1 11.732.053.094.094 0 0 0 11.648 0zm-1.632 3.867c.05 0 .08.034.037.112-.11.197-.218.397-.328.593-.396.702-.819 1.389-1.23 2.08-.196-.032-.39-.06-.585-.088.495-.651 1-1.296 1.48-1.959.153-.209.302-.423.454-.634a.24.24 0 0 1 .172-.104zM7.44 7.186c.221.035.444.076.666.119-.073.129-.15.256-.223.383a29.073 29.073 0 0 0-1.625 3.261c-.874 2.123-1.383 4.444-.77 6.707a8.222 8.222 0 0 0 2.217 3.74c.083.083-.02.216-.119.155a7.568 7.568 0 0 1-.93-.686A7.674 7.674 0 0 1 4.1 16.248c-.329-2.156.387-4.246 1.418-6.115a27.44 27.44 0 0 1 1.92-2.947zm7.931 8.435a.193.193 0 0 0-.191.191V18.3h2.677V15.62zm3.299 0V18.3h1.348a7.975 7.975 0 0 0 .515-2.678zm-6.303 3.004a.193.193 0 0 0-.191.193v2.485h2.678v-2.678Zm3.295.484v2.68h2.115a.562.562 0 0 0 .399-.162v-.004a.562.562 0 0 0 .16-.397V19.11zm3.674.182v1.98a7.999 7.999 0 0 0 1.217-1.98zm-6.969 2.824a.193.193 0 0 0-.191.192v1.672a7.997 7.997 0 0 0 2.678-.516v-1.348zm3.48.668V24a8.008 8.008 0 0 0 1.98-1.217z"/>
211
+ </svg>
212
+ <text x="252" y="154" fill="#2d3142" font-size="11" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Apache NiFi</text>
213
+ <text x="252" y="166" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle">Collect · route · transform</text>
214
+
215
+ <!-- ── Trino ── -->
216
+ <rect x="372" y="104" width="160" height="72" rx="6" fill="#f5f5f5"/>
217
+ <rect x="372" y="104" width="160" height="72" rx="6" fill="white" stroke="rgba(45,49,66,0.25)" stroke-width="1"/>
218
+ <rect x="380" y="110" width="28" height="12" rx="2" fill="transparent" stroke="rgba(45,49,66,0.28)" stroke-width="0.8"/>
219
+ <text x="394" y="119" fill="rgba(45,49,66,0.55)" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">VIRT</text>
220
+ <svg x="440" y="110" width="24" height="24" viewBox="0 0 24 24" fill="#2d3142" aria-hidden="true">
221
+ <path d="M14.124 16.8529a.1615.1615 0 1 1 .1576.1614.1577.1577 0 0 1-.1576-.1614zm-5.607-.1576a.1614.1614 0 1 0 0 .3228.1614.1614 0 0 0 0-.3228zm10.1341-.6648v1.9869c-.031.5788-.524 1.0237-1.1029.9954h-.3843a5.0596 5.0596 0 0 1-1.1298 1.7178.3192.3192 0 0 0 0 .465l.2382.2191a.3036.3036 0 0 1 .0385.4304c-1.126 1.3835-2.9669 2.1521-5.0498 2.1521a6.575 6.575 0 0 1-4.8192-1.8985c-.0029-.0032-.0059-.0063-.0087-.0096a.6302.6302 0 0 1 .0548-.8896c.137-.1265.1371-.3462 0-.4727a4.944 4.944 0 0 1-1.126-1.714h-.3497c-.5797.0284-1.0737-.416-1.1068-.9954v-1.9869c.0351-.5779.5286-1.02 1.1068-.9915h.2728a5.7648 5.7648 0 0 1 2.0791-3.0936c-.4227-1.0991-1.1529-3.2551-1.226-5.0075C6.0229 4.4705 6.2189.078 7.8253.001c1.6064-.0768 1.3719 4.0275 1.0991 6.6946a32.732 32.732 0 0 0-.123 4.4503 6.994 6.994 0 0 1 2.4826-.4304 7.2414 7.2414 0 0 1 1.7371.2075c.2614-1.2682.8762-3.574 2.0292-5.1958 1.6717-2.352 3.4357-4.7808 4.6116-4.1006 1.176.6802-.3074 3.1398-1.3297 4.4272-1.0222 1.2874-2.7862 3.2089-3.3742 4.2274-.2114.3843-.4304.8032-.5956 1.1529a5.7375 5.7375 0 0 1 2.9169 3.6125h.073v-2.3058a.3075.3075 0 0 0-.1806-.2844.9148.9148 0 0 1-.5573-.8148 1.0184 1.0184 0 0 1 .9045-.9044c.5593-.0598 1.061.3452 1.1208.9044a.9187.9187 0 0 1-.5534.8148.3074.3074 0 0 0-.1691.2844v2.1522a.3113.3113 0 0 0 .1691.2805.9724.9724 0 0 1 .5648.857z"/>
222
+ </svg>
223
+ <text x="452" y="146" fill="#2d3142" font-size="11" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Trino</text>
224
+ <text x="452" y="158" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle">SQL · data virtualization</text>
225
+
226
+ <!-- ── MinIO / S3 (FOCAL) ── -->
227
+ <rect x="372" y="208" width="160" height="80" rx="8" fill="#f5f5f5"/>
228
+ <rect x="372" y="208" width="160" height="80" rx="8" fill="rgba(235,108,54,0.08)" stroke="#eb6c36" stroke-width="1.2"/>
229
+ <rect x="380" y="214" width="36" height="12" rx="2" fill="transparent" stroke="rgba(235,108,54,0.50)" stroke-width="0.8"/>
230
+ <text x="398" y="223" fill="rgba(235,108,54,0.80)" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">STORE</text>
231
+ <svg x="440" y="214" width="24" height="24" viewBox="0 0 24 24" fill="#eb6c36" aria-hidden="true">
232
+ <path d="M13.2072.006c-.6216-.0478-1.2.1943-1.6211.582a2.15 2.15 0 0 0-.0938 3.0352l3.4082 3.5507a3.042 3.042 0 0 1-.664 4.6875l-.463.2383V7.2853a15.4198 15.4198 0 0 0-8.0174 10.4862v.0176l6.5487-3.3281v7.621L13.7794 24V13.6817l.8965-.4629a4.4432 4.4432 0 0 0 1.2207-7.0292l-3.371-3.5254a.7489.7489 0 0 1 .037-1.0547.7522.7522 0 0 1 1.0567.0371l.4668.4863-.006.0059 4.0704 4.2441a.0566.0566 0 0 0 .082 0 .06.06 0 0 0 0-.0703l-3.1406-5.1425-.1484.1425.1484-.1445C14.4945.3926 13.8287.0538 13.2072.006Zm-.9024 9.8652v2.9941l-4.1523 2.1484a13.9787 13.9787 0 0 1 2.7676-3.9277 14.1784 14.1784 0 0 1 1.3847-1.2148z"/>
233
+ </svg>
234
+ <text x="452" y="252" fill="#eb6c36" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">MinIO / S3</text>
235
+ <text x="452" y="268" fill="#eb6c36" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" opacity="0.75">Object store · S3-API</text>
236
+
237
+ <!-- ── Data Modeling & Analysis ── -->
238
+ <rect x="600" y="144" width="164" height="80" rx="6" fill="#f5f5f5"/>
239
+ <rect x="600" y="144" width="164" height="80" rx="6" fill="white" stroke="rgba(45,49,66,0.25)" stroke-width="1"/>
240
+ <rect x="608" y="150" width="32" height="12" rx="2" fill="transparent" stroke="rgba(45,49,66,0.28)" stroke-width="0.8"/>
241
+ <text x="624" y="159" fill="rgba(45,49,66,0.55)" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">ANLZ</text>
242
+ <svg x="670" y="150" width="24" height="24" viewBox="0 0 24 24" fill="#2d3142" aria-hidden="true">
243
+ <path d="M7.157 22.201A1.784 1.799 0 0 1 5.374 24a1.784 1.799 0 0 1-1.784-1.799 1.784 1.799 0 0 1 1.784-1.799 1.784 1.799 0 0 1 1.783 1.799zM20.582 1.427a1.415 1.427 0 0 1-1.415 1.428 1.415 1.427 0 0 1-1.416-1.428A1.415 1.427 0 0 1 19.167 0a1.415 1.427 0 0 1 1.415 1.427zM4.992 3.336A1.047 1.056 0 0 1 3.946 4.39a1.047 1.056 0 0 1-1.047-1.055A1.047 1.056 0 0 1 3.946 2.28a1.047 1.056 0 0 1 1.046 1.056zm7.336 1.517c3.769 0 7.06 1.38 8.768 3.424a9.363 9.363 0 0 0-3.393-4.547 9.238 9.238 0 0 0-5.377-1.728A9.238 9.238 0 0 0 6.95 3.73a9.363 9.363 0 0 0-3.394 4.547c1.713-2.04 5.004-3.424 8.772-3.424zm.001 13.295c-3.768 0-7.06-1.381-8.768-3.425a9.363 9.363 0 0 0 3.394 4.547A9.238 9.238 0 0 0 12.33 21a9.238 9.238 0 0 0 5.377-1.729 9.363 9.363 0 0 0 3.393-4.547c-1.712 2.044-5.003 3.425-8.772 3.425z"/>
244
+ </svg>
245
+ <text x="682" y="186" fill="#2d3142" font-size="11" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Data Modeling</text>
246
+ <text x="682" y="198" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle">Notebook · Python · R</text>
247
+
248
+ <!-- ── Dashboards & Report ── -->
249
+ <rect x="820" y="144" width="152" height="80" rx="6" fill="#f5f5f5"/>
250
+ <rect x="820" y="144" width="152" height="80" rx="6" fill="white" stroke="rgba(45,49,66,0.25)" stroke-width="1"/>
251
+ <rect x="828" y="150" width="28" height="12" rx="2" fill="transparent" stroke="rgba(45,49,66,0.28)" stroke-width="0.8"/>
252
+ <text x="842" y="159" fill="rgba(45,49,66,0.55)" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">DASH</text>
253
+ <svg x="884" y="150" width="24" height="24" viewBox="0 0 24 24" fill="#2d3142" aria-hidden="true">
254
+ <path d="M6.168 6.045C2.603 6.045 0 8.579 0 12.014c0 3.434 2.603 5.941 6.168 5.941 2.184 0 3.888-1.026 5.775-3.078 1.53 2.033 4.037 3.136 5.89 3.078 3.566 0 6.167-2.503 6.167-5.941 0-3.438-2.601-5.97-6.168-5.97-2.864 0-5.138 2.425-5.771 3.173-.76-.9-1.674-1.665-2.682-2.274-1.019-.588-2.084-.898-3.211-.898z"/>
255
+ </svg>
256
+ <text x="896" y="186" fill="#2d3142" font-size="11" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Dashboards</text>
257
+ <text x="896" y="198" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle">Superset · reports</text>
258
+
259
+ <!-- ── Kubernetes label (bottom-left of boundary) ── -->
260
+ <svg x="180" y="348" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#4f5d75" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
261
+ <path d="M19.875 6.27a2.225 2.225 0 0 1 1.125 1.948v7.284c0 .809-.443 1.555-1.158 1.948l-6.75 3.98a2.5 2.5 0 0 1-2.184 0l-6.75-3.98a2.225 2.225 0 0 1-1.158-1.948v-7.284c0-.809.443-1.555 1.158-1.948l6.75-3.98a2.5 2.5 0 0 1 2.184 0z"/>
262
+ <circle cx="12" cy="12" r="3"/>
263
+ <line x1="12" y1="3" x2="12" y2="9"/><line x1="12" y1="15" x2="12" y2="21"/>
264
+ <line x1="20.2" y1="7.5" x2="14.9" y2="10.5"/><line x1="9.1" y1="13.5" x2="3.8" y2="16.5"/>
265
+ <line x1="20.2" y1="16.5" x2="14.9" y2="13.5"/><line x1="9.1" y1="10.5" x2="3.8" y2="7.5"/>
266
+ </svg>
267
+ <text x="204" y="362" fill="#4f5d75" font-size="8" font-weight="500" font-family="'Geist', sans-serif">Kubernetes</text>
268
+
269
+ <!-- ── Identity Manager bar ── -->
270
+ <svg x="16" y="398" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#4f5d75" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
271
+ <path d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1-8.5 15a12 12 0 0 1-8.5-15a12 12 0 0 0 8.5-3"/>
272
+ <circle cx="12" cy="11" r="1" fill="#4f5d75"/>
273
+ <line x1="12" y1="12" x2="12" y2="14.5"/>
274
+ </svg>
275
+ <text x="500" y="410" fill="#2d3142" font-size="10" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Identity Manager</text>
276
+ <text x="500" y="422" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle">(Active Directory)</text>
277
+
278
+ <!-- ═══════════════════════════════════
279
+ LEGEND
280
+ ═══════════════════════════════════ -->
281
+ <line x1="40" y1="440" x2="960" y2="440" stroke="rgba(45,49,66,0.10)" stroke-width="0.8"/>
282
+ <text x="40" y="456" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.18em">LEGEND</text>
283
+
284
+ <rect x="40" y="464" width="20" height="12" rx="3" fill="transparent" stroke="rgba(45,49,66,0.30)" stroke-width="1" stroke-dasharray="4,3"/>
285
+ <text x="68" y="474" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">External source · outside cluster</text>
286
+
287
+ <rect x="252" y="464" width="20" height="12" rx="3" fill="rgba(45,49,66,0.04)" stroke="rgba(45,49,66,0.25)" stroke-width="1"/>
288
+ <text x="280" y="474" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Kubernetes boundary</text>
289
+
290
+ <rect x="436" y="464" width="20" height="12" rx="3" fill="rgba(235,108,54,0.10)" stroke="#eb6c36" stroke-width="1.2"/>
291
+ <text x="464" y="474" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Focal component (MinIO)</text>
292
+
293
+ <line x1="648" y1="466" x2="668" y2="466" stroke="#eb6c36" stroke-width="1.2"/>
294
+ <text x="676" y="471" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Primary data path</text>
295
+
296
+ <line x1="808" y1="466" x2="828" y2="466" stroke="rgba(45,49,66,0.35)" stroke-width="1" stroke-dasharray="4,3"/>
297
+ <text x="836" y="471" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Orchestration trigger</text>
298
+ </svg>
299
+ </div>
300
+ </body>
301
+ </html>
package/skills/diagram-design/assets/example-import-drawio.html ADDED
@@ -0,0 +1,185 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Imported from draw.io — Order platform</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
8
+ <style>
9
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
10
+ :root {
11
+ --color-paper: #f5f5f5; /* white-smoke */
12
+ --color-ink: #2d3142; /* jet-black */
13
+ --color-muted: #4f5d75; /* blue-slate */
14
+ --color-accent: #eb6c36; /* atomic-tangerine */
15
+ --font-sans: 'Geist', system-ui, sans-serif;
16
+ --font-serif: 'Instrument Serif', serif;
17
+ --font-mono: 'Geist Mono', ui-monospace, monospace;
18
+ }
19
+
20
+ body {
21
+ font-family: var(--font-sans);
22
+ background: var(--color-paper);
23
+ color: var(--color-ink);
24
+ min-height: 100vh;
25
+ display: flex;
26
+ align-items: center;
27
+ justify-content: center;
28
+ padding: 3rem 2rem;
29
+ }
30
+
31
+ .frame { max-width: 1200px; width: 100%; }
32
+
33
+ .eyebrow {
34
+ font-family: var(--font-mono);
35
+ font-size: 0.66rem;
36
+ font-weight: 500;
37
+ letter-spacing: 0.18em;
38
+ text-transform: uppercase;
39
+ color: var(--color-muted);
40
+ margin-bottom: 0.5rem;
41
+ }
42
+
43
+ h1 {
44
+ font-family: var(--font-serif);
45
+ font-size: clamp(1.5rem, 2.4vw + 0.75rem, 2rem);
46
+ font-weight: 400;
47
+ letter-spacing: -0.02em;
48
+ line-height: 1.15;
49
+ color: var(--color-ink);
50
+ margin-bottom: 1.5rem;
51
+ }
52
+
53
+ svg { width: 100%; min-width: 900px; display: block; }
54
+ </style>
55
+ </head>
56
+ <body>
57
+ <div class="frame">
58
+ <p class="eyebrow">Architecture · Imported from draw.io · doc-inline · balanced</p>
59
+ <h1>Order platform — request path</h1>
60
+
61
+ <svg viewBox="0 0 960 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="import-drawio-title import-drawio-desc">
62
+ <title id="import-drawio-title">Order platform — request path</title>
63
+ <desc id="import-drawio-desc">Architecture diagram showing web and mobile clients entering through an API Gateway, then reaching authentication, orders, Postgres, object storage, and Redis.</desc>
64
+ <defs>
65
+ <marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#4f5d75"/></marker>
66
+ <marker id="arrow-accent" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#eb6c36"/></marker>
67
+ <marker id="arrow-link" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#2e5aa8"/></marker>
68
+ </defs>
69
+
70
+ <rect width="100%" height="100%" fill="#f5f5f5"/>
71
+
72
+ <!-- Zones -->
73
+ <rect x="40" y="96" width="200" height="224" rx="8" fill="none" stroke="rgba(45,49,66,0.12)" stroke-width="1"/>
74
+ <text x="56" y="120" fill="#7a8399" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em">EDGE</text>
75
+
76
+ <rect x="320" y="96" width="560" height="224" rx="8" fill="none" stroke="rgba(45,49,66,0.12)" stroke-width="1"/>
77
+ <text x="336" y="120" fill="#7a8399" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em">CORE SERVICES</text>
78
+
79
+ <rect x="320" y="368" width="560" height="112" rx="8" fill="none" stroke="rgba(45,49,66,0.12)" stroke-width="1"/>
80
+ <text x="336" y="392" fill="#7a8399" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em">DATA</text>
81
+
82
+ <!-- Connectors (drawn before boxes) -->
83
+ <!-- Web App -> API Gateway -->
84
+ <path d="M220,164 H272 A8,8 0 0 1 280,172 V192 A8,8 0 0 0 288,200 H360" fill="none" stroke="#2e5aa8" stroke-width="1.2" marker-end="url(#arrow-link)"/>
85
+ <!-- Mobile App -> API Gateway -->
86
+ <path d="M220,252 H296 A8,8 0 0 0 304,244 V232 A8,8 0 0 1 312,224 H360" fill="none" stroke="#2e5aa8" stroke-width="1.2" marker-end="url(#arrow-link)"/>
87
+ <!-- API Gateway -> Auth Service -->
88
+ <path d="M560,192 H592 A8,8 0 0 0 600,184 V164 A8,8 0 0 1 608,156 H640" fill="none" stroke="#4f5d75" stroke-width="1.2" marker-end="url(#arrow)"/>
89
+ <!-- API Gateway -> Orders Service -->
90
+ <path d="M560,224 H592 A8,8 0 0 0 600,232 V252 A8,8 0 0 1 608,260 H640" fill="none" stroke="#4f5d75" stroke-width="1.2" marker-end="url(#arrow)"/>
91
+ <!-- Orders Service -> Postgres -->
92
+ <path d="M680,288 V320 A8,8 0 0 1 672,328 H432 A8,8 0 0 0 424,336 V392" fill="none" stroke="#4f5d75" stroke-width="1.2" marker-end="url(#arrow)"/>
93
+ <!-- Orders Service -> Object Store (async) -->
94
+ <path d="M760,288 V344 A8,8 0 0 1 752,352 H616 A8,8 0 0 0 608,360 V392" fill="none" stroke="#4f5d75" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow)"/>
95
+ <!-- Auth Service -> Redis (async) -->
96
+ <path d="M840,156 H848 A8,8 0 0 1 856,164 V392" fill="none" stroke="#4f5d75" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow)"/>
97
+
98
+ <!-- Arrow labels -->
99
+ <rect x="228" y="144" width="44" height="12" rx="2" fill="#f5f5f5"/>
100
+ <text x="250" y="153" fill="#7a8399" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.06em">HTTPS</text>
101
+
102
+ <rect x="228" y="232" width="44" height="12" rx="2" fill="#f5f5f5"/>
103
+ <text x="250" y="241" fill="#7a8399" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.06em">HTTPS</text>
104
+
105
+ <rect x="568" y="172" width="44" height="12" rx="2" fill="#f5f5f5"/>
106
+ <text x="590" y="181" fill="#7a8399" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.06em">VERIFY</text>
107
+
108
+ <rect x="568" y="204" width="44" height="12" rx="2" fill="#f5f5f5"/>
109
+ <text x="590" y="213" fill="#7a8399" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.06em">ROUTE</text>
110
+
111
+ <rect x="536" y="308" width="32" height="12" rx="2" fill="#f5f5f5"/>
112
+ <text x="552" y="317" fill="#7a8399" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.06em">SQL</text>
113
+
114
+ <rect x="768" y="326" width="56" height="12" rx="2" fill="#f5f5f5"/>
115
+ <text x="796" y="335" fill="#7a8399" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.06em">ARCHIVE</text>
116
+
117
+ <rect x="792" y="196" width="56" height="12" rx="2" fill="#f5f5f5"/>
118
+ <text x="820" y="205" fill="#7a8399" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.06em">CACHE</text>
119
+
120
+ <!-- Nodes: Edge -->
121
+ <rect x="60" y="136" width="160" height="56" rx="6" fill="#f5f5f5"/>
122
+ <rect x="60" y="136" width="160" height="56" rx="6" fill="rgba(79,93,117,0.10)" stroke="#7a8399" stroke-width="1"/>
123
+ <text x="140" y="169" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Web App</text>
124
+
125
+ <rect x="60" y="224" width="160" height="56" rx="6" fill="#f5f5f5"/>
126
+ <rect x="60" y="224" width="160" height="56" rx="6" fill="rgba(79,93,117,0.10)" stroke="#7a8399" stroke-width="1"/>
127
+ <text x="140" y="257" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Mobile App</text>
128
+
129
+ <!-- Nodes: Core -->
130
+ <rect x="360" y="176" width="200" height="64" rx="6" fill="#f5f5f5"/>
131
+ <rect x="360" y="176" width="200" height="64" rx="6" fill="rgba(235,108,54,0.08)" stroke="#eb6c36" stroke-width="1"/>
132
+ <text x="460" y="204" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">API Gateway</text>
133
+ <text x="460" y="220" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">single entry point</text>
134
+
135
+ <rect x="640" y="128" width="200" height="56" rx="6" fill="#f5f5f5"/>
136
+ <rect x="640" y="128" width="200" height="56" rx="6" fill="#ffffff" stroke="#2d3142" stroke-width="1"/>
137
+ <text x="740" y="153" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Auth Service</text>
138
+ <text x="740" y="169" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">token check</text>
139
+
140
+ <rect x="640" y="232" width="200" height="56" rx="6" fill="#f5f5f5"/>
141
+ <rect x="640" y="232" width="200" height="56" rx="6" fill="#ffffff" stroke="#2d3142" stroke-width="1"/>
142
+ <text x="740" y="257" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Orders Service</text>
143
+ <text x="740" y="273" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">order write</text>
144
+
145
+ <!-- Nodes: Data -->
146
+ <rect x="344" y="392" width="160" height="64" rx="6" fill="#f5f5f5"/>
147
+ <rect x="344" y="392" width="160" height="64" rx="6" fill="rgba(45,49,66,0.05)" stroke="#4f5d75" stroke-width="1"/>
148
+ <text x="424" y="420" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Postgres</text>
149
+ <text x="424" y="436" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">orders</text>
150
+
151
+ <rect x="528" y="392" width="160" height="64" rx="6" fill="#f5f5f5"/>
152
+ <rect x="528" y="392" width="160" height="64" rx="6" fill="rgba(45,49,66,0.05)" stroke="#4f5d75" stroke-width="1"/>
153
+ <text x="608" y="420" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Object Store</text>
154
+ <text x="608" y="436" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">archive</text>
155
+
156
+ <rect x="712" y="392" width="160" height="64" rx="6" fill="#f5f5f5"/>
157
+ <rect x="712" y="392" width="160" height="64" rx="6" fill="rgba(45,49,66,0.05)" stroke="#4f5d75" stroke-width="1"/>
158
+ <text x="792" y="420" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Redis</text>
159
+ <text x="792" y="436" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">sessions</text>
160
+
161
+ <!-- Legend -->
162
+ <line x1="40" y1="512" x2="920" y2="512" stroke="rgba(45,49,66,0.10)" stroke-width="0.8"/>
163
+ <text x="40" y="532" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.14em">LEGEND</text>
164
+
165
+ <rect x="120" y="524" width="16" height="10" rx="2" fill="rgba(235,108,54,0.08)" stroke="#eb6c36" stroke-width="1"/>
166
+ <text x="144" y="532" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.06em">FOCAL</text>
167
+
168
+ <rect x="240" y="524" width="16" height="10" rx="2" fill="#ffffff" stroke="#2d3142" stroke-width="1"/>
169
+ <text x="264" y="532" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.06em">SERVICE</text>
170
+
171
+ <rect x="376" y="524" width="16" height="10" rx="2" fill="rgba(45,49,66,0.05)" stroke="#4f5d75" stroke-width="1"/>
172
+ <text x="400" y="532" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.06em">STORE</text>
173
+
174
+ <rect x="496" y="524" width="16" height="10" rx="2" fill="rgba(79,93,117,0.10)" stroke="#7a8399" stroke-width="1"/>
175
+ <text x="520" y="532" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.06em">CLIENT</text>
176
+
177
+ <line x1="616" y1="529" x2="648" y2="529" stroke="#2e5aa8" stroke-width="1.2"/>
178
+ <text x="656" y="532" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.06em">HTTP CALL</text>
179
+
180
+ <line x1="772" y1="529" x2="804" y2="529" stroke="#4f5d75" stroke-width="1.2" stroke-dasharray="5,4"/>
181
+ <text x="812" y="532" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.06em">ASYNC</text>
182
+ </svg>
183
+ </div>
184
+ </body>
185
+ </html>
package/skills/diagram-design/assets/example-import-mermaid.html ADDED
@@ -0,0 +1,70 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Imported from Mermaid — Request validation</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
8
+ <style>
9
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
10
+ :root { --paper:#f5f5f5; --ink:#2d3142; --muted:#4f5d75; --soft:#7a8399; --accent:#eb6c36; }
11
+ body { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:48px 32px; background:var(--paper); color:var(--ink); font-family:'Geist',system-ui,sans-serif; }
12
+ .frame { width:100%; max-width:1200px; }
13
+ .eyebrow { margin-bottom:8px; color:var(--muted); font:500 8px 'Geist Mono',monospace; letter-spacing:.14em; text-transform:uppercase; }
14
+ h1 { margin-bottom:24px; font:400 28px/1.15 'Instrument Serif',serif; }
15
+ svg { display:block; width:100%; min-width:900px; }
16
+ </style>
17
+ </head>
18
+ <body>
19
+ <main class="frame">
20
+ <p class="eyebrow">Flowchart · Imported from Mermaid · doc-inline · balanced</p>
21
+ <h1>Request validation and order storage</h1>
22
+ <svg viewBox="0 0 960 600" role="img" aria-labelledby="import-mermaid-title import-mermaid-desc" xmlns="http://www.w3.org/2000/svg">
23
+ <title id="import-mermaid-title">Request validation flow</title>
24
+ <desc id="import-mermaid-desc">Web and mobile requests enter an API gateway, pass a token decision, and reach an order service and Postgres.</desc>
25
+ <defs>
26
+ <marker id="arrow" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8 Z" fill="#4f5d75"/></marker>
27
+ <marker id="arrow-accent" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8 Z" fill="#eb6c36"/></marker>
28
+ </defs>
29
+ <rect width="960" height="600" fill="#f5f5f5"/>
30
+
31
+ <rect x="40" y="80" width="200" height="336" rx="8" fill="none" stroke="rgba(45,49,66,0.12)"/>
32
+ <text x="56" y="104" fill="#7a8399" font-size="8" font-family="'Geist Mono',monospace" letter-spacing=".14em">EDGE</text>
33
+ <rect x="288" y="80" width="632" height="336" rx="8" fill="none" stroke="rgba(45,49,66,0.12)"/>
34
+ <text x="304" y="104" fill="#7a8399" font-size="8" font-family="'Geist Mono',monospace" letter-spacing=".14em">CORE SERVICES</text>
35
+
36
+ <!-- Connectors precede nodes. -->
37
+ <path d="M208,168 H328" fill="none" stroke="#4f5d75" stroke-width="1.2" marker-end="url(#arrow)"/>
38
+ <path d="M208,296 H264 A8,8 0 0 0 272,288 V200 A8,8 0 0 1 280,192 H328" fill="none" stroke="#4f5d75" stroke-width="1.2" marker-end="url(#arrow)"/>
39
+ <path d="M488,192 H568" fill="none" stroke="#eb6c36" stroke-width="1.2" marker-end="url(#arrow-accent)"/>
40
+ <path d="M696,192 H744 A8,8 0 0 1 752,200 V272" fill="none" stroke="#4f5d75" stroke-width="1.2" marker-end="url(#arrow)"/>
41
+ <path d="M632,256 V336 A8,8 0 0 1 624,344 H488 A8,8 0 0 1 480,336 V232" fill="none" stroke="#4f5d75" stroke-width="1.2" marker-end="url(#arrow)"/>
42
+ <path d="M408,160 V136 A8,8 0 0 1 416,128 H504 A8,8 0 0 1 512,136 V168 A8,8 0 0 1 504,176 H488" fill="none" stroke="#4f5d75" stroke-width="1.2" stroke-dasharray="4,4" marker-end="url(#arrow)"/>
43
+ <path d="M752,336 V352 A8,8 0 0 1 744,360 H696 A8,8 0 0 0 688,368 V384" fill="none" stroke="#4f5d75" stroke-width="1.2" marker-end="url(#arrow)"/>
44
+
45
+ <rect x="240" y="148" width="56" height="12" rx="2" fill="#f5f5f5"/><text x="268" y="156" fill="#7a8399" font-size="8" font-family="'Geist Mono',monospace" text-anchor="middle">REQUEST</text>
46
+ <rect x="220" y="276" width="56" height="12" rx="2" fill="#f5f5f5"/><text x="248" y="284" fill="#7a8399" font-size="8" font-family="'Geist Mono',monospace" text-anchor="middle">REQUEST</text>
47
+ <rect x="504" y="172" width="48" height="12" rx="2" fill="#f5f5f5"/><text x="528" y="180" fill="#eb6c36" font-size="8" font-family="'Geist Mono',monospace" text-anchor="middle">VERIFY</text>
48
+ <rect x="708" y="172" width="32" height="12" rx="2" fill="#f5f5f5"/><text x="724" y="180" fill="#7a8399" font-size="8" font-family="'Geist Mono',monospace" text-anchor="middle">YES</text>
49
+ <rect x="544" y="324" width="32" height="12" rx="2" fill="#f5f5f5"/><text x="560" y="332" fill="#7a8399" font-size="8" font-family="'Geist Mono',monospace" text-anchor="middle">NO</text>
50
+ <rect x="432" y="108" width="48" height="12" rx="2" fill="#f5f5f5"/><text x="456" y="116" fill="#7a8399" font-size="8" font-family="'Geist Mono',monospace" text-anchor="middle">RETRY</text>
51
+ <rect x="696" y="340" width="48" height="12" rx="2" fill="#f5f5f5"/><text x="720" y="348" fill="#7a8399" font-size="8" font-family="'Geist Mono',monospace" text-anchor="middle">WRITES</text>
52
+
53
+ <rect x="64" y="140" width="144" height="56" rx="6" fill="rgba(79,93,117,0.10)" stroke="#7a8399"/><text x="136" y="172" fill="#2d3142" font-size="12" font-family="'Geist',sans-serif" font-weight="600" text-anchor="middle">Web App</text>
54
+ <rect x="64" y="268" width="144" height="56" rx="8" fill="rgba(79,93,117,0.10)" stroke="#7a8399"/><text x="136" y="300" fill="#2d3142" font-size="12" font-family="'Geist',sans-serif" font-weight="600" text-anchor="middle">Mobile App</text>
55
+ <rect x="328" y="160" width="160" height="64" rx="8" fill="rgba(235,108,54,0.08)" stroke="#eb6c36"/><text x="408" y="188" fill="#2d3142" font-size="12" font-family="'Geist',sans-serif" font-weight="600" text-anchor="middle">API Gateway</text><text x="408" y="204" fill="#4f5d75" font-size="8" font-family="'Geist Mono',monospace" text-anchor="middle">single entry</text>
56
+ <polygon points="632,128 696,192 632,256 568,192" fill="#ffffff" stroke="#2d3142"/><text x="632" y="188" fill="#2d3142" font-size="12" font-family="'Geist',sans-serif" font-weight="600" text-anchor="middle">Token</text><text x="632" y="204" fill="#2d3142" font-size="12" font-family="'Geist',sans-serif" font-weight="600" text-anchor="middle">valid?</text>
57
+ <rect x="744" y="272" width="160" height="64" rx="6" fill="#ffffff" stroke="#2d3142"/><text x="824" y="300" fill="#2d3142" font-size="12" font-family="'Geist',sans-serif" font-weight="600" text-anchor="middle">Orders Service</text><text x="824" y="316" fill="#4f5d75" font-size="8" font-family="'Geist Mono',monospace" text-anchor="middle">order write</text>
58
+ <rect x="608" y="384" width="160" height="56" rx="6" fill="rgba(45,49,66,0.05)" stroke="#4f5d75"/><text x="688" y="408" fill="#2d3142" font-size="12" font-family="'Geist',sans-serif" font-weight="600" text-anchor="middle">Postgres</text><text x="688" y="424" fill="#4f5d75" font-size="8" font-family="'Geist Mono',monospace" text-anchor="middle">orders</text>
59
+
60
+ <line x1="40" y1="504" x2="920" y2="504" stroke="rgba(45,49,66,0.10)" stroke-width="0.8"/>
61
+ <text x="40" y="528" fill="#4f5d75" font-size="8" font-family="'Geist Mono',monospace" letter-spacing=".14em">LEGEND</text>
62
+ <rect x="128" y="516" width="16" height="12" rx="2" fill="rgba(235,108,54,0.08)" stroke="#eb6c36"/><text x="152" y="528" fill="#4f5d75" font-size="8" font-family="'Geist Mono',monospace">FOCAL</text>
63
+ <polygon points="248,516 256,522 248,528 240,522" fill="#ffffff" stroke="#2d3142"/><text x="268" y="528" fill="#4f5d75" font-size="8" font-family="'Geist Mono',monospace">DECISION</text>
64
+ <rect x="376" y="516" width="16" height="12" rx="2" fill="rgba(45,49,66,0.05)" stroke="#4f5d75"/><text x="400" y="528" fill="#4f5d75" font-size="8" font-family="'Geist Mono',monospace">STORE</text>
65
+ <rect x="472" y="516" width="16" height="12" rx="2" fill="rgba(79,93,117,0.10)" stroke="#7a8399"/><text x="496" y="528" fill="#4f5d75" font-size="8" font-family="'Geist Mono',monospace">INPUT</text>
66
+ <rect x="568" y="516" width="16" height="12" rx="2" fill="#ffffff" stroke="#2d3142"/><text x="592" y="528" fill="#4f5d75" font-size="8" font-family="'Geist Mono',monospace">SERVICE</text>
67
+ </svg>
68
+ </main>
69
+ </body>
70
+ </html>