Marrow Diagram Embed

The Marrow Diagram Embed (<MarrowEmbed /> or <TopologyViewport />) embeds interactive, offline network diagrams generated by the Marrow compiler into any web application, dashboard, or documentation portal.

Rather than faking nodes or reinventing diagram layout in React, Marrow diagrams bring their own deterministic ELK layout engine, vector SVGs, and telemetry inspectors inside a lightweight, isolated <iframe> container with zero CSS collisions.

PreviewCopy Anchor Link

InstallationCopy Anchor Link

npx shadcn@latest add https://marrowdiagram.vercel.app/r/topology-canvas.json

Or via GitHub:

npx shadcn@latest add raiz-toff/Marrow/topology-canvas

FeaturesCopy Anchor Link

• Native Marrow HTML Support: Embeds diagrams compiled directly by marrow compile or marrow build without runtime overhead or re-rendering logic.
• Two-Way Theme Synchronization: Automatically detects host dark/light mode toggles and transmits postMessage({ type: 'marrow:theme', theme }) to the diagram in real time.
• URL or In-Memory HTML: Supports loading static diagram files via src or in-memory compiled strings via html (srcDoc).
• Kiosk and Minimal Chrome: Strips outer breadcrumbs, search docks, and sidebars using Marrow's #embed=true engine flag so the diagram integrates cleanly into host pages.
• Fullscreen Mode: One-click fullscreen expansion for NOC video walls and operations dashboards.
• External Standalone Link: One-click button to launch the diagram standalone in a new tab.

Usage ExamplesCopy Anchor Link

1. Embed Pre-Compiled Diagram (src)Copy Anchor Link

When serving compiled diagrams from your /public folder or CDN:

import { MarrowEmbed } from "@marrow/ui";

export function DatacenterTopology() {
  return (
    <MarrowEmbed
      src="/diagrams/datacenter.html"
      title="Datacenter Fabric"
      chrome="minimal"
      height="620px"
    />
  );
}

2. Embed In-Memory Compiled HTML (html)Copy Anchor Link

When fetching compiled HTML dynamically from an API, build script, or server action:

import { MarrowEmbed } from "@marrow/ui";

export function DynamicTopology({ compiledHtml }: { compiledHtml: string }) {
  return (
    <MarrowEmbed
      html={compiledHtml}
      title="Generated Network Topology"
      height="600px"
      theme="auto"
    />
  );
}

3. Diagram Presets SwitcherCopy Anchor Link

Switch between multiple architecture views inside the same container:

import { MarrowEmbed } from "@marrow/ui";

export function MultiSiteDiagram() {
  return (
    <MarrowEmbed
      presets={[
        { label: "Campus Core", src: "/demo/tiered-embed.html" },
        { label: "Branch Offices", src: "/demo/zoned-embed.html" },
        { label: "Hub & Spoke WAN", src: "/demo/hub-spoke-embed.html" },
      ]}
      height="600px"
    />
  );
}

PropsCopy Anchor Link