mirror of https://github.com/NousResearch/hermes-agent.git synced 2026-04-25 00:51:20 +00:00

Teknium 19c589a20b refactor(concept-diagrams): rename + tighten v1k22's skill for merge

Salvage of PR #11045 (original by v1k22). Changes on top of the
original commit:

- Rename 'architecture-visualization-svg-diagrams' -> 'concept-diagrams'
  to differentiate from the existing architecture-diagram skill.
  architecture-diagram stays as the dark-themed Cocoon-style option for
  software/infra; concept-diagrams covers physics, chemistry, math,
  engineering, physical objects, and educational visuals.
- Trigger description scoped to actual use cases; removed the 'always
  use this skill' language and long phrase-capture list to stop
  colliding with architecture-diagram, excalidraw, generative-widgets,
  manim-video.
- Default output is now a standalone self-contained HTML file (works
  offline, no server). The preview server is opt-in and no longer part
  of the default workflow.
- When the server IS used: bind to 127.0.0.1 instead of 0.0.0.0 (was a
  LAN exposure hazard on shared networks) and let the OS pick a free
  ephemeral port instead of hard-coding 22223 (collision prone).
- Shrink SKILL.md from 1540 to 353 lines by extracting reusable
  material into linked files:
    - templates/template.html (host page with full CSS design system)
    - references/physical-shape-cookbook.md
    - references/infrastructure-patterns.md
    - references/dashboard-patterns.md
  All 15 examples kept intact.
- Add dhandhalyabhavik@gmail.com -> v1k22 to AUTHOR_MAP.

Preserves v1k22's authorship on the underlying commit.

2026-04-16 20:39:55 -07:00

7.7 KiB

Raw Blame History

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

<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

7.7 KiB Raw Blame History Unescape Escape