flowchart_diagram.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Clinical Decision Support System Flowchart Diagram</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            sans: ['Inter', 'sans-serif'],
          }
        }
      }
    }
  </script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Inter', sans-serif;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
    @page {
      size: A3 portrait;
      margin: 0mm;
    }
  </style>
</head>
<body class="bg-slate-100 p-8 flex justify-center items-center">

  <svg width="1000" height="1350" viewBox="0 0 1000 1350" class="bg-white border border-slate-200 shadow-xl rounded-3xl p-8">
    <!-- SVG CSS Styles -->
    <style>
      .title-text { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 800; fill: #0f172a; }
      .subtitle-text { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; fill: #64748b; }
      .section-num { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; fill: #ffffff; }
      
      .node-label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; fill: #0f172a; text-anchor: middle; }
      .node-desc { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 500; fill: #334155; text-anchor: middle; }
      .node-desc-bold { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 700; fill: #0f172a; text-anchor: middle; }
      .alert-desc { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 700; fill: #be123c; text-anchor: middle; }
      
      .line-label { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 700; fill: #4f46e5; }
      
      .color-start { fill: #e0e7ff; stroke: #4f46e5; stroke-width: 2; }
      .color-decision { fill: #f3e8ff; stroke: #9333ea; stroke-width: 2; }
      .color-process { fill: #f8fafc; stroke: #cbd5e1; stroke-width: 1.5; }
      .color-alert { fill: #fff1f2; stroke: #e11d48; stroke-width: 2; }
      .color-amber { fill: #fffbeb; stroke: #d97706; stroke-width: 2; }
      .color-green { fill: #f0fdf4; stroke: #16a34a; stroke-width: 2; }
      
      .connector { stroke: #6366f1; stroke-width: 1.5; fill: none; }
    </style>

    <!-- Definitions for arrows -->
    <defs>
      <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
        <path d="M 0 1 L 10 5 L 0 9 z" fill="#6366f1"/>
      </marker>
    </defs>

    <!-- ==================== HEADER ==================== -->
    <g transform="translate(40, 20)">
      <rect x="0" y="0" width="920" height="70" rx="16" fill="#f8fafc" stroke="#f1f5f9" stroke-width="2"/>
      <circle cx="40" cy="35" r="20" fill="#4f46e5"/>
      <!-- Icon (pulse check) -->
      <path d="M30 35 L35 35 L37 25 L40 45 L43 32 L45 35 L50 35" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
      <text x="75" y="36" class="title-text">ACS CDSS: Patient Assessment & Guidelines Diagram</text>
      <text x="75" y="52" class="subtitle-text">2025 ACC/AHA ACS Decision Tree & Pharmacy Rules Logic</text>
    </g>

    <!-- ==================== STEP 1: INTAKE & O2 ==================== -->
    <!-- Start Node -->
    <g>
      <rect x="400" y="110" width="200" height="40" rx="20" class="color-start"/>
      <text x="500" y="134" class="node-label">Patient Intake Ingestion</text>
    </g>
    
    <!-- Connector 1 -->
    <path d="M 500 150 L 500 180" class="connector" marker-end="url(#arrow)"/>
    
    <!-- SpO2 Decision Diamond -->
    <g>
      <polygon points="500,180 570,210 500,240 430,210" class="color-decision"/>
      <text x="500" y="214" class="node-label">SpO2 Check</text>
    </g>
    
    <!-- SpO2 Left branch (Alert) -->
    <path d="M 430 210 L 320 210" class="connector" marker-end="url(#arrow)"/>
    <text x="340" y="202" class="line-label" style="fill: #e11d48;">&lt; 90% (Hypoxemia)</text>
    <g>
      <rect x="100" y="185" width="220" height="50" rx="8" class="color-alert"/>
      <text x="210" y="205" class="node-label" style="fill: #be123c;">HYPOXEMIA ALERT</text>
      <text x="210" y="222" class="alert-desc">Administer Supplementary O2 immediately</text>
    </g>

    <!-- SpO2 Down branch (Proceed) -->
    <path d="M 500 240 L 500 280" class="connector" marker-end="url(#arrow)"/>
    <text x="510" y="262" class="line-label" style="fill: #16a34a;">&gt;= 90%</text>

    <!-- ==================== STEP 2: DIAGNOSIS ==================== -->
    <!-- Diagnosis Decision Diamond -->
    <g>
      <polygon points="500,280 570,310 500,340 430,310" class="color-decision"/>
      <text x="500" y="314" class="node-label">Diagnosis?</text>
    </g>
    
    <!-- Diagnosis Left Branch (STEMI) -->
    <path d="M 430 310 L 250 310 L 250 360" class="connector" marker-end="url(#arrow)"/>
    <text x="310" y="302" class="line-label">STEMI</text>

    <!-- STEMI Reperfusion Decision Diamond -->
    <g>
      <polygon points="250,360 310,385 250,410 190,385" class="color-decision"/>
      <text x="250" y="389" class="node-label">Reperfusion Strategy?</text>
    </g>

    <!-- STEMI Fib branch -->
    <path d="M 190 385 L 125 385 L 125 435" class="connector" marker-end="url(#arrow)"/>
    <text x="135" y="377" class="line-label">Fibrinolytic</text>
    <g>
      <rect x="25" y="435" width="210" height="120" rx="8" class="color-green"/>
      <text x="130" y="449" class="node-label" style="fill: #15803d; font-size: 9px;">Fibrinolytic Protocol</text>
      <text x="130" y="458" class="node-desc" style="font-size: 7.2px; font-weight: 700;">Aspirin:</text>
      <text x="130" y="467" class="node-desc" style="font-size: 6.8px;">- Loading Dose: 162-325 mg orally (chew)</text>
      <text x="130" y="476" class="node-desc" style="font-size: 6.8px;">- Maintenance Dose: 75-100 mg once daily</text>
      <text x="130" y="485" class="node-desc" style="font-size: 7.2px; font-weight: 700;">Clopidogrel (with Fibrinolysis):</text>
      <text x="130" y="494" class="node-desc" style="font-size: 6.8px;">- Age &le;75y: LD 300mg | MD 75mg once daily</text>
      <text x="130" y="503" class="node-desc" style="font-size: 6.8px;">- Age &gt;75y: No loading dose | MD 75mg once daily</text>
      <text x="130" y="512" class="node-desc" style="font-size: 6.8px;">Parenteral Anticoagulation for all patients</text>
      <text x="130" y="521" class="node-desc" style="font-size: 6.8px;">Beta-blockers / RAASi: reduce death/reinfarction</text>
      <text x="130" y="530" class="node-desc" style="font-size: 6.8px; fill: #b45309; font-weight: 600;">Consider if primary PCI not possible</text>
      <text x="130" y="539" class="alert-desc" style="font-size: 6.5px;">No Prasugrel/Ticagrelor (Hemorrhage risk)</text>
    </g>

    <!-- STEMI PPCI branch -->
    <path d="M 370 385 L 370 435" class="connector" marker-end="url(#arrow)"/>
    <text x="325" y="377" class="line-label">Primary PCI</text>
    <g>
      <rect x="265" y="435" width="210" height="120" rx="8" class="color-green"/>
      <text x="370" y="449" class="node-label" style="fill: #15803d; font-size: 9px;">Primary PCI Protocol</text>
      <text x="370" y="458" class="node-desc" style="font-size: 7.2px; font-weight: 700;">Aspirin:</text>
      <text x="370" y="467" class="node-desc" style="font-size: 6.8px;">- Loading Dose: 162-325 mg orally (chew)</text>
      <text x="370" y="476" class="node-desc" style="font-size: 6.8px;">- Maintenance Dose: 75-100 mg once daily</text>
      <text x="370" y="485" class="node-desc" style="font-size: 6.8px;">- Ticagrelor: LD 180mg | MD 90mg twice daily</text>
      <text x="370" y="494" class="node-desc" style="font-size: 6.8px;">- Prasugrel: LD 60mg | MD 10mg once daily*</text>
      <text x="370" y="503" class="node-desc" style="font-size: 6.5px;">  *(MD 5mg if weight &lt;60kg or age &ge;75y)</text>
      <text x="370" y="512" class="node-desc" style="font-size: 6.8px;">- Clop (Fallback): LD 300/600mg, MD 75mg daily</text>
      <text x="370" y="521" class="node-desc" style="font-size: 6.8px;">Parenteral Anticoagulation for all patients</text>
      <text x="370" y="530" class="node-desc" style="font-size: 6.8px;">Beta-blocker / RAASi: in STEMI</text>
      <text x="370" y="539" class="alert-desc" style="font-size: 6.8px;">Suboptimal: Clopidogrel used fallback</text>
    </g>

    <!-- Diagnosis Right Branch (NSTE-ACS) -->
    <path d="M 560 310 L 750 310 L 750 360" class="connector" marker-end="url(#arrow)"/>
    <text x="630" y="302" class="line-label">NSTE-ACS (NSTEMI / UA)</text>

    <!-- NSTE Reperfusion Decision Diamond -->
    <g>
      <polygon points="750,360 810,385 750,410 690,385" class="color-decision"/>
      <text x="750" y="389" class="node-label">Management Strategy?</text>
    </g>

    <!-- NSTE Med branch -->
    <path d="M 690 385 L 610 385 L 610 435" class="connector" marker-end="url(#arrow)"/>
    <text x="635" y="377" class="line-label">Conservative</text>
    <g>
      <rect x="505" y="435" width="210" height="120" rx="8" class="color-green"/>
      <text x="610" y="449" class="node-label" style="fill: #15803d; font-size: 9px;">Medical Management</text>
      <text x="610" y="458" class="node-desc" style="font-size: 7.2px; font-weight: 700;">Aspirin:</text>
      <text x="610" y="467" class="node-desc" style="font-size: 6.8px;">- Loading Dose: 162-325 mg orally (chew)</text>
      <text x="610" y="476" class="node-desc" style="font-size: 6.8px;">- Maintenance Dose: 75-100 mg once daily</text>
      <text x="610" y="485" class="node-desc" style="font-size: 7.2px; font-weight: 700;">Ticagrelor:</text>
      <text x="610" y="494" class="node-desc" style="font-size: 6.8px;">- Loading Dose: 180 mg orally</text>
      <text x="610" y="503" class="node-desc" style="font-size: 6.8px;">- Maintenance Dose: 90 mg twice daily</text>
      <text x="610" y="512" class="node-desc" style="font-size: 6.8px;">- Clop (Fallback): LD 300/600mg, MD 75mg daily</text>
      <text x="610" y="521" class="node-desc" style="font-size: 6.8px;">Parenteral Anticoagulation for all patients</text>
      <text x="610" y="530" class="node-desc" style="font-size: 6.8px;">Beta-blockers / RAASi: if LVEF&lt;40% or HF</text>
      <text x="610" y="539" class="alert-desc" style="font-size: 6.8px;">Suboptimal: Clopidogrel used fallback</text>
    </g>

    <!-- NSTE Invasive branch -->
    <path d="M 810 385 L 860 385 L 860 435" class="connector" marker-end="url(#arrow)"/>
    <text x="825" y="377" class="line-label">Invasive Strategy</text>
    <g>
      <rect x="745" y="435" width="230" height="120" rx="8" class="color-green"/>
      <text x="860" y="449" class="node-label" style="fill: #15803d; font-size: 9px;">Invasive Protocol</text>
      <text x="860" y="457" class="node-desc" style="font-size: 7.2px; font-weight: 700;">Aspirin:</text>
      <text x="860" y="466" class="node-desc" style="font-size: 6.8px;">- Loading Dose: 162-325 mg orally (chew)</text>
      <text x="860" y="475" class="node-desc" style="font-size: 6.8px;">- Maintenance Dose: 75-100 mg once daily</text>
      <text x="860" y="484" class="node-desc" style="font-size: 6.8px;">- Tica: LD 180mg, MD 90mg BID | Pras: LD 60mg, MD 10mg*</text>
      <text x="860" y="493" class="node-desc" style="font-size: 6.5px;">  *(MD 5mg if weight &lt;60kg or age &ge;75y (caution))</text>
      <text x="860" y="502" class="node-desc" style="font-size: 6.8px;">- Clop (Fallback): LD 300/600mg, MD 75mg daily</text>
      <text x="860" y="511" class="node-desc" style="font-size: 6.8px;">Anticoag: continue until revasc (CABG/PCI)</text>
      <text x="860" y="520" class="node-desc" style="font-size: 6.8px;">Beta-blockers / RAASi: if LVEF&lt;40% / HF / HTN / DM</text>
      <text x="860" y="529" class="node-desc" style="font-size: 6.5px; fill: #b45309; font-weight: 600;">Contraindicated: HBR / &darr;Plt / CKD / ARF / Dementia</text>
      <text x="860" y="538" class="alert-desc" style="font-size: 6.8px;">Suboptimal: Clopidogrel used fallback</text>
    </g>

    <!-- ==================== STEP 3: ISCHEMIC RISK ==================== -->
    <!-- Merge Lines and Connect to Ischemic check -->
    <path d="M 130 555 L 130 570 L 500 570 L 500 590" class="connector"/>
    <path d="M 370 555 L 370 570 L 500 570" class="connector"/>
    <path d="M 610 555 L 610 570 L 500 570" class="connector"/>
    <path d="M 860 555 L 860 570 L 500 570" class="connector"/>
    
    <path d="M 500 570 L 500 590" class="connector" marker-end="url(#arrow)"/>
    
    <!-- Ischemic Risk Diamond -->
    <g>
      <polygon points="500,590 570,620 500,650 430,620" class="color-decision"/>
      <text x="500" y="624" class="node-label">High Ischemic Risk?</text>
    </g>
    
    <!-- Ischemic Left Branch (High) -->
    <path d="M 430 620 L 250 620 L 250 670" class="connector" marker-end="url(#arrow)"/>
    <text x="270" y="612" class="line-label" style="fill: #e11d48;">YES (Troponin+/Shock/Angina/HF/VT/VF)</text>
    <g>
      <rect x="100" y="670" width="300" height="60" rx="8" class="color-alert"/>
      <text x="250" y="690" class="node-label" style="fill: #be123c;">High Ischemic Risk Stratification</text>
      <text x="250" y="707" class="alert-desc">For NSTE-ACS: IMMEDIATE Invasive Strategy</text>
      <text x="250" y="720" class="node-desc">Proceed to angiography within 2 hours</text>
    </g>

    <!-- Ischemic Right Branch (Standard) -->
    <path d="M 560 620 L 750 620 L 750 670" class="connector" marker-end="url(#arrow)"/>
    <text x="590" y="612" class="line-label" style="fill: #16a34a;">NO (Standard Risk)</text>
    <g>
      <rect x="600" y="670" width="300" height="60" rx="8" class="color-green"/>
      <text x="750" y="690" class="node-label" style="fill: #15803d;">Standard Ischemic Risk</text>
      <text x="750" y="707" class="node-desc">For NSTE-ACS: Early Invasive Strategy</text>
      <text x="750" y="720" class="node-desc">Proceed to angiography within 24 hours</text>
    </g>

    <!-- ==================== STEP 4: BLEEDING RISK ==================== -->
    <path d="M 250 730 L 250 755 L 500 755" class="connector"/>
    <path d="M 750 730 L 750 755 L 500 755" class="connector"/>
    <path d="M 500 755 L 500 780" class="connector" marker-end="url(#arrow)"/>

    <!-- Bleeding Risk Diamond -->
    <g>
      <polygon points="500,780 570,810 500,840 430,810" class="color-decision"/>
      <text x="500" y="814" class="node-label">High Bleeding (HBR)?</text>
    </g>

    <!-- HBR Left Branch (Yes) -->
    <path d="M 430 810 L 250 810 L 250 860" class="connector" marker-end="url(#arrow)"/>
    <text x="270" y="802" class="line-label" style="fill: #d97706;">YES (Age &gt;= 75 / CKD / Anemia / AF / Stroke)</text>
    
    <g>
      <rect x="50" y="860" width="400" height="150" rx="12" class="color-amber"/>
      <text x="250" y="878" class="node-label" style="fill: #b45309;">High Bleeding Risk (HBR) Protocol</text>
      <!-- Prasugrel alert -->
      <text x="250" y="893" class="alert-desc" style="font-size: 9px;">CRITICAL OVERRIDE: Discontinue Prasugrel immediately (Use Clopidogrel 75mg)</text>
      <text x="250" y="904" class="alert-desc" style="font-size: 8px; fill: #5b21b6;">RBC Transfusion: Maintain Hb 10 g/dL if anemia &amp; no active bleed</text>
      
      <!-- HBR Rules -->
      <line x1="70" y1="913" x2="430" y2="913" stroke="#fcd34d" stroke-width="1"/>
      <text x="250" y="925" class="node-desc-bold">Guidelines Safety Customizations:</text>
      <text x="250" y="938" class="node-desc">Rule C (OAC/AF): Drop Aspirin, use Dual Therapy (OAC + Clopidogrel)</text>
      <text x="250" y="951" class="node-desc">Rule B (Minor Bleed): Down-Titrate Ticagrelor/Prasugrel to Clopidogrel</text>
      <text x="250" y="964" class="node-desc">Rule A (Standard HBR): Short DAPT (Drop Aspirin, Ticagrelor Mono after 1-3m)</text>
    </g>

    <!-- HBR Right Branch (No) -->
    <path d="M 560 810 L 750 810 L 750 860" class="connector" marker-end="url(#arrow)"/>
    <text x="590" y="802" class="line-label">NO (Standard Bleeding Risk)</text>
    <g>
      <rect x="550" y="860" width="400" height="150" rx="12" class="color-green"/>
      <text x="750" y="880" class="node-label" style="fill: #15803d;">Standard Bleeding Risk Protocol</text>
      <text x="750" y="910" class="node-desc-bold">Standard Course DAPT:</text>
      <text x="750" y="930" class="node-desc">Aspirin load + potent P2Y12 (Ticagrelor or Prasugrel)</text>
      <text x="750" y="950" class="node-desc">Maintain full DAPT therapy for 12 months</text>
      <text x="750" y="970" class="node-desc">No HBR modifications required</text>
    </g>

    <!-- ==================== STEP 5: GI SAFETY NET ==================== -->
    <path d="M 250 1010 L 250 1035 L 500 1035" class="connector"/>
    <path d="M 750 1010 L 750 1035 L 500 1035" class="connector"/>
    <path d="M 500 1035 L 500 1055" class="connector" marker-end="url(#arrow)"/>

    <g>
      <rect x="150" y="1055" width="700" height="90" rx="12" class="color-amber"/>
      <text x="500" y="1075" class="node-label" style="fill: #b45309;">GI Safety Net & Gastric Protection Screening</text>
      <text x="500" y="1092" class="node-desc-bold">GI Risk Triggers: High Bleeding Risk OR Peptic Ulcer History OR Age &gt;= 75 OR Concurrent NSAIDs</text>
      <!-- GI Rules -->
      <text x="500" y="1112" class="alert-desc">GASTRIC GAP OMISSION: If trigger met & no PPI -> Co-prescribe protective PPI (e.g. Pantoprazole)</text>
      <text x="500" y="1127" class="node-desc">PPI OPTIMIZATION: If Clopidogrel + PPI -> Prefer Pantoprazole over Omeprazole (prevents CYP2C19 interaction)</text>
    </g>

    <!-- ==================== STEP 6: LIPID PREVENTION ==================== -->
    <path d="M 500 1145 L 500 1175" class="connector" marker-end="url(#arrow)"/>

    <g>
      <rect x="150" y="1175" width="700" height="110" rx="12" class="color-green"/>
      <text x="500" y="1195" class="node-label" style="fill: #15803d;">Secondary Lipid Prevention (2025 ACS Guideline Fig 5)</text>
      <text x="500" y="1212" class="node-desc-bold">Baseline: High-Intensity Statin (Atorvastatin 40-80mg or Rosuvastatin 20-40mg)</text>
      <text x="500" y="1225" class="alert-desc">STATIN OMISSION FAULT: Flagged if High-Intensity Statin is missing from therapies</text>
      
      <!-- Target check boxes -->
      <line x1="170" y1="1235" x2="830" y2="1235" stroke="#a7f3d0" stroke-width="1"/>
      <text x="325" y="1255" class="alert-desc">LDL-C &gt;= 70 mg/dL (Goal Missed)</text>
      <text x="325" y="1268" class="node-desc">Add Ezetimibe 10mg immediately (Class 1)</text>
      
      <line x1="500" y1="1242" x2="500" y2="1275" stroke="#a7f3d0" stroke-width="1"/>
      
      <text x="675" y="1255" class="node-desc-bold" style="fill: #065f46;">55 &lt;= LDL-C &lt; 70 mg/dL (Optimization)</text>
      <text x="675" y="1268" class="node-desc">Evaluate Ezetimibe to reach target &lt; 55 mg/dL (Class 2a)</text>
    </g>
    <!-- ==================== FOOTER ==================== -->
    <text x="500" y="1320" class="subtitle-text" style="text-anchor: middle;">ACS CDSS Guidelines Flowchart Tree • Generated for Clinical Reference Registry Use Only</text>
  </svg>

</body>
</html>