sad-mcp 0.1.24 → 0.1.26

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/dist/prompts.js CHANGED
@@ -22,8 +22,16 @@ const SKILLS = [
22
22
  },
23
23
  {
24
24
  id: "bpmn-diagram",
25
- name: "BPMN Diagram",
26
- description: "Create BPMN business process diagrams as interactive HTML/SVG files",
25
+ name: "BPMN Process Analysis",
26
+ description: "Analyze a business process and produce a structured BPMN 1.1 model for review",
27
+ },
28
+ ];
29
+ // Internal skills: loadable via GetPrompt but not shown in ListPrompts
30
+ const INTERNAL_SKILLS = [
31
+ {
32
+ id: "bpmn-render",
33
+ name: "BPMN Render",
34
+ description: "Internal: Render an approved BPMN structural model as HTML/SVG",
27
35
  },
28
36
  ];
29
37
  function loadSkill(skillId) {
@@ -38,7 +46,8 @@ export function registerPromptHandlers(server) {
38
46
  })),
39
47
  }));
40
48
  server.setRequestHandler(GetPromptRequestSchema, async (request) => {
41
- const skill = SKILLS.find((s) => s.id === request.params.name);
49
+ const skill = SKILLS.find((s) => s.id === request.params.name) ||
50
+ INTERNAL_SKILLS.find((s) => s.id === request.params.name);
42
51
  if (!skill) {
43
52
  throw new Error(`Unknown skill: ${request.params.name}`);
44
53
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sad-mcp",
3
- "version": "0.1.24",
3
+ "version": "0.1.26",
4
4
  "description": "MCP server for Software Analysis and Design course materials at BGU",
5
5
  "type": "module",
6
6
  "bin": {
@@ -0,0 +1,359 @@
1
+ ---
2
+ name: bpmn-diagram
3
+ description: Create BPMN (Business Process Model and Notation) diagrams as interactive HTML/SVG files. Use this skill when the user asks to create, model, or visualize a business process, workflow diagram, BPMN diagram, or process map. Handles Hebrew RTL processes, swim lanes, pools, gateways, data objects, data stores, message flows, and intermediate events. Outputs a single self-contained HTML file with embedded SVG.
4
+ ---
5
+
6
+ # BPMN Diagram Creation Skill
7
+
8
+ This skill creates professional BPMN 1.1 diagrams rendered as interactive HTML files with embedded SVG. The diagrams support Hebrew (RTL) and English text.
9
+
10
+ **This skill operates in 3 phases. You MUST complete each phase fully before moving to the next.**
11
+
12
+ ## NON-NEGOTIABLE RULES — READ BEFORE ANYTHING ELSE
13
+
14
+ These rules are violated most often. You MUST follow every one. No exceptions.
15
+
16
+ 1. **GATEWAYS**: The diamond shape contains ONLY a marker symbol: **X** (XOR), **+** (AND), or **O** (OR). NEVER put text/labels inside the diamond. Labels go ABOVE the diamond. Every gateway (split AND merge) must have its marker.
17
+
18
+ 2. **CUSTOMERS / EXTERNAL PARTIES get their own POOL**: If a customer, patient, citizen, or external company (e.g., חברת אשראי, ספק) acts independently — they are a SEPARATE POOL with message flows (dashed lines) between pools. They are NOT a lane. The only exception: if the organization fully controls the participant's actions within its system (e.g., customer using a bank app).
19
+
20
+ 3. **DATA STORES are mandatory**: If any task involves "block account", "generate invoice", "credit account", "update record", "register", "look up", or any read/write to persistent state — you MUST draw a Data Store (cylinder) with data associations connecting it to the relevant tasks.
21
+
22
+ 4. **NO ELEMENTS ON LANE BOUNDARIES**: Every task, gateway, and event must be fully inside one lane, centered vertically with clear spacing from lane borders.
23
+
24
+ 5. **EVERY PARTICIPANT MUST APPEAR**: If the process description mentions a customer/patient/company — they MUST appear in the diagram. Never omit a participant.
25
+
26
+ ## When to Use
27
+
28
+ - User asks to create a BPMN diagram, process model, or workflow diagram
29
+ - User describes a business process and wants it visualized
30
+ - User provides a process narrative in any language and wants a BPMN representation
31
+ - User asks to model a process with swim lanes, pools, gateways, or data flows
32
+
33
+ ---
34
+
35
+ # ═══════════════════════════════════════════════════
36
+ # PHASE 1 — STRUCTURAL MODEL (text only, NO SVG)
37
+ # ═══════════════════════════════════════════════════
38
+
39
+ In this phase you analyze the process description and output a structured text model. Do NOT write any HTML, SVG, or code. Only text analysis.
40
+
41
+ ## Step 1.1 — Identify Participants
42
+
43
+ List every actor/role mentioned in the process. For each one, classify as POOL or LANE:
44
+
45
+ - **POOL** (separate, independent): The participant acts on their own initiative and communicates with the organization from outside. Examples: a customer calling to cancel, a patient arriving at a clinic, a citizen filing a complaint, an external company (credit card company, supplier, contractor).
46
+ - **LANE** (within org pool): The participant is an internal role within the organization, OR the organization fully dictates and controls how they perform activities within its system (e.g., customer using the bank's app).
47
+ - **The test**: "Does the organization orchestrate this participant's actions, or do they act independently?" Independent → POOL.
48
+
49
+ ## Step 1.2 — Identify Tasks
50
+
51
+ List every action/task mentioned in the process description. For each task, specify which lane or pool it belongs to. Also identify implied activities — phrases like "she can and is expected to be in phone contact" or "will coordinate directly" describe real tasks, NOT annotations.
52
+
53
+ ## Step 1.3 — Identify Gateways (with type!)
54
+
55
+ List every decision point / conditional branch. For each gateway, specify:
56
+ - **Type**: XOR (exclusive — only one path), AND (parallel — all paths), or OR (inclusive — one or more paths)
57
+ - **Question/condition**: What is being decided
58
+ - **Outgoing branches**: The possible outcomes and where each leads
59
+ - **Merge**: Where the branches reconverge (if applicable) — merge gateways must also be listed with their type
60
+
61
+ ## Step 1.4 — Identify Data Stores
62
+
63
+ Scan all tasks for persistent storage operations. **Trigger words**: "system", "database", "account", "record", "registry". **Action verbs**: "block account", "update record", "generate invoice", "credit account", "register", "log", "store", "look up", "check status".
64
+
65
+ If ANY task reads from or writes to shared persistent state → Data Store is required. A system = a data store. An account = a data store.
66
+
67
+ List each data store with a name and which tasks connect to it (read/write).
68
+
69
+ ## Step 1.5 — Identify Data Objects
70
+
71
+ List specific pieces of data that flow between tasks (e.g., "בקשת ביטול", "חשבונית זיכוי"). These are different from data stores — data objects are transient documents, not persistent systems.
72
+
73
+ ## Step 1.6 — Identify Flows
74
+
75
+ - **Sequence flows** (within a pool/between lanes): List the order of tasks within each pool
76
+ - **Message flows** (between pools): List every communication between separate pools. Check for bidirectional communication — every message that expects a response needs a return message flow.
77
+ - **Data associations**: List connections between tasks and data stores / data objects.
78
+
79
+ ## Step 1.7 — Identify Events
80
+
81
+ - **Start events**: One per pool
82
+ - **End events**: One or more per pool (for different outcomes)
83
+ - **Intermediate events**: Use for passive waiting (not tasks). When a participant is waiting for a signal/message from another participant.
84
+
85
+ ## Step 1.8 — Complete Each Participant's Flow
86
+
87
+ Verify that every pool has a complete internal sequence flow: start → tasks/gateways → end. Even external parties must have their full process modeled (receive → process → respond → close), not just a single task.
88
+
89
+ ## Required Output Format
90
+
91
+ ```
92
+ STRUCTURAL MODEL:
93
+
94
+ POOLS:
95
+ - [Pool name] — [reason: acts independently / external company]
96
+ Tasks: [task1] → [task2] → ...
97
+ Start: [description]
98
+ End(s): [description(s)]
99
+
100
+ ORGANIZATION POOL: [org name]
101
+ LANE: [lane name]
102
+ Tasks: [task1] → [task2] → ...
103
+ LANE: [lane name]
104
+ Tasks: ...
105
+ Start: [description]
106
+ End(s): [description(s)]
107
+
108
+ GATEWAYS:
109
+ - [G1] Type: XOR | Question: [question] | In: [lane/pool] | Branches: [branch1 → ..., branch2 → ...]
110
+ - [G2] Type: XOR (merge) | In: [lane/pool] | Merges: [branches from G1]
111
+ - ...
112
+
113
+ DATA STORES:
114
+ - [Store name] — reads: [task X, task Y] | writes: [task Z]
115
+ - ...
116
+
117
+ DATA OBJECTS:
118
+ - [Object name] — from: [task X] → to: [task Y]
119
+ - ...
120
+
121
+ MESSAGE FLOWS:
122
+ - [Pool A] → [Pool B]: [what is communicated]
123
+ - [Pool B] → [Pool A]: [response]
124
+ - ...
125
+ ```
126
+
127
+ ## ⛔ HARD STOP — DO NOT PROCEED
128
+
129
+ **STOP HERE.** Present the structural model above to the user. Do NOT write any HTML, SVG, or code yet.
130
+
131
+ Ask the user: "הנה המודל המבני של התהליך. האם לעבור לשלב הבא ולייצר את הדיאגרמה, או שיש שינויים שתרצה לבצע?"
132
+
133
+ Wait for the user to confirm or request changes. If they request changes, revise the model and present it again. Only proceed to Phase 2 after explicit user confirmation.
134
+
135
+ ---
136
+
137
+ # ═══════════════════════════════════════════════════
138
+ # PHASE 2 — SVG RENDERING (only after Phase 1 approval)
139
+ # ═══════════════════════════════════════════════════
140
+
141
+ Take the approved structural model from Phase 1 and render it as an HTML file with embedded SVG. **Every participant, task, gateway, data store, data object, and flow from the approved model MUST appear in the SVG.** Do not add or remove elements.
142
+
143
+ ## Architecture & Layout
144
+
145
+ ### Pools and Lanes
146
+
147
+ - **External participant pools** get their own pool rectangle, visually separated from the organization pool
148
+ - Use a distinct color scheme for external pool headers (e.g., brown) to differentiate from the organization pool (dark gray)
149
+ - External pool tasks use a warm color (e.g., orange `#fff3e0` fill, `#e65100` stroke)
150
+ - **Organization pool** contains internal lanes
151
+ - Each lane gets a labeled sidebar and a subtle background tint
152
+ - Separate lanes with dashed divider lines
153
+ - Pool headers are vertical text bars on the left side of the pool
154
+
155
+ ### Element Placement
156
+
157
+ **Every BPMN element (task, gateway, event) must be fully contained within a single lane or pool.** No element may overlap a lane divider line or sit on the boundary between two lanes. Center elements vertically within their lane with visible spacing from borders.
158
+
159
+ ### Color Scheme
160
+
161
+ | Element | Fill | Stroke |
162
+ |---------|------|--------|
163
+ | External participant tasks | `#fff3e0` | `#e65100` |
164
+ | Reception/admin tasks | `#e3f2fd` | `#1976d2` |
165
+ | Clinical/operational tasks | `#f3e5f5` | `#7b1fa2` |
166
+ | XOR Gateways | `#fff8e1` | `#f9a825` |
167
+ | Start event | `#e8f5e9` | `#2e7d32` |
168
+ | End event | `#ffebee` | `#c62828` |
169
+ | Data objects | `#fff` | `#1565c0` |
170
+ | Data stores | `#fff` | `#2e7d32` |
171
+
172
+ ### Pool Ordering
173
+
174
+ When multiple external pools exist, order to **minimize message flow crossing distance**:
175
+ - Place the primary actor (initiates and interacts with multiple parties) in the middle
176
+ - Place pools they interact with above and below
177
+
178
+ ### Flow Types
179
+
180
+ - **Sequence flows** (within a pool): Solid lines with filled arrowheads (`#546e7a`)
181
+ - **Message flows** (between pools): Dashed lines (`stroke-dasharray: 10 5`) with open circle at source and filled arrow at target (`#37474f`)
182
+ - **Data associations**: Dashed lines (`stroke-dasharray: 4 3`) with small arrowheads:
183
+ - Data object associations: `#7986cb`
184
+ - Data store associations: `#4caf50`
185
+
186
+ ## BPMN Element SVG Templates
187
+
188
+ ### Gateways
189
+
190
+ **Gateway diamonds contain ONLY the marker symbol — NEVER text.** Labels go ABOVE the diamond.
191
+
192
+ ```svg
193
+ <!-- XOR Gateway (split or merge) — X marker inside -->
194
+ <rect x="X" y="Y" width="34" height="34" class="gateway" transform="rotate(45, CX, CY)"/>
195
+ <line x1="CX-7" y1="CY-10" x2="CX+7" y2="CY+10" class="gateway-x"/>
196
+ <line x1="CX+7" y1="CY-10" x2="CX-7" y2="CY+10" class="gateway-x"/>
197
+ <text x="CX" y="CY-25" text-anchor="middle">label ABOVE</text>
198
+ ```
199
+
200
+ **Anti-pattern — NEVER do this:**
201
+ ```svg
202
+ <!-- WRONG: text inside gateway diamond -->
203
+ <polygon points="..." fill="..." stroke="..."/>
204
+ <text x="CX" y="CY">כמה ימים?</text> <!-- FORBIDDEN -->
205
+ ```
206
+
207
+ ### Intermediate Events (BPMN 1.1 style)
208
+
209
+ Plain double circle with NO icon inside:
210
+
211
+ ```svg
212
+ <circle cx="X" cy="Y" r="16" fill="#fff" stroke="#1565c0" stroke-width="2"/>
213
+ <circle cx="X" cy="Y" r="12" fill="none" stroke="#1565c0" stroke-width="1.2"/>
214
+ ```
215
+
216
+ ### Data Objects (folded-corner document, blue)
217
+
218
+ ```svg
219
+ <path d="M X,Y L X+26,Y L X+34,Y+8 L X+34,Y+38 L X,Y+38 Z" class="data-object-shape"/>
220
+ <path d="M X+26,Y L X+26,Y+8 L X+34,Y+8" class="data-object-fold"/>
221
+ ```
222
+
223
+ ### Data Stores (cylinder, green)
224
+
225
+ ```svg
226
+ <ellipse cx="CX" cy="TOP" rx="28" ry="8" class="data-store-body"/>
227
+ <path d="M CX-28,TOP L CX-28,BOTTOM" fill="none" stroke="#2e7d32" stroke-width="1.3"/>
228
+ <path d="M CX+28,TOP L CX+28,BOTTOM" fill="none" stroke="#2e7d32" stroke-width="1.3"/>
229
+ <ellipse cx="CX" cy="BOTTOM" rx="28" ry="8" class="data-store-body"/>
230
+ ```
231
+
232
+ ### Data Artifact Placement
233
+
234
+ - Place data objects above or below their associated task, never overlapping flow lines
235
+ - Place data stores typically below their associated tasks
236
+ - Never place data artifacts where association lines cross sequence flow arrows
237
+
238
+ ## Arrow Routing
239
+
240
+ **Arrows must never be ambiguous.**
241
+
242
+ ### Split-Merge Pattern
243
+
244
+ 1. YES task above the gateway's horizontal center line
245
+ 2. NO task below
246
+ 3. Merge gateway clearly to the right of BOTH tasks
247
+ 4. YES path: task → right → down into merge (entering from top)
248
+ 5. NO path: task → right → up into merge (entering from bottom)
249
+ 6. From merge: single clean line to next task
250
+
251
+ ### General Routing Rules
252
+
253
+ - Prefer orthogonal (right-angle) routing
254
+ - Leave at least 30px spacing between parallel flow lines
255
+ - Cross-lane flows use clear vertical drops/rises
256
+ - Label YES/NO (כן/לא) near the gateway, not at the end of the path
257
+ - Flow labels must not overlap other elements
258
+
259
+ ## Modeling Rejection/Retry Loops
260
+
261
+ 1. Model rejection as an explicit task (not just a gateway output)
262
+ 2. After rejection, model the rejecting participant's next state (waiting/action)
263
+ 3. Model the response to rejection as a concrete task sequence
264
+ 4. Loop-back arrows return to the earliest meaningful re-entry point
265
+
266
+ ## Typography & Hebrew
267
+
268
+ - Use `Noto Sans Hebrew` (imported from Google Fonts) for all text
269
+ - Set `lang="he"` and `dir="rtl"` on the HTML element
270
+ - Task text: 11.5px, font-weight 500, centered
271
+ - Gateway labels: 10.5px, font-weight 400, positioned above the diamond
272
+ - Data labels: 9.5px, font-weight 500
273
+ - Flow labels: 10px
274
+
275
+ ## File Structure
276
+
277
+ Output a single self-contained HTML file with:
278
+
279
+ 1. **Header bar**: Gradient background with process title in Hebrew + English subtitle. Must say "BPMN 1.1" (NOT 2.0)
280
+ 2. **Legend**: Horizontal bar showing all BPMN symbols used (start, end, task, XOR gateway, intermediate event, data object, data store, message flow)
281
+ 3. **SVG canvas**: The full BPMN diagram in a scrollable wrapper
282
+ 4. **SVG definitions**: Drop shadow filters, arrow markers (sequence, message, data association)
283
+
284
+ ### SVG Sizing
285
+
286
+ - Width: 1700–1800px typical (allow overflow scroll)
287
+ - Height: Scale based on pools and lanes (~130px per external pool, ~250px per lane, plus data artifacts)
288
+ - Use `viewBox` matching width/height
289
+
290
+ ---
291
+
292
+ # ═══════════════════════════════════════════════════
293
+ # PHASE 3 — VALIDATION & FIX
294
+ # ═══════════════════════════════════════════════════
295
+
296
+ **Before delivering the diagram, go through EVERY item below. If ANY item fails, fix the SVG immediately. Do NOT deliver until all pass.**
297
+
298
+ ## Structural Accuracy (cross-reference with Phase 1 model)
299
+ - [ ] Every participant from the Phase 1 model appears in the SVG — none are omitted
300
+ - [ ] External participants are in separate pools with message flows (not lanes with sequence flows)
301
+ - [ ] Every pool has a complete internal flow (start → ... → end)
302
+ - [ ] Every gateway from Phase 1 appears with the correct type marker
303
+ - [ ] Every data store from Phase 1 appears as a cylinder with data associations
304
+ - [ ] Every message flow from Phase 1 appears as a dashed line between pools
305
+
306
+ ## BPMN Compliance
307
+ - [ ] Every gateway (split AND merge) has ONLY an X/+/O marker inside — no text inside the diamond
308
+ - [ ] Gateway labels are positioned ABOVE or BESIDE the diamond, never inside
309
+ - [ ] Every element (task, gateway, event) is fully inside a single lane — nothing sits on a lane boundary
310
+ - [ ] Passive waiting uses intermediate events, not regular tasks
311
+ - [ ] Data objects (folded document) and data stores (cylinder) use different icons
312
+
313
+ ## Visual Quality
314
+ - [ ] No arrow paths overlap or cross ambiguously
315
+ - [ ] Flow labels (כן/לא) are clearly positioned near their gateway
316
+ - [ ] The legend includes every symbol type used in the diagram
317
+ - [ ] Data artifacts don't overlap with sequence flow paths
318
+ - [ ] Pool ordering minimizes message flow crossing distance
319
+
320
+ ---
321
+
322
+ # APPENDIX
323
+
324
+ ## Example Process Categories
325
+
326
+ This skill handles processes such as:
327
+ - Healthcare workflows (e.g., Tipat Halav clinic visits, hospital admissions)
328
+ - Government/municipal service processes
329
+ - Customer service and support flows
330
+ - Order fulfillment and logistics
331
+ - Employee onboarding
332
+ - Academic/educational administration processes
333
+
334
+ The skill works for any domain — adapt the color scheme and terminology to match the context.
335
+
336
+ ## Hebrew Language Guidelines (שפה מגדרית נייטרלית)
337
+
338
+ When labels, names, actors, roles, or any text in the diagram are written in Hebrew, follow these rules:
339
+
340
+ ### Use Male Form as Default
341
+ Always use the **male grammatical form** (זכר) when referring to people, roles, actors, classes, or participants — even when the role is traditionally associated with a specific gender.
342
+
343
+ **Examples of correct usage:**
344
+ - ✅ רופא (not אחות for a nurse role — use אח)
345
+ - ✅ אח (nurse, male form)
346
+ - ✅ מטופל (not מטופלת)
347
+ - ✅ לקוח (not לקוחה)
348
+ - ✅ מנהל (not מנהלת)
349
+ - ✅ עובד (not עובדת)
350
+ - ✅ משתמש (not משתמשת)
351
+ - ✅ סטודנט (not סטודנטית)
352
+
353
+ **Examples of stereotypic writing to avoid:**
354
+ - ❌ רופא ואחות — implies doctor=male, nurse=female
355
+ - ❌ מזכירה — use מזכיר instead
356
+ - ❌ אחות — use אח instead
357
+
358
+ ### Rule Summary
359
+ > When in doubt, use the male form. This ensures gender neutrality and avoids reinforcing occupational gender stereotypes in diagram content.
@@ -1,359 +1,215 @@
1
1
  ---
2
2
  name: bpmn-diagram
3
- description: Create BPMN (Business Process Model and Notation) diagrams as interactive HTML/SVG files. Use this skill when the user asks to create, model, or visualize a business process, workflow diagram, BPMN diagram, or process map. Handles Hebrew RTL processes, swim lanes, pools, gateways, data objects, data stores, message flows, and intermediate events. Outputs a single self-contained HTML file with embedded SVG.
3
+ description: Analyze a business process and produce a structured BPMN 1.1 model for review. Outputs an HTML page with visual summary and embedded JSON model. Use when the user describes a process and wants it modeled.
4
4
  ---
5
5
 
6
- # BPMN Diagram Creation Skill
6
+ # BPMN Process Analysis
7
7
 
8
- This skill creates professional BPMN 1.1 diagrams rendered as interactive HTML files with embedded SVG. The diagrams support Hebrew (RTL) and English text.
8
+ Analyze a business process description and produce a structured BPMN 1.1 model. The output is an HTML page that presents the model for user review, with the machine-readable JSON model embedded for later use.
9
9
 
10
- **This skill operates in 3 phases. You MUST complete each phase fully before moving to the next.**
10
+ **You are producing an analysis, not a diagram. Do not generate any visual diagram, SVG, or drawing.**
11
11
 
12
- ## NON-NEGOTIABLE RULES — READ BEFORE ANYTHING ELSE
12
+ ## Critical Modeling Rules
13
13
 
14
- These rules are violated most often. You MUST follow every one. No exceptions.
14
+ 1. **CUSTOMERS / EXTERNAL PARTIES get their own POOL**: If a customer, patient, citizen, or external company (e.g., חברת אשראי, ספק) acts independently — they are a SEPARATE POOL with message flows. They are NOT a lane. The only exception: if the organization fully controls the participant's actions within its system (e.g., customer using a bank app).
15
15
 
16
- 1. **GATEWAYS**: The diamond shape contains ONLY a marker symbol: **X** (XOR), **+** (AND), or **O** (OR). NEVER put text/labels inside the diamond. Labels go ABOVE the diamond. Every gateway (split AND merge) must have its marker.
16
+ 2. **DATA STORES are mandatory**: If any task involves "block account", "generate invoice", "credit account", "update record", "register", "look up", or any read/write to persistent state a Data Store is required.
17
17
 
18
- 2. **CUSTOMERS / EXTERNAL PARTIES get their own POOL**: If a customer, patient, citizen, or external company (e.g., חברת אשראי, ספק) acts independently — they are a SEPARATE POOL with message flows (dashed lines) between pools. They are NOT a lane. The only exception: if the organization fully controls the participant's actions within its system (e.g., customer using a bank app).
18
+ 3. **EVERY PARTICIPANT MUST APPEAR**: If the process description mentions a customer/patient/company — they MUST appear in the model. Never omit a participant.
19
19
 
20
- 3. **DATA STORES are mandatory**: If any task involves "block account", "generate invoice", "credit account", "update record", "register", "look up", or any read/write to persistent state you MUST draw a Data Store (cylinder) with data associations connecting it to the relevant tasks.
20
+ 4. **GATEWAYS have types**: Every gateway must be classified as XOR (exclusive one path), AND (parallel all paths), or OR (inclusiveone or more paths).
21
21
 
22
- 4. **NO ELEMENTS ON LANE BOUNDARIES**: Every task, gateway, and event must be fully inside one lane, centered vertically with clear spacing from lane borders.
22
+ ## Analysis Steps
23
23
 
24
- 5. **EVERY PARTICIPANT MUST APPEAR**: If the process description mentions a customer/patient/company they MUST appear in the diagram. Never omit a participant.
24
+ ### Step 1Identify Participants
25
25
 
26
- ## When to Use
26
+ List every actor/role. Classify each as POOL or LANE:
27
27
 
28
- - User asks to create a BPMN diagram, process model, or workflow diagram
29
- - User describes a business process and wants it visualized
30
- - User provides a process narrative in any language and wants a BPMN representation
31
- - User asks to model a process with swim lanes, pools, gateways, or data flows
32
-
33
- ---
34
-
35
- # ═══════════════════════════════════════════════════
36
- # PHASE 1 — STRUCTURAL MODEL (text only, NO SVG)
37
- # ═══════════════════════════════════════════════════
38
-
39
- In this phase you analyze the process description and output a structured text model. Do NOT write any HTML, SVG, or code. Only text analysis.
40
-
41
- ## Step 1.1 — Identify Participants
42
-
43
- List every actor/role mentioned in the process. For each one, classify as POOL or LANE:
44
-
45
- - **POOL** (separate, independent): The participant acts on their own initiative and communicates with the organization from outside. Examples: a customer calling to cancel, a patient arriving at a clinic, a citizen filing a complaint, an external company (credit card company, supplier, contractor).
46
- - **LANE** (within org pool): The participant is an internal role within the organization, OR the organization fully dictates and controls how they perform activities within its system (e.g., customer using the bank's app).
28
+ - **POOL**: Acts independently, communicates from outside. Examples: customer calling to cancel, patient arriving at clinic, citizen filing complaint, external company (credit card, supplier, contractor).
29
+ - **LANE**: Internal role, OR the organization controls how they perform activities within its system.
47
30
  - **The test**: "Does the organization orchestrate this participant's actions, or do they act independently?" Independent → POOL.
48
31
 
49
- ## Step 1.2 — Identify Tasks
32
+ ### Step 2 — Identify Tasks
50
33
 
51
- List every action/task mentioned in the process description. For each task, specify which lane or pool it belongs to. Also identify implied activities — phrases like "she can and is expected to be in phone contact" or "will coordinate directly" describe real tasks, NOT annotations.
34
+ List every action/task. Assign each to a specific lane or pool.
52
35
 
53
- ## Step 1.3Identify Gateways (with type!)
36
+ Look for implied activities phrases like "is expected to be in phone contact" or "will coordinate directly" describe real tasks, not annotations.
54
37
 
55
- List every decision point / conditional branch. For each gateway, specify:
56
- - **Type**: XOR (exclusive — only one path), AND (parallel — all paths), or OR (inclusive — one or more paths)
57
- - **Question/condition**: What is being decided
58
- - **Outgoing branches**: The possible outcomes and where each leads
59
- - **Merge**: Where the branches reconverge (if applicable) — merge gateways must also be listed with their type
38
+ ### Step 3 Identify Gateways
60
39
 
61
- ## Step 1.4 Identify Data Stores
40
+ List every decision point. For each:
41
+ - **Type**: XOR, AND, or OR
42
+ - **Question/condition**: What is being decided
43
+ - **Branches**: Possible outcomes and where each leads
44
+ - **Merge**: Where branches reconverge (merge gateways must also specify type)
62
45
 
63
- Scan all tasks for persistent storage operations. **Trigger words**: "system", "database", "account", "record", "registry". **Action verbs**: "block account", "update record", "generate invoice", "credit account", "register", "log", "store", "look up", "check status".
46
+ ### Step 4 Identify Data Stores
64
47
 
65
- If ANY task reads from or writes to shared persistent state Data Store is required. A system = a data store. An account = a data store.
48
+ Scan tasks for persistent storage. **Trigger words**: "system", "database", "account", "record", "registry". **Action verbs**: "block account", "update record", "generate invoice", "credit account", "register", "log", "store", "look up", "check status".
66
49
 
67
- List each data store with a name and which tasks connect to it (read/write).
50
+ Any task that reads/writes shared persistent state → Data Store required. A system = a data store. An account = a data store.
68
51
 
69
- ## Step 1.5 — Identify Data Objects
52
+ ### Step 5 — Identify Data Objects
70
53
 
71
- List specific pieces of data that flow between tasks (e.g., "בקשת ביטול", "חשבונית זיכוי"). These are different from data stores — data objects are transient documents, not persistent systems.
54
+ List transient data flowing between tasks (e.g., "בקשת ביטול", "חשבונית זיכוי"). These are documents, not persistent systems.
72
55
 
73
- ## Step 1.6 — Identify Flows
56
+ ### Step 6 — Identify Flows
74
57
 
75
- - **Sequence flows** (within a pool/between lanes): List the order of tasks within each pool
76
- - **Message flows** (between pools): List every communication between separate pools. Check for bidirectional communication — every message that expects a response needs a return message flow.
77
- - **Data associations**: List connections between tasks and data stores / data objects.
58
+ - **Sequence flows** (within a pool): Task ordering within each pool
59
+ - **Message flows** (between pools): Every communication between separate pools. Check bidirectional — every message expecting a response needs a return flow.
60
+ - **Data associations**: Connections between tasks and data stores / data objects.
78
61
 
79
- ## Step 1.7 — Identify Events
62
+ ### Step 7 — Identify Events
80
63
 
81
64
  - **Start events**: One per pool
82
- - **End events**: One or more per pool (for different outcomes)
83
- - **Intermediate events**: Use for passive waiting (not tasks). When a participant is waiting for a signal/message from another participant.
84
-
85
- ## Step 1.8 — Complete Each Participant's Flow
86
-
87
- Verify that every pool has a complete internal sequence flow: start → tasks/gateways → end. Even external parties must have their full process modeled (receive → process → respond → close), not just a single task.
88
-
89
- ## Required Output Format
90
-
65
+ - **End events**: One or more per pool (different outcomes)
66
+ - **Intermediate events**: For passive waiting when a participant waits for a signal/message
67
+
68
+ ### Step 8 — Verify Completeness & Note Assumptions
69
+
70
+ - Every pool has a complete flow: start → tasks/gateways → end
71
+ - External parties have their full process modeled, not just a single task
72
+ - List any assumptions you made about the process
73
+ - List any open questions where the description was ambiguous
74
+
75
+ ## Output Format
76
+
77
+ Generate a **single self-contained HTML file** with two parts:
78
+
79
+ ### Part 1: Visual Presentation (what the user sees)
80
+
81
+ A clean, RTL Hebrew page with these sections:
82
+
83
+ 1. **Header**: Process title in Hebrew, "ניתוח תהליך BPMN 1.1" subtitle
84
+ 2. **Structure Overview card**: Shows number of pools and lanes as a simple hierarchy:
85
+ ```
86
+ 🏊 מאגרים (Pools):
87
+ ├── לקוח (מאגר חיצוני — פועל באופן עצמאי)
88
+ └── חברת אישימוטו (מאגר ארגוני)
89
+ ├── שירות לקוחות
90
+ ├── שימור לקוחות
91
+ └── הנהלת חשבונות
92
+ ```
93
+ 3. **Workflow per pool/lane card**: For each pool and lane, show the task flow as a numbered list with gateway branches indented:
94
+ ```
95
+ שירות לקוחות:
96
+ 1. קבלת פנייה ובדיקת תאריך
97
+ 2. ⬦ XOR: כמה ימים מאז הרכישה?
98
+ ├── ≤ 7 ימים → 3. ביטול מנוי → 4. חסימת חשבון
99
+ ├── 7-14 ימים → העברה לשימור לקוחות
100
+ └── > 14 ימים → 5. הודעה על דחיית הבקשה
101
+ ```
102
+ 4. **Gateways card**: Table of all gateways with type, question, and branches
103
+ 5. **Data Stores card**: Each store with its connected tasks (reads/writes)
104
+ 6. **Data Objects card**: Each object with source and target
105
+ 7. **Message Flows card**: Between which pools, what's communicated, direction
106
+ 8. **Assumptions & Open Questions card**: Yellow/orange highlight for attention
107
+ 9. **Footer**: "כשהמודל מאושר, ניתן לבקש: 'צייר את דיאגרמת ה-BPMN'"
108
+
109
+ **Styling guidelines:**
110
+ - Use `Noto Sans Hebrew` from Google Fonts
111
+ - `lang="he"` and `dir="rtl"` on the HTML element
112
+ - Dark theme: `#1a1a2e` background, `#16213e` cards, white/light text
113
+ - Color-coded cards: pools in blue, gateways in amber, data stores in green, messages in purple, assumptions in orange
114
+ - Clean, modern look with rounded corners and subtle shadows
115
+
116
+ ### Part 2: JSON Model (embedded, machine-readable)
117
+
118
+ Embed the structured model in a `<script type="application/json" id="bpmn-model">` tag. This is not visible to the user but available for later processing.
119
+
120
+ **JSON Schema:**
121
+
122
+ ```json
123
+ {
124
+ "title": { "he": "שם התהליך", "en": "Process Name" },
125
+ "pools": [
126
+ {
127
+ "id": "pool-id",
128
+ "name": "שם המאגר",
129
+ "type": "external",
130
+ "reason": "why this is a separate pool",
131
+ "lanes": []
132
+ },
133
+ {
134
+ "id": "org-id",
135
+ "name": "שם הארגון",
136
+ "type": "organization",
137
+ "reason": "main organization",
138
+ "lanes": [
139
+ { "id": "lane-id", "name": "שם המסלול" }
140
+ ]
141
+ }
142
+ ],
143
+ "tasks": [
144
+ {
145
+ "id": "task-id",
146
+ "name": "שם המשימה",
147
+ "pool": "pool-id",
148
+ "lane": "lane-id-or-null",
149
+ "description": "optional details"
150
+ }
151
+ ],
152
+ "gateways": [
153
+ {
154
+ "id": "gw-id",
155
+ "type": "XOR",
156
+ "role": "split",
157
+ "question": "מה השאלה?",
158
+ "pool": "pool-id",
159
+ "lane": "lane-id-or-null",
160
+ "branches": [
161
+ { "label": "תיאור הענף", "target": "task-or-gw-id" }
162
+ ]
163
+ }
164
+ ],
165
+ "dataStores": [
166
+ {
167
+ "id": "ds-id",
168
+ "name": "שם מאגר הנתונים",
169
+ "reads": ["task-id-1"],
170
+ "writes": ["task-id-2"]
171
+ }
172
+ ],
173
+ "dataObjects": [
174
+ {
175
+ "id": "do-id",
176
+ "name": "שם מסמך/נתון",
177
+ "from": "task-id",
178
+ "to": "task-id"
179
+ }
180
+ ],
181
+ "events": [
182
+ {
183
+ "id": "event-id",
184
+ "type": "start",
185
+ "pool": "pool-id",
186
+ "lane": "lane-id-or-null",
187
+ "name": "תיאור האירוע"
188
+ }
189
+ ],
190
+ "sequenceFlows": [
191
+ { "from": "element-id", "to": "element-id", "label": "optional" }
192
+ ],
193
+ "messageFlows": [
194
+ { "from": "pool-id", "to": "pool-id", "description": "מה מועבר" }
195
+ ],
196
+ "assumptions": [
197
+ "הנחה שנעשתה..."
198
+ ],
199
+ "openQuestions": [
200
+ "שאלה שדורשת הבהרה..."
201
+ ]
202
+ }
91
203
  ```
92
- STRUCTURAL MODEL:
93
-
94
- POOLS:
95
- - [Pool name] — [reason: acts independently / external company]
96
- Tasks: [task1] → [task2] → ...
97
- Start: [description]
98
- End(s): [description(s)]
99
-
100
- ORGANIZATION POOL: [org name]
101
- LANE: [lane name]
102
- Tasks: [task1] → [task2] → ...
103
- LANE: [lane name]
104
- Tasks: ...
105
- Start: [description]
106
- End(s): [description(s)]
107
-
108
- GATEWAYS:
109
- - [G1] Type: XOR | Question: [question] | In: [lane/pool] | Branches: [branch1 → ..., branch2 → ...]
110
- - [G2] Type: XOR (merge) | In: [lane/pool] | Merges: [branches from G1]
111
- - ...
112
-
113
- DATA STORES:
114
- - [Store name] — reads: [task X, task Y] | writes: [task Z]
115
- - ...
116
-
117
- DATA OBJECTS:
118
- - [Object name] — from: [task X] → to: [task Y]
119
- - ...
120
-
121
- MESSAGE FLOWS:
122
- - [Pool A] → [Pool B]: [what is communicated]
123
- - [Pool B] → [Pool A]: [response]
124
- - ...
125
- ```
126
-
127
- ## ⛔ HARD STOP — DO NOT PROCEED
128
-
129
- **STOP HERE.** Present the structural model above to the user. Do NOT write any HTML, SVG, or code yet.
130
-
131
- Ask the user: "הנה המודל המבני של התהליך. האם לעבור לשלב הבא ולייצר את הדיאגרמה, או שיש שינויים שתרצה לבצע?"
132
-
133
- Wait for the user to confirm or request changes. If they request changes, revise the model and present it again. Only proceed to Phase 2 after explicit user confirmation.
134
-
135
- ---
136
-
137
- # ═══════════════════════════════════════════════════
138
- # PHASE 2 — SVG RENDERING (only after Phase 1 approval)
139
- # ═══════════════════════════════════════════════════
140
-
141
- Take the approved structural model from Phase 1 and render it as an HTML file with embedded SVG. **Every participant, task, gateway, data store, data object, and flow from the approved model MUST appear in the SVG.** Do not add or remove elements.
142
-
143
- ## Architecture & Layout
144
-
145
- ### Pools and Lanes
146
-
147
- - **External participant pools** get their own pool rectangle, visually separated from the organization pool
148
- - Use a distinct color scheme for external pool headers (e.g., brown) to differentiate from the organization pool (dark gray)
149
- - External pool tasks use a warm color (e.g., orange `#fff3e0` fill, `#e65100` stroke)
150
- - **Organization pool** contains internal lanes
151
- - Each lane gets a labeled sidebar and a subtle background tint
152
- - Separate lanes with dashed divider lines
153
- - Pool headers are vertical text bars on the left side of the pool
154
-
155
- ### Element Placement
156
-
157
- **Every BPMN element (task, gateway, event) must be fully contained within a single lane or pool.** No element may overlap a lane divider line or sit on the boundary between two lanes. Center elements vertically within their lane with visible spacing from borders.
158
-
159
- ### Color Scheme
160
-
161
- | Element | Fill | Stroke |
162
- |---------|------|--------|
163
- | External participant tasks | `#fff3e0` | `#e65100` |
164
- | Reception/admin tasks | `#e3f2fd` | `#1976d2` |
165
- | Clinical/operational tasks | `#f3e5f5` | `#7b1fa2` |
166
- | XOR Gateways | `#fff8e1` | `#f9a825` |
167
- | Start event | `#e8f5e9` | `#2e7d32` |
168
- | End event | `#ffebee` | `#c62828` |
169
- | Data objects | `#fff` | `#1565c0` |
170
- | Data stores | `#fff` | `#2e7d32` |
171
-
172
- ### Pool Ordering
173
-
174
- When multiple external pools exist, order to **minimize message flow crossing distance**:
175
- - Place the primary actor (initiates and interacts with multiple parties) in the middle
176
- - Place pools they interact with above and below
177
-
178
- ### Flow Types
179
-
180
- - **Sequence flows** (within a pool): Solid lines with filled arrowheads (`#546e7a`)
181
- - **Message flows** (between pools): Dashed lines (`stroke-dasharray: 10 5`) with open circle at source and filled arrow at target (`#37474f`)
182
- - **Data associations**: Dashed lines (`stroke-dasharray: 4 3`) with small arrowheads:
183
- - Data object associations: `#7986cb`
184
- - Data store associations: `#4caf50`
185
-
186
- ## BPMN Element SVG Templates
187
-
188
- ### Gateways
189
-
190
- **Gateway diamonds contain ONLY the marker symbol — NEVER text.** Labels go ABOVE the diamond.
191
-
192
- ```svg
193
- <!-- XOR Gateway (split or merge) — X marker inside -->
194
- <rect x="X" y="Y" width="34" height="34" class="gateway" transform="rotate(45, CX, CY)"/>
195
- <line x1="CX-7" y1="CY-10" x2="CX+7" y2="CY+10" class="gateway-x"/>
196
- <line x1="CX+7" y1="CY-10" x2="CX-7" y2="CY+10" class="gateway-x"/>
197
- <text x="CX" y="CY-25" text-anchor="middle">label ABOVE</text>
198
- ```
199
-
200
- **Anti-pattern — NEVER do this:**
201
- ```svg
202
- <!-- WRONG: text inside gateway diamond -->
203
- <polygon points="..." fill="..." stroke="..."/>
204
- <text x="CX" y="CY">כמה ימים?</text> <!-- FORBIDDEN -->
205
- ```
206
-
207
- ### Intermediate Events (BPMN 1.1 style)
208
-
209
- Plain double circle with NO icon inside:
210
-
211
- ```svg
212
- <circle cx="X" cy="Y" r="16" fill="#fff" stroke="#1565c0" stroke-width="2"/>
213
- <circle cx="X" cy="Y" r="12" fill="none" stroke="#1565c0" stroke-width="1.2"/>
214
- ```
215
-
216
- ### Data Objects (folded-corner document, blue)
217
-
218
- ```svg
219
- <path d="M X,Y L X+26,Y L X+34,Y+8 L X+34,Y+38 L X,Y+38 Z" class="data-object-shape"/>
220
- <path d="M X+26,Y L X+26,Y+8 L X+34,Y+8" class="data-object-fold"/>
221
- ```
222
-
223
- ### Data Stores (cylinder, green)
224
-
225
- ```svg
226
- <ellipse cx="CX" cy="TOP" rx="28" ry="8" class="data-store-body"/>
227
- <path d="M CX-28,TOP L CX-28,BOTTOM" fill="none" stroke="#2e7d32" stroke-width="1.3"/>
228
- <path d="M CX+28,TOP L CX+28,BOTTOM" fill="none" stroke="#2e7d32" stroke-width="1.3"/>
229
- <ellipse cx="CX" cy="BOTTOM" rx="28" ry="8" class="data-store-body"/>
230
- ```
231
-
232
- ### Data Artifact Placement
233
-
234
- - Place data objects above or below their associated task, never overlapping flow lines
235
- - Place data stores typically below their associated tasks
236
- - Never place data artifacts where association lines cross sequence flow arrows
237
-
238
- ## Arrow Routing
239
-
240
- **Arrows must never be ambiguous.**
241
-
242
- ### Split-Merge Pattern
243
-
244
- 1. YES task above the gateway's horizontal center line
245
- 2. NO task below
246
- 3. Merge gateway clearly to the right of BOTH tasks
247
- 4. YES path: task → right → down into merge (entering from top)
248
- 5. NO path: task → right → up into merge (entering from bottom)
249
- 6. From merge: single clean line to next task
250
-
251
- ### General Routing Rules
252
-
253
- - Prefer orthogonal (right-angle) routing
254
- - Leave at least 30px spacing between parallel flow lines
255
- - Cross-lane flows use clear vertical drops/rises
256
- - Label YES/NO (כן/לא) near the gateway, not at the end of the path
257
- - Flow labels must not overlap other elements
258
-
259
- ## Modeling Rejection/Retry Loops
260
-
261
- 1. Model rejection as an explicit task (not just a gateway output)
262
- 2. After rejection, model the rejecting participant's next state (waiting/action)
263
- 3. Model the response to rejection as a concrete task sequence
264
- 4. Loop-back arrows return to the earliest meaningful re-entry point
265
-
266
- ## Typography & Hebrew
267
-
268
- - Use `Noto Sans Hebrew` (imported from Google Fonts) for all text
269
- - Set `lang="he"` and `dir="rtl"` on the HTML element
270
- - Task text: 11.5px, font-weight 500, centered
271
- - Gateway labels: 10.5px, font-weight 400, positioned above the diamond
272
- - Data labels: 9.5px, font-weight 500
273
- - Flow labels: 10px
274
-
275
- ## File Structure
276
-
277
- Output a single self-contained HTML file with:
278
-
279
- 1. **Header bar**: Gradient background with process title in Hebrew + English subtitle. Must say "BPMN 1.1" (NOT 2.0)
280
- 2. **Legend**: Horizontal bar showing all BPMN symbols used (start, end, task, XOR gateway, intermediate event, data object, data store, message flow)
281
- 3. **SVG canvas**: The full BPMN diagram in a scrollable wrapper
282
- 4. **SVG definitions**: Drop shadow filters, arrow markers (sequence, message, data association)
283
-
284
- ### SVG Sizing
285
-
286
- - Width: 1700–1800px typical (allow overflow scroll)
287
- - Height: Scale based on pools and lanes (~130px per external pool, ~250px per lane, plus data artifacts)
288
- - Use `viewBox` matching width/height
289
-
290
- ---
291
-
292
- # ═══════════════════════════════════════════════════
293
- # PHASE 3 — VALIDATION & FIX
294
- # ═══════════════════════════════════════════════════
295
-
296
- **Before delivering the diagram, go through EVERY item below. If ANY item fails, fix the SVG immediately. Do NOT deliver until all pass.**
297
-
298
- ## Structural Accuracy (cross-reference with Phase 1 model)
299
- - [ ] Every participant from the Phase 1 model appears in the SVG — none are omitted
300
- - [ ] External participants are in separate pools with message flows (not lanes with sequence flows)
301
- - [ ] Every pool has a complete internal flow (start → ... → end)
302
- - [ ] Every gateway from Phase 1 appears with the correct type marker
303
- - [ ] Every data store from Phase 1 appears as a cylinder with data associations
304
- - [ ] Every message flow from Phase 1 appears as a dashed line between pools
305
-
306
- ## BPMN Compliance
307
- - [ ] Every gateway (split AND merge) has ONLY an X/+/O marker inside — no text inside the diamond
308
- - [ ] Gateway labels are positioned ABOVE or BESIDE the diamond, never inside
309
- - [ ] Every element (task, gateway, event) is fully inside a single lane — nothing sits on a lane boundary
310
- - [ ] Passive waiting uses intermediate events, not regular tasks
311
- - [ ] Data objects (folded document) and data stores (cylinder) use different icons
312
-
313
- ## Visual Quality
314
- - [ ] No arrow paths overlap or cross ambiguously
315
- - [ ] Flow labels (כן/לא) are clearly positioned near their gateway
316
- - [ ] The legend includes every symbol type used in the diagram
317
- - [ ] Data artifacts don't overlap with sequence flow paths
318
- - [ ] Pool ordering minimizes message flow crossing distance
319
-
320
- ---
321
-
322
- # APPENDIX
323
-
324
- ## Example Process Categories
325
-
326
- This skill handles processes such as:
327
- - Healthcare workflows (e.g., Tipat Halav clinic visits, hospital admissions)
328
- - Government/municipal service processes
329
- - Customer service and support flows
330
- - Order fulfillment and logistics
331
- - Employee onboarding
332
- - Academic/educational administration processes
333
-
334
- The skill works for any domain — adapt the color scheme and terminology to match the context.
335
-
336
- ## Hebrew Language Guidelines (שפה מגדרית נייטרלית)
337
204
 
338
- When labels, names, actors, roles, or any text in the diagram are written in Hebrew, follow these rules:
205
+ ## After Generating the Output
339
206
 
340
- ### Use Male Form as Default
341
- Always use the **male grammatical form** (זכר) when referring to people, roles, actors, classes, or participants — even when the role is traditionally associated with a specific gender.
207
+ Tell the user in the conversation (not in the HTML):
342
208
 
343
- **Examples of correct usage:**
344
- - ✅ רופא (not אחות for a nurse role — use אח)
345
- - ✅ אח (nurse, male form)
346
- - ✅ מטופל (not מטופלת)
347
- - ✅ לקוח (not לקוחה)
348
- - ✅ מנהל (not מנהלת)
349
- - ✅ עובד (not עובדת)
350
- - ✅ משתמש (not משתמשת)
351
- - ✅ סטודנט (not סטודנטית)
209
+ **"יצרתי ניתוח מבני של התהליך. אפשר לעיין בקובץ ה-HTML ולבדוק שהמודל נכון. כשהמודל מאושר, אפשר לבקש ממני לצייר את דיאגרמת ה-BPMN."**
352
210
 
353
- **Examples of stereotypic writing to avoid:**
354
- - ❌ רופא ואחות — implies doctor=male, nurse=female
355
- - ❌ מזכירה — use מזכיר instead
356
- - ❌ אחות — use אח instead
211
+ ## Hebrew Language Guidelines
357
212
 
358
- ### Rule Summary
359
- > When in doubt, use the male form. This ensures gender neutrality and avoids reinforcing occupational gender stereotypes in diagram content.
213
+ Use the **male grammatical form** (זכר) for all roles:
214
+ - רופא, אח, מטופל, לקוח, מנהל, עובד, משתמש, סטודנט
215
+ - ❌ אחות, מטופלת, לקוחה, מנהלת, מזכירה
@@ -0,0 +1,187 @@
1
+ ---
2
+ name: bpmn-render
3
+ description: "Internal skill: Render an approved BPMN structural model as an interactive HTML/SVG file. Do not invoke directly — use bpmn-diagram first to build the model."
4
+ ---
5
+
6
+ # BPMN Rendering — Phase 2 & 3
7
+
8
+ You have an approved structural model from the conversation above (output of the `bpmn-diagram` prompt). Now render it as an HTML file with embedded SVG, then validate.
9
+
10
+ **Every participant, task, gateway, data store, data object, and flow from the approved model MUST appear in the SVG. Do not add or remove elements.**
11
+
12
+ ## NON-NEGOTIABLE RENDERING RULES
13
+
14
+ 1. **GATEWAYS**: The diamond contains ONLY the marker symbol: **X** (XOR), **+** (AND), or **O** (OR). NEVER text inside. Labels go ABOVE the diamond. Every gateway (split AND merge) must show its marker.
15
+
16
+ 2. **EXTERNAL PARTICIPANTS** are separate pools with message flows (dashed). NOT lanes.
17
+
18
+ 3. **DATA STORES** appear as cylinders with data association lines to their tasks.
19
+
20
+ 4. **NO ELEMENTS ON LANE BOUNDARIES**: Every element fully inside one lane, centered vertically.
21
+
22
+ ## Architecture & Layout
23
+
24
+ ### Pools and Lanes
25
+
26
+ - **External participant pools**: Own pool rectangle, visually separated. Brown header, orange tasks (`#fff3e0` fill, `#e65100` stroke).
27
+ - **Organization pool**: Dark gray header, contains internal lanes. Each lane has a labeled sidebar and subtle background tint. Dashed divider lines between lanes.
28
+ - Pool headers: Vertical text bars on the left side.
29
+
30
+ ### Element Placement
31
+
32
+ Every BPMN element must be fully contained within a single lane or pool. Center elements vertically within their lane with visible spacing from borders.
33
+
34
+ ### Color Scheme
35
+
36
+ | Element | Fill | Stroke |
37
+ |---------|------|--------|
38
+ | External participant tasks | `#fff3e0` | `#e65100` |
39
+ | Reception/admin tasks | `#e3f2fd` | `#1976d2` |
40
+ | Clinical/operational tasks | `#f3e5f5` | `#7b1fa2` |
41
+ | XOR Gateways | `#fff8e1` | `#f9a825` |
42
+ | Start event | `#e8f5e9` | `#2e7d32` |
43
+ | End event | `#ffebee` | `#c62828` |
44
+ | Data objects | `#fff` | `#1565c0` |
45
+ | Data stores | `#fff` | `#2e7d32` |
46
+
47
+ ### Pool Ordering
48
+
49
+ When multiple external pools exist, minimize message flow crossing distance:
50
+ - Primary actor (initiates, interacts with multiple parties) in the middle
51
+ - Interacting pools above and below
52
+
53
+ ### Flow Types
54
+
55
+ - **Sequence flows** (within a pool): Solid lines, filled arrowheads (`#546e7a`)
56
+ - **Message flows** (between pools): Dashed lines (`stroke-dasharray: 10 5`), open circle at source, filled arrow at target (`#37474f`)
57
+ - **Data associations**: Dashed lines (`stroke-dasharray: 4 3`), small arrowheads:
58
+ - Data object: `#7986cb`
59
+ - Data store: `#4caf50`
60
+
61
+ ## SVG Templates
62
+
63
+ ### XOR Gateway (split or merge)
64
+
65
+ ```svg
66
+ <rect x="X" y="Y" width="34" height="34" class="gateway" transform="rotate(45, CX, CY)"/>
67
+ <line x1="CX-7" y1="CY-10" x2="CX+7" y2="CY+10" class="gateway-x"/>
68
+ <line x1="CX+7" y1="CY-10" x2="CX-7" y2="CY+10" class="gateway-x"/>
69
+ <text x="CX" y="CY-25" text-anchor="middle">label ABOVE diamond</text>
70
+ ```
71
+
72
+ **WRONG — never do this:**
73
+ ```svg
74
+ <polygon points="..." fill="..." stroke="..."/>
75
+ <text x="CX" y="CY">text inside diamond</text> <!-- FORBIDDEN -->
76
+ ```
77
+
78
+ ### Intermediate Events (BPMN 1.1)
79
+
80
+ Plain double circle, NO icon inside:
81
+ ```svg
82
+ <circle cx="X" cy="Y" r="16" fill="#fff" stroke="#1565c0" stroke-width="2"/>
83
+ <circle cx="X" cy="Y" r="12" fill="none" stroke="#1565c0" stroke-width="1.2"/>
84
+ ```
85
+
86
+ ### Data Objects (folded document, blue)
87
+
88
+ ```svg
89
+ <path d="M X,Y L X+26,Y L X+34,Y+8 L X+34,Y+38 L X,Y+38 Z" class="data-object-shape"/>
90
+ <path d="M X+26,Y L X+26,Y+8 L X+34,Y+8" class="data-object-fold"/>
91
+ ```
92
+
93
+ ### Data Stores (cylinder, green)
94
+
95
+ ```svg
96
+ <ellipse cx="CX" cy="TOP" rx="28" ry="8" class="data-store-body"/>
97
+ <path d="M CX-28,TOP L CX-28,BOTTOM" fill="none" stroke="#2e7d32" stroke-width="1.3"/>
98
+ <path d="M CX+28,TOP L CX+28,BOTTOM" fill="none" stroke="#2e7d32" stroke-width="1.3"/>
99
+ <ellipse cx="CX" cy="BOTTOM" rx="28" ry="8" class="data-store-body"/>
100
+ ```
101
+
102
+ ### Data Artifact Placement
103
+
104
+ - Data objects above or below their task, never overlapping flow lines
105
+ - Data stores typically below their tasks
106
+ - Association lines must not cross sequence flow arrows
107
+
108
+ ## Arrow Routing
109
+
110
+ **Arrows must never be ambiguous.**
111
+
112
+ ### Split-Merge Pattern
113
+
114
+ 1. YES task above gateway center, NO task below
115
+ 2. Merge gateway to the right of BOTH tasks
116
+ 3. YES path: task → right → down into merge (from top)
117
+ 4. NO path: task → right → up into merge (from bottom)
118
+ 5. Single clean line from merge to next task
119
+
120
+ ### General Rules
121
+
122
+ - Orthogonal (right-angle) routing preferred
123
+ - At least 30px between parallel flow lines
124
+ - Cross-lane flows: clear vertical drops/rises
125
+ - Labels (כן/לא) near the gateway, not at path end
126
+ - Flow labels must not overlap other elements
127
+
128
+ ### Rejection/Retry Loops
129
+
130
+ - Rejection = explicit task (not just gateway output)
131
+ - After rejection: model the rejecting participant's next state
132
+ - Response to rejection = concrete task sequence
133
+ - Loop-back to earliest meaningful re-entry point
134
+
135
+ ## Typography & Hebrew
136
+
137
+ - `Noto Sans Hebrew` from Google Fonts
138
+ - `lang="he"` and `dir="rtl"` on HTML element
139
+ - Task text: 11.5px, font-weight 500, centered
140
+ - Gateway labels: 10.5px, font-weight 400, above diamond
141
+ - Data labels: 9.5px, font-weight 500
142
+ - Flow labels: 10px
143
+
144
+ ## File Structure
145
+
146
+ Single self-contained HTML file:
147
+
148
+ 1. **Header bar**: Gradient, process title in Hebrew + English subtitle. Must say "BPMN 1.1"
149
+ 2. **Legend**: All BPMN symbols used (start, end, task, XOR gateway, intermediate event, data object, data store, message flow)
150
+ 3. **SVG canvas**: Full diagram in scrollable wrapper
151
+ 4. **SVG definitions**: Drop shadow filters, arrow markers
152
+
153
+ ### SVG Sizing
154
+
155
+ - Width: 1700–1800px (overflow scroll)
156
+ - Height: ~130px per external pool, ~250px per lane, plus data artifacts
157
+ - `viewBox` matching width/height
158
+
159
+ ---
160
+
161
+ # PHASE 3 — VALIDATION
162
+
163
+ **Before delivering, verify EVERY item. Fix any failure before delivering.**
164
+
165
+ ## Structural Accuracy (cross-reference with approved model)
166
+ - [ ] Every participant from the model appears — none omitted
167
+ - [ ] External participants are separate pools with message flows
168
+ - [ ] Every pool has complete flow (start → ... → end)
169
+ - [ ] Every gateway has the correct type marker (X/+/O) — no text inside
170
+ - [ ] Every data store appears as a cylinder with data associations
171
+ - [ ] Every message flow appears as dashed line between pools
172
+
173
+ ## BPMN Compliance
174
+ - [ ] Gateway labels ABOVE or BESIDE the diamond, never inside
175
+ - [ ] Every element fully inside one lane — nothing on boundaries
176
+ - [ ] Passive waiting uses intermediate events, not tasks
177
+ - [ ] Data objects (folded document) and data stores (cylinder) are visually distinct
178
+
179
+ ## Visual Quality
180
+ - [ ] No arrow paths overlap or cross ambiguously
181
+ - [ ] Flow labels clearly positioned near their gateway
182
+ - [ ] Legend includes every symbol type used
183
+ - [ ] Data artifacts don't overlap sequence flow paths
184
+ - [ ] Pool ordering minimizes message flow crossing distance
185
+
186
+ ## Hebrew Language
187
+ - [ ] Male grammatical form used for all roles (רופא not אחות, אח not אחות, מטופל not מטופלת)