emberflow-skills 1.9.0 → 1.10.1
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.
package/package.json
CHANGED
|
@@ -109,37 +109,17 @@ els.forEach(function(el,i){el.style.opacity="0";el.style.transform="translateY(6
|
|
|
109
109
|
</explainer>
|
|
110
110
|
```
|
|
111
111
|
|
|
112
|
-
**Vary your visualisations.**
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
{ "label": "Backend", "nodes": ["api", "worker", "db"] }
|
|
124
|
-
],
|
|
125
|
-
"nodes": [
|
|
126
|
-
{ "id": "client", "label": "React App", "style": "blue", "icon": "browser" },
|
|
127
|
-
{ "id": "cdn", "label": "CDN", "style": "blue", "icon": "cloud" },
|
|
128
|
-
{ "id": "api", "label": "API Server", "style": "orange", "icon": "server" },
|
|
129
|
-
{ "id": "worker", "label": "Worker", "style": "purple", "icon": "cpu" },
|
|
130
|
-
{ "id": "db", "label": "Database", "style": "green", "icon": "database" }
|
|
131
|
-
],
|
|
132
|
-
"edges": [
|
|
133
|
-
{ "from": "client", "to": "api" },
|
|
134
|
-
{ "from": "cdn", "to": "client" },
|
|
135
|
-
{ "from": "api", "to": "worker" },
|
|
136
|
-
{ "from": "api", "to": "db" }
|
|
137
|
-
]
|
|
138
|
-
}
|
|
139
|
-
</explainer>
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
Node styles: `blue`, `green`, `orange`, `red`, `purple`. Icons: `server`, `database`, `browser`, `code`, `cloud`, `lock`, `user`, `file`, `api`, `cpu`, `network`, `zap`, `box`.
|
|
112
|
+
**Vary your visualisations.** Each diagram in a document should use a different visual pattern — mix vertical steps, horizontal flows, grids, trees, and custom layouts depending on what the content calls for.
|
|
113
|
+
|
|
114
|
+
**Match the pattern to the content:**
|
|
115
|
+
- Sequential process → vertical step flow
|
|
116
|
+
- Data pipeline or request flow → horizontal flow with arrows
|
|
117
|
+
- Multiple options or categories → 2x2 grid or card layout
|
|
118
|
+
- Decision tree or routing → root node branching to options
|
|
119
|
+
- File/directory structure → monospace tree with file icons
|
|
120
|
+
- Comparison → side-by-side panels with contrasting colors
|
|
121
|
+
- Feature list → compact icon + label grid
|
|
122
|
+
- Timeline → vertical timeline with dated markers
|
|
143
123
|
|
|
144
124
|
### Tables, Code, Blockquotes
|
|
145
125
|
|