Here’s a clean, WordPress-ready Markdown/HTML block that embeds a Mermaid diagram of the primary DHS navigation you pasted (Topics → subtopics, plus News, In Focus, How Do I?, Get Involved, About DHS). I’m using Mermaid’s modern ESM import and initializing on load. The sub-items are taken from the live DHS homepage nav. (U.S. Department of Homeland Security)

# DHS.gov – Primary Navigation Map (Mermaid)

> Snapshot of the current DHS.gov primary menu and key sub-sections. This is a living diagram—edit the Mermaid block to update. :contentReference[oaicite:1]{index=1}

<div style="max-width:1100px;margin:auto">

  <style>
    :root { --card:#111318; --ink:#e7e7ea; --muted:#9aa3af }
    .dhs-wrap { color:var(--ink); font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif }
    .dhs-card { background:var(--card); border-radius:14px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03) }
    .dhs-sub { color:var(--muted); font-size:14px; margin:.5rem 0 0 }
    /* improve contrast inside node labels when using dark theme */
    .label foreignObject span { color:#111 }
  </style>

  <div class="dhs-wrap">
    <h2 style="margin:.2rem 0 .2rem">Primary Menu</h2>
    <p class="dhs-sub">From the DHS.gov header: Topics, News, In Focus, How Do I?, Get Involved, About DHS. Sub-items under “Topics” reflect the mega-menu. :contentReference[oaicite:2]{index=2}</p>

    <div class="dhs-card">
      <pre class="mermaid">
flowchart TB
  NAV["DHS.gov — Primary Nav"]

  %% TOP LEVEL
  NAV --> T[Topics]
  NAV --> N[News]
  NAV --> F[In Focus]
  NAV --> H[How Do I?]
  NAV --> G[Get Involved]
  NAV --> A[About DHS]

  %% TOPICS → SUBSECTIONS (from the homepage mega-menu)
  subgraph S1[Topics]
    direction TB
    T --> T1[Border Security]
    T --> T2[Citizenship & Immigration]
    T --> T3[Cybersecurity]
    T --> T4[Disasters]
    T --> T5[Election Security]
    T --> T6[Homeland Security Enterprise]
    T --> T7[Human Trafficking]
    T --> T8[Immigration & Customs Enforcement]
    T --> T9[Preventing Terrorism & Targeted Violence]
    T --> T10[Resilience]
    T --> T11[Science & Technology]
    T --> T12[Trade & Economic Security]
    T --> T13[Transportation Security]
  end

  %% NEWS (section only — items rotate daily)
  N:::muted

  %% IN FOCUS (subset examples shown on homepage)
  subgraph S2[In Focus]
    direction TB
    F --> F1[CBP Home]
    F --> F2[Cybersecurity]
    F --> F3[Fentanyl]
    F --> F4[Independent Review of 2024 Attempted Assassination]
    F --> F5[Making America Safe Again]
  end

  %% HOW DO I? (category landing)
  H:::muted

  %% GET INVOLVED (subset from homepage)
  subgraph S3[Get Involved]
    direction TB
    G --> G1[Blue Campaign]
    G --> G2[If You See Something, Say Something®]
    G --> G3[Know2Protect]
    G --> G4[Nationwide SAR Initiative]
    G --> G5[Ready.gov]
    G --> G6[Secure Our World]
    G --> G7[U.S. Coast Guard Auxiliary]
  end

  %% ABOUT DHS (category landing)
  A:::muted

  classDef muted fill:#1d2030,stroke:#2a2f45,color:#cbd5e1;
      </pre>

      <p class="dhs-sub">Source: DHS.gov header & mega-menu. :contentReference[oaicite:3]{index=3}</p>
    </div>
  </div>
</div>

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
  mermaid.initialize({
    startOnLoad: true,
    theme: 'dark',
    securityLevel: 'strict'
  });
</script>

What this does (and why)

  • Accurate structure: Reflects the current DHS header and the “Topics” mega-menu items shown on the homepage. (U.S. Department of Homeland Security)
  • Modern Mermaid: Uses the recommended ESM import with mermaid.initialize({ startOnLoad: true }) so any <pre class="mermaid"> block renders automatically.
  • WordPress-friendly: Paste into a Custom HTML block (best), or a Markdown block that allows inline HTML and <script>.

If you want, I can add deep links on each node (e.g., Cybersecurity → /topics/cybersecurity) using Mermaid’s markdown-in-label pattern and a looser securityLevel, or generate separate section stubs for each item.