yilsem/aiturk-hermes-ide
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity
Files
aiturk/main
aiturk-hermes-ide/optional-skills/creative/concept-diagrams/examples/hospital-emergency-department-flow.md
T

166 lines
7.7 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# Hospital Emergency Department Flow
A multi-path flowchart showing patient journey through an emergency department with priority-based routing using semantic colors (red=critical, amber=urgent, green=stable).
## Key Patterns Used
- **Semantic color coding**: Red/amber/green for priority levels (not arbitrary decoration)
- **Stage labels**: Left-aligned faded labels marking workflow phases
- **Convergent paths**: Multiple entry points merging, then branching, then converging again
- **Nested containers**: Diagnostics grouped in a container with inner nodes
- **Legend**: Color key at bottom explaining priority levels
## Diagram
```xml
<svg width="100%" viewBox="0 0 680 620" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</marker>
</defs>
<!-- Stage labels -->
<text class="ts" x="40" y="68" text-anchor="start" opacity=".5">Arrival</text>
<text class="ts" x="40" y="168" text-anchor="start" opacity=".5">Assessment</text>
<text class="ts" x="40" y="288" text-anchor="start" opacity=".5">Priority routing</text>
<text class="ts" x="40" y="418" text-anchor="start" opacity=".5">Diagnostics</text>
<text class="ts" x="40" y="518" text-anchor="start" opacity=".5">Outcome</text>
<!-- Arrival: Ambulance -->
<g class="node c-gray">
<rect x="140" y="40" width="160" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="220" y="60" text-anchor="middle" dominant-baseline="central">Ambulance</text>
<text class="ts" x="220" y="80" text-anchor="middle" dominant-baseline="central">Emergency transport</text>
</g>
<!-- Arrival: Walk-in -->
<g class="node c-gray">
<rect x="380" y="40" width="160" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="460" y="60" text-anchor="middle" dominant-baseline="central">Walk-in</text>
<text class="ts" x="460" y="80" text-anchor="middle" dominant-baseline="central">Self-arrival</text>
</g>
<!-- Arrows to Triage -->
<line x1="220" y1="96" x2="300" y2="140" class="arr" marker-end="url(#arrow)"/>
<line x1="460" y1="96" x2="380" y2="140" class="arr" marker-end="url(#arrow)"/>
<!-- Triage -->
<g class="node c-purple">
<rect x="240" y="140" width="200" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="340" y="160" text-anchor="middle" dominant-baseline="central">Triage</text>
<text class="ts" x="340" y="180" text-anchor="middle" dominant-baseline="central">Nurse assessment, vitals</text>
</g>
<!-- Arrows from Triage to Priority -->
<line x1="280" y1="196" x2="140" y2="260" class="arr" marker-end="url(#arrow)"/>
<line x1="340" y1="196" x2="340" y2="260" class="arr" marker-end="url(#arrow)"/>
<line x1="400" y1="196" x2="540" y2="260" class="arr" marker-end="url(#arrow)"/>
<!-- Priority: Red - Trauma -->
<g class="node c-red">
<rect x="60" y="260" width="160" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="140" y="280" text-anchor="middle" dominant-baseline="central">Trauma bay</text>
<text class="ts" x="140" y="300" text-anchor="middle" dominant-baseline="central">Priority: critical</text>
</g>
<!-- Priority: Yellow - Exam rooms -->
<g class="node c-amber">
<rect x="260" y="260" width="160" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="340" y="280" text-anchor="middle" dominant-baseline="central">Exam rooms</text>
<text class="ts" x="340" y="300" text-anchor="middle" dominant-baseline="central">Priority: urgent</text>
</g>
<!-- Priority: Green - Waiting -->
<g class="node c-green">
<rect x="460" y="260" width="160" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="540" y="280" text-anchor="middle" dominant-baseline="central">Waiting area</text>
<text class="ts" x="540" y="300" text-anchor="middle" dominant-baseline="central">Priority: stable</text>
</g>
<!-- Arrows to Diagnostics -->
<line x1="140" y1="316" x2="220" y2="390" class="arr" marker-end="url(#arrow)"/>
<line x1="340" y1="316" x2="340" y2="390" class="arr" marker-end="url(#arrow)"/>
<line x1="540" y1="316" x2="460" y2="390" class="arr" marker-end="url(#arrow)"/>
<!-- Diagnostics container -->
<g class="c-teal">
<rect x="140" y="390" width="400" height="56" rx="12" stroke-width="0.5"/>
</g>
<!-- Labs -->
<g class="node c-teal">
<rect x="160" y="400" width="110" height="36" rx="6" stroke-width="0.5"/>
<text class="ts" x="215" y="418" text-anchor="middle" dominant-baseline="central">Labs</text>
</g>
<!-- Imaging -->
<g class="node c-teal">
<rect x="285" y="400" width="110" height="36" rx="6" stroke-width="0.5"/>
<text class="ts" x="340" y="418" text-anchor="middle" dominant-baseline="central">Imaging</text>
</g>
<!-- Diagnosis -->
<g class="node c-teal">
<rect x="410" y="400" width="110" height="36" rx="6" stroke-width="0.5"/>
<text class="ts" x="465" y="418" text-anchor="middle" dominant-baseline="central">Diagnosis</text>
</g>
<!-- Arrows to Outcomes -->
<line x1="215" y1="446" x2="160" y2="490" class="arr" marker-end="url(#arrow)"/>
<line x1="340" y1="446" x2="340" y2="490" class="arr" marker-end="url(#arrow)"/>
<line x1="465" y1="446" x2="520" y2="490" class="arr" marker-end="url(#arrow)"/>
<!-- Outcome: Admission -->
<g class="node c-coral">
<rect x="80" y="490" width="160" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="160" y="510" text-anchor="middle" dominant-baseline="central">Admission</text>
<text class="ts" x="160" y="530" text-anchor="middle" dominant-baseline="central">Inpatient ward</text>
</g>
<!-- Outcome: Surgery -->
<g class="node c-coral">
<rect x="260" y="490" width="160" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="340" y="510" text-anchor="middle" dominant-baseline="central">Surgery</text>
<text class="ts" x="340" y="530" text-anchor="middle" dominant-baseline="central">Operating room</text>
</g>
<!-- Outcome: Discharge -->
<g class="node c-coral">
<rect x="440" y="490" width="160" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="520" y="510" text-anchor="middle" dominant-baseline="central">Discharge</text>
<text class="ts" x="520" y="530" text-anchor="middle" dominant-baseline="central">Home with instructions</text>
</g>
<!-- Legend -->
<text class="ts" x="140" y="580" opacity=".5">Priority levels</text>
<g class="c-red"><rect x="140" y="592" width="14" height="14" rx="3" stroke-width="0.5"/></g>
<text class="ts" x="162" y="604">Critical</text>
<g class="c-amber"><rect x="240" y="592" width="14" height="14" rx="3" stroke-width="0.5"/></g>
<text class="ts" x="262" y="604">Urgent</text>
<g class="c-green"><rect x="340" y="592" width="14" height="14" rx="3" stroke-width="0.5"/></g>
<text class="ts" x="362" y="604">Stable</text>
</svg>
```
## Color Assignments
| Element | Color | Reason |
|---------|-------|--------|
| Entry points (Ambulance, Walk-in) | `c-gray` | Neutral starting points |
| Triage | `c-purple` | Processing/assessment step |
| Trauma bay | `c-red` | Critical priority (semantic) |
| Exam rooms | `c-amber` | Urgent priority (semantic) |
| Waiting area | `c-green` | Stable priority (semantic) |
| Diagnostics | `c-teal` | Clinical services category |
| Outcomes | `c-coral` | Final disposition category |
## Layout Notes
- **ViewBox**: 680×620 (standard width, extended height for 5 stages)
- **Stage spacing**: ~110-130px between stage rows
- **Diagonal arrows**: Connect nodes across columns naturally
- **Container with inner nodes**: Diagnostics uses outer `c-teal` rect with inner node rects
Reference in New Issue View Git Blame Copy Permalink