{children}
+ ), + h2: ({ children }: { children: React.ReactNode }) => ( +{children}
+ ), + h3: ({ children }: { children: React.ReactNode }) => ( +{children}
+ ), + h4: ({ children }: { children: React.ReactNode }) => ( +{children}
+ ), + p: ({ children }: { children: React.ReactNode }) => ( +{children}
+ ), + ul: ({ children }: { children: React.ReactNode }) => ( +- {children}
- {children}
{children}
+ ),
+ a: ({ children, href }: { children: React.ReactNode; href?: string }) => (
+
+ {children}
+
+ ),
+};
+
+interface DiagramHoverModalProps {
+ ContentComponent: React.ComponentType;
+ children: React.ReactNode;
+}
+
+export function DiagramHoverModal({ ContentComponent, children }: DiagramHoverModalProps) {
+ const [isOpen, setIsOpen] = useState(false);
+
+ const { refs, floatingStyles, context } = useFloating({
+ open: isOpen,
+ onOpenChange: setIsOpen,
+ middleware: [offset(10), flip({ fallbackAxisSideDirection: 'start' }), shift({ padding: 5 })],
+ whileElementsMounted: autoUpdate,
+ });
+
+ const hover = useHover(context, {
+ move: false,
+ delay: { open: 150, close: 150 },
+ });
+ const focus = useFocus(context);
+ const dismiss = useDismiss(context);
+ const role = useRole(context, { role: 'dialog' });
+
+ const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);
+
+ const ref = useMergeRefs([refs.setReference]);
+
+ return (
+ <>
+
+ {children}
+
+
+ {isOpen && (
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+- [ ] **Step 2: Update NodeData type to include resolved component**
+
+In `src/components/DrawioReactFlow/types.ts`, add `hoverContentComponent` to `NodeData`:
+
+```typescript
+export interface NodeData {
+ label: string;
+ shape: string;
+ colors: {
+ backgroundColor: string;
+ borderColor: string;
+ };
+ link?: string;
+ centerable?: boolean;
+ navigateTo?: string;
+ topAligned?: boolean;
+ onNavigate?: (link: string) => void;
+ hoverContentKey?: string;
+ hoverContentComponent?: React.ComponentType;
+}
+```
+
+- [ ] **Step 3: Run typecheck**
+
+Run: `yarn typecheck`
+Expected: PASS
+
+- [ ] **Step 4: Commit**
+
+```shell
+git add src/components/DrawioReactFlow/ClickableNode.tsx src/components/DrawioReactFlow/types.ts
+git commit -m "feat: add hover modal support to ClickableNode"
+```
+
+---
+
+### Task 6: Create HoverEdge component
+
+**Files:**
+
+- Create: `src/components/DrawioReactFlow/HoverEdge.tsx`
+
+- [ ] **Step 1: Create the HoverEdge component**
+
+Create `src/components/DrawioReactFlow/HoverEdge.tsx`:
+
+```tsx
+import React from 'react';
+import { EdgeProps, getSmoothStepPath, EdgeLabelRenderer, MarkerType } from 'reactflow';
+import { DiagramHoverModal } from './DiagramHoverModal';
+import { EdgeData } from './types';
+
+export function HoverEdge({
+ id,
+ sourceX,
+ sourceY,
+ targetX,
+ targetY,
+ sourcePosition,
+ targetPosition,
+ label,
+ style = {},
+ markerEnd,
+ data,
+}: EdgeProps
+ {labelContent}
+
+
+ {ContentComponent ? (
+
+ {label}
+
+ ) : (
+ {label}
+ )}
+
+
+ {title &&
+ {title}
} + +
+ {loading &&
+
+ )}
+
+ Loading diagram…
}
+ {error && (
+
+ Error: {error}
+
+ )}
+ {!loading && !error && (
+
+ {/* Connection handles — 4 sides, 3 positions per side (20/50/80%), plus legacy
+ midpoint-only ids (e.g. "top-source") for the draw.io converter that doesn't
+ emit along-side offsets. */}
+ {/* Top — legacy midpoint */}
+
+ );
+}
diff --git a/src/components/DrawioReactFlow/DiagramHoverModal.tsx b/src/components/DrawioReactFlow/DiagramHoverModal.tsx
new file mode 100644
index 0000000000..3a2ce30d43
--- /dev/null
+++ b/src/components/DrawioReactFlow/DiagramHoverModal.tsx
@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import {
+ useFloating,
+ useHover,
+ useFocus,
+ useDismiss,
+ useRole,
+ useInteractions,
+ FloatingPortal,
+ offset,
+ flip,
+ shift,
+ autoUpdate,
+ useMergeRefs,
+} from '@floating-ui/react';
+import { MDXProvider } from '@mdx-js/react';
+const mdxComponents = {
+ h1: ({ children }) =>
+ {labelContent}
+
+ {children}
, + h2: ({ children }) =>{children}
, + h3: ({ children }) =>{children}
, + h4: ({ children }) =>{children}
, + p: ({ children }) =>{children}
, + ul: ({ children }) =>- {children}
- {children}
{children},
+ a: ({ children, href }) => (
+
+ {children}
+
+ ),
+};
+
+interface DiagramHoverModalProps {
+ ContentComponent: React.ComponentType;
+ children: React.ReactNode;
+}
+
+export function DiagramHoverModal({ ContentComponent, children }: DiagramHoverModalProps) {
+ const [isOpen, setIsOpen] = useState(false);
+
+ const { refs, floatingStyles, context } = useFloating({
+ open: isOpen,
+ onOpenChange: setIsOpen,
+ middleware: [offset(10), flip({ fallbackAxisSideDirection: 'start' }), shift({ padding: 5 })],
+ whileElementsMounted: autoUpdate,
+ });
+
+ const hover = useHover(context, {
+ move: false,
+ delay: { open: 150, close: 150 },
+ });
+ const focus = useFocus(context);
+ const dismiss = useDismiss(context);
+ const role = useRole(context, { role: 'dialog' });
+
+ const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);
+
+ const ref = useMergeRefs([refs.setReference]);
+
+ return (
+ <>
+
+ {children}
+
+
+ {isOpen && (
+
+
+
+
+
+
+ {/* eslint-disable-next-line @typescript-eslint/no-explicit-any -- Docusaurus bundles conflicting @types/react versions */}
+
+
+
+
+ {title &&
+ {title}
} + +
+ {loading &&
+
+ )}
+
+ Loading diagram…
}
+ {error && (
+
+ Error: {error}
+
+ )}
+ {!loading && !error && (
+
+ {ContentComponent ? (
+
+ {label}
+
+ ) : (
+ {label}
+ )}
+
+
+ 
+
+ );
+}
diff --git a/src/components/DrawioReactFlow/NavigableDiagram.tsx b/src/components/DrawioReactFlow/NavigableDiagram.tsx
new file mode 100644
index 0000000000..339d32a22c
--- /dev/null
+++ b/src/components/DrawioReactFlow/NavigableDiagram.tsx
@@ -0,0 +1,360 @@
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import ReactFlow, { ReactFlowProvider, useReactFlow, Node as RFNode, Viewport } from 'reactflow';
+import { useColorMode } from '@docusaurus/theme-common';
+import { motion, AnimatePresence } from 'motion/react';
+import 'reactflow/dist/style.css';
+import { ClickableNode } from './ClickableNode';
+import { SubgraphNode } from './SubgraphNode';
+import { ImageNode } from './ImageNode';
+import { HoverEdge } from './HoverEdge';
+import { DiagramModal } from './DiagramModal';
+import { convertDiagramToReactFlow } from './utils/convertDiagram';
+import { fetchAndParseManifest } from './utils/parseManifest';
+import { ReactFlowData, DiagramProps, NodeData, ManifestData, TransitionConfig } from './types';
+
+function useSafeColorMode() {
+ try {
+ const { colorMode } = useColorMode();
+ return colorMode;
+ } catch (error) {
+ return 'light';
+ }
+}
+
+function DiagramFlow({
+ flowData,
+ nodeTypes,
+ edgeTypes,
+ defaultEdgeOptions,
+ onDiagramNavigate,
+ onModalRequest,
+ transitions,
+}: {
+ flowData: ReactFlowData;
+ nodeTypes: Record
+
+
+ )}
+
+
+ );
+ }
+
+ if (error) {
+ return (
+ Loading diagram...
+
+
+ );
+ }
+
+ return (
+ Error: {error}
+
+ {history.length > 0 && (
+
+
+
+
+
+
+ {modalTransition && (
+
+ );
+}
diff --git a/src/components/DrawioReactFlow/README.md b/src/components/DrawioReactFlow/README.md
new file mode 100644
index 0000000000..b54a221ee3
--- /dev/null
+++ b/src/components/DrawioReactFlow/README.md
@@ -0,0 +1,283 @@
+# DrawioReactFlow — Interactive Diagram Navigation
+
+Converts Draw.io (`.drawio`) **and Excalidraw (`.excalidraw`)** diagrams into interactive React Flow visualizations with animated, manifest-driven navigation between diagrams.
+
+## Overview
+
+Contributors author diagrams in either [Excalidraw](https://excalidraw.com) (recommended, cleaner data model) or [Draw.io](https://app.diagrams.net), then render them as interactive, click-navigable diagrams inside Arbitrum Docs. A manifest XML file defines which diagrams exist and how users transition between them (zoom, pause, fade).
+
+Format is chosen by file extension: `.excalidraw` → JSON converter, anything else → Draw.io XML converter. Both formats can coexist inside a single manifest while migrating.
+
+## Features
+
+- **Two authoring formats**: Excalidraw JSON or Draw.io XML — pick whichever feels better to draw in
+- **Manifest-driven navigation**: XML manifest defines diagram stories with animated transitions
+- **Zoom-to-node transitions**: Click a highlighted node to zoom in, pause, then cross-fade to the next diagram
+- **Modal transitions**: Opt a transition into `mode="modal"` to open the target diagram in a centered overlay instead of replacing the main view
+- **Subgroup support** (Draw.io): Groups render as labeled containers with styled borders
+- **Embedded images** (Draw.io): Inline SVG/base64 images render as image nodes
+- **Theme integration**: Adapts to Docusaurus light/dark mode via CSS variables
+- **Keyboard accessible**: Tab to focus nodes, Enter/Space to activate
+- **Responsive**: Works on mobile, tablet, and desktop
+- **SSG compatible**: Uses Docusaurus `BrowserOnly` for static site generation
+
+## Quick start
+
+### 1. Author a diagram
+
+**Option A — Excalidraw (recommended):** open [excalidraw.com](https://excalidraw.com), draw rectangles/ellipses/diamonds, connect them with arrows (the binding handles give exact anchor points), then File → Save to `static/diagrams/
+
+
+ )}
+
+
+ );
+}
diff --git a/src/components/DrawioReactFlow/index.tsx b/src/components/DrawioReactFlow/index.tsx
new file mode 100644
index 0000000000..052b6eced6
--- /dev/null
+++ b/src/components/DrawioReactFlow/index.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import { DrawioReactFlowProps } from './types';
+
+export default function DrawioReactFlow(props: DrawioReactFlowProps) {
+ return (
+
+
+ {data.label}
+ \s*\s*<\/div>\s*$/.test(html);
+}
+
+function isImageCell(styleProps: Record): boolean {
+ return styleProps['shape'] === 'image';
+}
+
+function extractImageDataUri(rawStyle: string): string {
+ const marker = 'image=data:';
+ const startIdx = rawStyle.indexOf(marker);
+ if (startIdx === -1) return '';
+
+ const dataStart = startIdx + 'image='.length;
+ const rest = rawStyle.slice(dataStart);
+
+ // Match until we hit ;key=value (e.g. ";container=0") or end of string
+ const endMatch = rest.search(/;[a-zA-Z]+=(?!\/)/);
+ let uri = endMatch === -1 ? rest : rest.slice(0, endMatch);
+ uri = uri.replace(/;$/, '');
+
+ // Draw.io often stores base64 SVGs as "data:image/svg+xml," without
+ // the ";base64," segment. Detect and fix this so browsers decode correctly.
+ const commaIdx = uri.indexOf(',');
+ if (commaIdx !== -1 && !uri.includes(';base64,')) {
+ const payload = uri.slice(commaIdx + 1);
+ const looksBase64 = /^[A-Za-z0-9+/=]+$/.test(payload.slice(0, 64));
+ if (looksBase64) {
+ uri = uri.slice(0, commaIdx) + ';base64,' + payload;
+ }
+ }
+
+ return uri;
+}
+
+function isTextOnlyCell(styleProps: Record): boolean {
+ return styleProps['text'] === 'true';
+}
+
+function isGroupCell(styleProps: Record): boolean {
+ return styleProps['group'] === 'true';
+}
+
+function parseCells(doc: Document): DrawioCell[] {
+ const cellElements = doc.querySelectorAll('mxCell');
+ const cells: DrawioCell[] = [];
+
+ for (const el of Array.from(cellElements)) {
+ const id = el.getAttribute('id') ?? '';
+ const geo = el.querySelector('mxGeometry');
+
+ // Check for hoverContent on the cell itself or parent UserObject
+ let hoverContent = el.getAttribute('hoverContent') ?? '';
+ if (!hoverContent) {
+ const parentEl = el.parentElement;
+ if (parentEl && parentEl.tagName === 'UserObject') {
+ hoverContent = parentEl.getAttribute('hoverContent') ?? '';
+ }
+ }
+
+ const colorToken = el.getAttribute('colorToken') ?? '';
+
+ // Parse routing waypoints: {
+ const map = new Map();
+ for (const cell of cells) {
+ map.set(cell.id, cell);
+ }
+ return map;
+}
+
+function findGroupIds(cells: DrawioCell[], cellMap: Map): Set {
+ const groupIds = new Set();
+
+ for (const cell of cells) {
+ if (!cell.vertex || ROOT_IDS.has(cell.id)) continue;
+ const styleProps = parseStyleString(cell.style);
+ if (isGroupCell(styleProps)) {
+ groupIds.add(cell.id);
+ }
+ }
+
+ // Detect implicit groups: vertex cells that have child vertices
+ for (const cell of cells) {
+ if (!cell.vertex || ROOT_IDS.has(cell.id) || ROOT_IDS.has(cell.parent)) {
+ continue;
+ }
+ const parentCell = cellMap.get(cell.parent);
+ if (
+ parentCell &&
+ parentCell.vertex &&
+ !ROOT_IDS.has(parentCell.id) &&
+ !groupIds.has(parentCell.id)
+ ) {
+ groupIds.add(parentCell.id);
+ }
+ }
+
+ return groupIds;
+}
+
+function getAbsolutePosition(
+ cell: DrawioCell,
+ cellMap: Map,
+): { x: number; y: number } {
+ let x = cell.x;
+ let y = cell.y;
+ let currentParentId = cell.parent;
+
+ while (currentParentId && !ROOT_IDS.has(currentParentId)) {
+ const parent = cellMap.get(currentParentId);
+ if (!parent) break;
+ x += parent.x;
+ y += parent.y;
+ currentParentId = parent.parent;
+ }
+
+ return { x, y };
+}
+
+function determineShape(styleProps: Record): string {
+ if (styleProps['shape'] === 'process') return 'process';
+ if (styleProps['ellipse'] === 'true') return 'circle';
+ if (styleProps['rounded'] === '1') return 'round';
+ return 'rect';
+}
+
+function buildNodes(
+ cells: DrawioCell[],
+ cellMap: Map,
+ groupIds: Set,
+ onNavigate?: (link: string) => void,
+ transitions?: TransitionConfig[],
+): { nodes: Node[]; minX: number; minY: number } {
+ const nodes: Node[] = [];
+ let minX = Infinity;
+ let minY = Infinity;
+
+ // First pass: compute min coordinates for normalization
+ for (const cell of cells) {
+ if (!cell.vertex || ROOT_IDS.has(cell.id)) continue;
+ const styleProps = parseStyleString(cell.style);
+ if (isImageCell(styleProps)) continue;
+
+ const abs = getAbsolutePosition(cell, cellMap);
+ minX = Math.min(minX, abs.x);
+ minY = Math.min(minY, abs.y);
+ }
+
+ if (!isFinite(minX)) minX = 0;
+ if (!isFinite(minY)) minY = 0;
+
+ // Track which groups are skipped (pure layout containers)
+ const skippedGroups = new Set();
+
+ // Second pass: create nodes
+ for (const cell of cells) {
+ if (!cell.vertex || ROOT_IDS.has(cell.id)) continue;
+
+ const styleProps = parseStyleString(cell.style);
+
+ // Skip edge label cells — they're handled in buildEdges
+ if (styleProps['edgeLabel'] === 'true') continue;
+
+ // Render image cells (e.g. envelope icons) as image nodes
+ if (isImageCell(styleProps)) {
+ const imageData = extractImageDataUri(cell.style);
+ if (!imageData || cell.width === 0) continue;
+
+ const hasNonRootParent =
+ !ROOT_IDS.has(cell.parent) && groupIds.has(cell.parent) && !skippedGroups.has(cell.parent);
+
+ let imgX: number;
+ let imgY: number;
+ if (hasNonRootParent) {
+ imgX = cell.x;
+ imgY = cell.y;
+ } else {
+ const abs = getAbsolutePosition(cell, cellMap);
+ imgX = abs.x - minX + PADDING;
+ imgY = abs.y - minY + PADDING;
+ }
+
+ const imgNode: Node = {
+ id: cell.id,
+ type: 'image',
+ position: { x: imgX, y: imgY },
+ data: { imageUrl: imageData },
+ style: { width: cell.width, height: cell.height },
+ sourcePosition: Position.Right,
+ targetPosition: Position.Left,
+ };
+
+ if (hasNonRootParent) {
+ imgNode.parentNode = cell.parent;
+ imgNode.extent = 'parent';
+ }
+
+ nodes.push(imgNode);
+ continue;
+ }
+
+ const label = stripHtml(cell.value);
+ const isGroup = groupIds.has(cell.id);
+ const isText = isTextOnlyCell(styleProps);
+
+ // Skip cells with no label, no group, and no meaningful geometry (visual elements
+ // like colored rectangles have no label but should still render)
+ if (!label && !isGroup && !(cell.width > 0 && cell.height > 0)) continue;
+
+ const fillColor = styleProps['fillColor'] ?? 'transparent';
+
+ const hasNonRootParentGroup =
+ !ROOT_IDS.has(cell.parent) && groupIds.has(cell.parent) && !skippedGroups.has(cell.parent);
+
+ // Position: relative to parent group, or absolute normalized
+ let posX: number;
+ let posY: number;
+
+ if (hasNonRootParentGroup) {
+ posX = cell.x;
+ posY = cell.y;
+ } else {
+ const abs = getAbsolutePosition(cell, cellMap);
+ posX = abs.x - minX + PADDING;
+ posY = abs.y - minY + PADDING;
+ }
+
+ if (isGroup) {
+ // Skip pure layout groups (no fill, no visible border) — they're invisible containers
+ if (isGroupCell(styleProps) && fillColor === 'transparent') {
+ skippedGroups.add(cell.id);
+ continue;
+ }
+
+ const abs = getAbsolutePosition(cell, cellMap);
+ posX = abs.x - minX + PADDING;
+ posY = abs.y - minY + PADDING;
+
+ nodes.push({
+ id: cell.id,
+ type: 'group',
+ position: { x: posX, y: posY },
+ data: { label: label || '' },
+ style: {
+ width: cell.width,
+ height: cell.height,
+ padding: 0,
+ },
+ });
+ continue;
+ }
+
+ if (isText && !cell.colorToken) {
+ nodes.push({
+ id: cell.id,
+ type: 'default',
+ position: { x: posX, y: posY },
+ data: { label },
+ style: {
+ width: cell.width,
+ height: cell.height,
+ backgroundColor: 'transparent',
+ border: 'none',
+ color: '#ffffff',
+ fontSize: '14px',
+ lineHeight: '1.2',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ overflow: 'hidden',
+ },
+ sourcePosition: Position.Right,
+ targetPosition: Position.Left,
+ });
+ continue;
+ }
+
+ const shape = determineShape(styleProps);
+
+ const isManifestTrigger = transitions?.some((t) => t.trigger === label) ?? false;
+ const isBlinking = isManifestTrigger || cell.hoverContent === 'blinking';
+
+ const nodeData: NodeData = {
+ label,
+ shape,
+ centerable: isBlinking || undefined,
+ navigateTo: transitions?.find((t) => t.trigger === label)?.targetFile || undefined,
+ topAligned: hasTopAlignedLabel(cell.value) || undefined,
+ colorToken: cell.colorToken || undefined,
+ hoverContentKey: cell.hoverContent || undefined,
+ onNavigate,
+ };
+
+ const node: Node = {
+ id: cell.id,
+ type: 'custom',
+ position: { x: posX, y: posY },
+ data: nodeData,
+ className: isBlinking ? 'node-blinking' : undefined,
+ style: {
+ width: cell.width,
+ height: cell.height,
+ },
+ sourcePosition: Position.Right,
+ targetPosition: Position.Left,
+ };
+
+ if (hasNonRootParentGroup) {
+ node.parentNode = cell.parent;
+ node.extent = 'parent';
+ }
+
+ nodes.push(node);
+ }
+
+ return { nodes, minX, minY };
+}
+
+function resolveHandlePosition(entryX: string | undefined, entryY: string | undefined): Position {
+ const x = entryX !== undefined ? parseFloat(entryX) : undefined;
+ const y = entryY !== undefined ? parseFloat(entryY) : undefined;
+
+ if (x !== undefined && y !== undefined) {
+ if (x <= 0.1) return Position.Left;
+ if (x >= 0.9) return Position.Right;
+ if (y <= 0.1) return Position.Top;
+ if (y >= 0.9) return Position.Bottom;
+ }
+ if (x !== undefined) {
+ if (x <= 0.1) return Position.Left;
+ if (x >= 0.9) return Position.Right;
+ }
+ if (y !== undefined) {
+ if (y <= 0.1) return Position.Top;
+ if (y >= 0.9) return Position.Bottom;
+ }
+ return Position.Bottom;
+}
+
+function sideFromWaypoint(
+ waypoint: { x: number; y: number },
+ cell: DrawioCell,
+ cellMap: Map,
+): Position {
+ const abs = getAbsolutePosition(cell, cellMap);
+ const right = abs.x + cell.width;
+ const bottom = abs.y + cell.height;
+
+ // Waypoint is outside the cell's bounding box → use the side it lies beyond.
+ if (waypoint.x < abs.x) return Position.Left;
+ if (waypoint.x > right) return Position.Right;
+ if (waypoint.y < abs.y) return Position.Top;
+ if (waypoint.y > bottom) return Position.Bottom;
+
+ // Waypoint is inside the cell — fall back to the dominant axis from cell center.
+ const centerX = abs.x + cell.width / 2;
+ const centerY = abs.y + cell.height / 2;
+ const dx = waypoint.x - centerX;
+ const dy = waypoint.y - centerY;
+ if (Math.abs(dx) > Math.abs(dy)) return dx > 0 ? Position.Right : Position.Left;
+ return dy > 0 ? Position.Bottom : Position.Top;
+}
+
+function inferConnectionSide(
+ sourceCell: DrawioCell,
+ targetCell: DrawioCell,
+ cellMap: Map,
+): { sourcePosition: Position; targetPosition: Position } {
+ const sAbs = getAbsolutePosition(sourceCell, cellMap);
+ const tAbs = getAbsolutePosition(targetCell, cellMap);
+
+ const sCenterX = sAbs.x + sourceCell.width / 2;
+ const sCenterY = sAbs.y + sourceCell.height / 2;
+ const tCenterX = tAbs.x + targetCell.width / 2;
+ const tCenterY = tAbs.y + targetCell.height / 2;
+
+ const dx = tCenterX - sCenterX;
+ const dy = tCenterY - sCenterY;
+
+ if (Math.abs(dx) > Math.abs(dy)) {
+ return dx > 0
+ ? { sourcePosition: Position.Right, targetPosition: Position.Left }
+ : { sourcePosition: Position.Left, targetPosition: Position.Right };
+ }
+ return dy > 0
+ ? { sourcePosition: Position.Bottom, targetPosition: Position.Top }
+ : { sourcePosition: Position.Top, targetPosition: Position.Bottom };
+}
+
+function findEdgeLabelData(
+ edgeId: string,
+ cells: DrawioCell[],
+): { text: string; hoverContentKey?: string } {
+ for (const cell of cells) {
+ if (cell.parent !== edgeId || !cell.vertex) continue;
+ const styleProps = parseStyleString(cell.style);
+ if (styleProps['edgeLabel'] !== 'true') continue;
+ const text = stripHtml(cell.value);
+ if (text) return { text, hoverContentKey: cell.hoverContent || undefined };
+ }
+ return { text: '' };
+}
+
+function buildEdges(cells: DrawioCell[], cellMap: Map): Edge[] {
+ const edges: Edge[] = [];
+
+ for (const cell of cells) {
+ if (!cell.edge) continue;
+ if (!cell.source || !cell.target) continue;
+
+ const styleProps = parseStyleString(cell.style);
+ const isDashed = styleProps['dashed'] === '1';
+ const strokeColor = styleProps['strokeColor'] ?? '#FFFFFF';
+ const resolvedStrokeColor = strokeColor === '#000000' ? '#cccccc' : strokeColor;
+ const strokeWidth = parseFloat(styleProps['strokeWidth'] ?? '1');
+
+ const sourceCell = cellMap.get(cell.source);
+ const targetCell = cellMap.get(cell.target);
+
+ // Determine connection sides from Draw.io entry/exit metadata
+ let sourcePosition: Position;
+ let targetPosition: Position;
+
+ const hasExitMeta = styleProps['exitX'] !== undefined || styleProps['exitY'] !== undefined;
+ const hasEntryMeta = styleProps['entryX'] !== undefined || styleProps['entryY'] !== undefined;
+ const waypoints = cell.waypoints;
+ const firstWaypoint = waypoints.length > 0 ? waypoints[0] : undefined;
+ const lastWaypoint = waypoints.length > 0 ? waypoints[waypoints.length - 1] : undefined;
+
+ if (hasExitMeta) {
+ sourcePosition = resolveHandlePosition(styleProps['exitX'], styleProps['exitY']);
+ } else if (firstWaypoint && sourceCell) {
+ sourcePosition = sideFromWaypoint(firstWaypoint, sourceCell, cellMap);
+ } else if (sourceCell && targetCell) {
+ sourcePosition = inferConnectionSide(sourceCell, targetCell, cellMap).sourcePosition;
+ } else {
+ sourcePosition = Position.Bottom;
+ }
+
+ if (hasEntryMeta) {
+ targetPosition = resolveHandlePosition(styleProps['entryX'], styleProps['entryY']);
+ } else if (lastWaypoint && targetCell) {
+ targetPosition = sideFromWaypoint(lastWaypoint, targetCell, cellMap);
+ } else if (sourceCell && targetCell) {
+ targetPosition = inferConnectionSide(sourceCell, targetCell, cellMap).targetPosition;
+ } else {
+ targetPosition = Position.Top;
+ }
+
+ const startArrow = styleProps['startArrow'];
+ const hasStartArrow = !!startArrow && startArrow !== 'none';
+
+ const edge: Edge = {
+ id: cell.id,
+ source: cell.source,
+ target: cell.target,
+ sourceHandle: `${sourcePosition}-source`,
+ targetHandle: `${targetPosition}-target`,
+ type: 'smoothstep',
+ animated: true,
+ style: {
+ stroke: resolvedStrokeColor,
+ strokeWidth,
+ ...(isDashed ? { strokeDasharray: '5 5' } : {}),
+ },
+ markerEnd: {
+ type: MarkerType.ArrowClosed,
+ color: resolvedStrokeColor,
+ },
+ ...(hasStartArrow
+ ? {
+ markerStart: {
+ type: MarkerType.ArrowClosed,
+ color: resolvedStrokeColor,
+ },
+ }
+ : {}),
+ };
+
+ const labelData = findEdgeLabelData(cell.id, cells);
+ const edgeLabel = stripHtml(cell.value) || labelData.text;
+ const edgeHoverKey = cell.hoverContent || labelData.hoverContentKey;
+
+ if (edgeLabel) {
+ edge.label = edgeLabel;
+ }
+
+ if (edgeHoverKey) {
+ edge.type = 'hoverEdge';
+ edge.data = { hoverContentKey: edgeHoverKey };
+ }
+
+ edges.push(edge);
+ }
+
+ return edges;
+}
+
+export async function convertDrawioToReactFlow(
+ xmlString: string,
+ onNavigate?: (link: string) => void,
+ transitions?: TransitionConfig[],
+): Promise {
+ const parser = new DOMParser();
+ const doc = parser.parseFromString(xmlString, 'text/xml');
+
+ const parserError = doc.querySelector('parsererror');
+ if (parserError) {
+ throw new Error(`Failed to parse Draw.io XML: ${parserError.textContent}`);
+ }
+
+ const cells = parseCells(doc);
+ const cellMap = buildCellMap(cells);
+ const groupIds = findGroupIds(cells, cellMap);
+
+ const { nodes } = buildNodes(cells, cellMap, groupIds, onNavigate, transitions);
+ const edges = buildEdges(cells, cellMap);
+
+ // Filter edges that reference nodes not in our node set
+ const nodeIds = new Set(nodes.map((n) => n.id));
+ const validEdges = edges.filter((e) => nodeIds.has(e.source) && nodeIds.has(e.target));
+
+ return { nodes, edges: validEdges };
+}
diff --git a/src/components/DrawioReactFlow/utils/excalidrawToReactFlow.ts b/src/components/DrawioReactFlow/utils/excalidrawToReactFlow.ts
new file mode 100644
index 0000000000..2a5c589242
--- /dev/null
+++ b/src/components/DrawioReactFlow/utils/excalidrawToReactFlow.ts
@@ -0,0 +1,405 @@
+import { Node, Edge, MarkerType, Position } from 'reactflow';
+import {
+ ReactFlowData,
+ NodeData,
+ NodeTextAlign,
+ NodeVerticalAlign,
+ TransitionConfig,
+} from '../types';
+
+const PADDING = 30;
+
+interface ExcalidrawBinding {
+ elementId: string;
+ mode?: 'orbit' | 'inside';
+ fixedPoint?: [number, number];
+}
+
+interface ExcalidrawElement {
+ id: string;
+ type: string;
+ x: number;
+ y: number;
+ width: number;
+ height: number;
+ isDeleted?: boolean;
+ link?: string | null;
+ customData?: Record;
+ boundElements?: Array<{ id: string; type: string }> | null;
+ // text-specific
+ text?: string;
+ containerId?: string | null;
+ fontSize?: number;
+ textAlign?: string;
+ verticalAlign?: string;
+ // image-specific
+ fileId?: string;
+ // arrow-specific
+ points?: [number, number][];
+ startBinding?: ExcalidrawBinding | null;
+ endBinding?: ExcalidrawBinding | null;
+ startArrowhead?: string | null;
+ endArrowhead?: string | null;
+ groupIds?: string[];
+}
+
+interface ExcalidrawFileEntry {
+ mimeType?: string;
+ dataURL?: string;
+}
+
+interface ExcalidrawFile {
+ type?: string;
+ version?: number;
+ elements?: ExcalidrawElement[];
+ files?: Record;
+}
+
+function remapFixedPoint(
+ fp: [number, number],
+ fromEl: ExcalidrawElement,
+ toEl: ExcalidrawElement,
+): [number, number] {
+ if (toEl.width === 0 || toEl.height === 0) return fp;
+ const absX = fromEl.x + fp[0] * fromEl.width;
+ const absY = fromEl.y + fp[1] * fromEl.height;
+ return [(absX - toEl.x) / toEl.width, (absY - toEl.y) / toEl.height];
+}
+
+type AlongSidePercent = 20 | 50 | 80;
+
+function pickAlongSidePercent(coord: number): AlongSidePercent {
+ if (coord < 0.35) return 20;
+ if (coord > 0.65) return 80;
+ return 50;
+}
+
+function fixedPointToSideAndOffset(
+ fp: [number, number] | undefined,
+ self: ExcalidrawElement,
+ other: ExcalidrawElement | undefined,
+): { side: Position; alongPercent: AlongSidePercent } {
+ const side = fixedPointToSide(fp, self, other);
+ if (!fp) return { side, alongPercent: 50 };
+ const along = side === Position.Top || side === Position.Bottom ? fp[0] : fp[1];
+ return { side, alongPercent: pickAlongSidePercent(along) };
+}
+
+function fixedPointToSide(
+ fixedPoint: [number, number] | undefined,
+ self: ExcalidrawElement,
+ other: ExcalidrawElement | undefined,
+): Position {
+ if (!fixedPoint) return Position.Top;
+ const [x, y] = fixedPoint;
+ const distLeft = x;
+ const distRight = 1 - x;
+ const distTop = y;
+ const distBottom = 1 - y;
+ const min = Math.min(distLeft, distRight, distTop, distBottom);
+
+ // Epsilon in normalized units — anchor points within this distance count as "tied"
+ const TIE_EPS = 0.05;
+ const tiedSides: Position[] = [];
+ if (distLeft <= min + TIE_EPS) tiedSides.push(Position.Left);
+ if (distRight <= min + TIE_EPS) tiedSides.push(Position.Right);
+ if (distTop <= min + TIE_EPS) tiedSides.push(Position.Top);
+ if (distBottom <= min + TIE_EPS) tiedSides.push(Position.Bottom);
+
+ if (tiedSides.length === 1) return tiedSides[0];
+
+ // Tie-break: pick the side of `self` that faces `other`. For a near-corner anchor,
+ // this aligns the handle with the direction the arrow actually travels.
+ if (other) {
+ const sc = { x: self.x + self.width / 2, y: self.y + self.height / 2 };
+ const oc = { x: other.x + other.width / 2, y: other.y + other.height / 2 };
+ const dx = oc.x - sc.x;
+ const dy = oc.y - sc.y;
+ if (Math.abs(dx) > Math.abs(dy)) {
+ return dx > 0 ? Position.Right : Position.Left;
+ }
+ return dy > 0 ? Position.Bottom : Position.Top;
+ }
+
+ // Fallback — prefer top/bottom over left/right, since most diagram flows are vertical
+ if (min === distTop) return Position.Top;
+ if (min === distBottom) return Position.Bottom;
+ if (min === distLeft) return Position.Left;
+ return Position.Right;
+}
+
+function determineShape(type: string): string {
+ if (type === 'diamond') return 'diamond';
+ if (type === 'ellipse') return 'circle';
+ return 'rect';
+}
+
+function isArrowhead(value: string | null | undefined): boolean {
+ if (!value) return false;
+ return value === 'arrow' || value === 'triangle' || value === 'bar' || value === 'dot';
+}
+
+function getCustomString(
+ data: Record | undefined,
+ key: string,
+): string | undefined {
+ if (!data) return undefined;
+ const value = data[key];
+ return typeof value === 'string' && value.length > 0 ? value : undefined;
+}
+
+function normalizeTextAlign(value: string | undefined): NodeTextAlign | undefined {
+ if (value === 'left' || value === 'center' || value === 'right') return value;
+ return undefined;
+}
+
+function normalizeVerticalAlign(value: string | undefined): NodeVerticalAlign | undefined {
+ if (value === 'top' || value === 'middle' || value === 'bottom') return value;
+ return undefined;
+}
+
+export async function convertExcalidrawToReactFlow(
+ jsonString: string,
+ onNavigate?: (link: string) => void,
+ transitions?: TransitionConfig[],
+): Promise {
+ let parsed: ExcalidrawFile;
+ try {
+ parsed = JSON.parse(jsonString) as ExcalidrawFile;
+ } catch (err) {
+ throw new Error(
+ `Failed to parse Excalidraw JSON: ${err instanceof Error ? err.message : String(err)}`,
+ );
+ }
+
+ const elements = (parsed.elements ?? []).filter((el) => !el.isDeleted);
+
+ // Top-level files dict maps fileId -> { dataURL } for image elements
+ const filesMap = new Map();
+ if (parsed.files) {
+ for (const [fileId, entry] of Object.entries(parsed.files)) {
+ if (entry?.dataURL) filesMap.set(fileId, entry.dataURL);
+ }
+ }
+
+ // Lookup by id (used for arrow side resolution below)
+ const elementById = new Map();
+ for (const el of elements) {
+ elementById.set(el.id, el);
+ }
+
+ // Map container element id -> bound text element (used for labels on shapes and arrows)
+ const containerToText = new Map();
+ for (const el of elements) {
+ if (el.type === 'text' && el.containerId) {
+ containerToText.set(el.containerId, el);
+ }
+ }
+
+ // Spatial auto-binding: floating text whose center lies inside a shape that has no bound label
+ // is promoted to that shape's label. Matches the common authoring pattern of dropping text
+ // over a box without explicitly binding it. Ties broken by choosing the smallest enclosing shape.
+ const autoBoundTextIds = new Set();
+ const isShapeType = (t: string) => t === 'rectangle' || t === 'ellipse' || t === 'diamond';
+
+ for (const text of elements) {
+ if (text.type !== 'text' || text.containerId) continue;
+ const tcx = text.x + text.width / 2;
+ const tcy = text.y + text.height / 2;
+
+ let bestShape: ExcalidrawElement | undefined;
+ let bestArea = Infinity;
+ for (const shape of elements) {
+ if (!isShapeType(shape.type)) continue;
+ if (containerToText.has(shape.id)) continue;
+ const inside =
+ tcx >= shape.x &&
+ tcx <= shape.x + shape.width &&
+ tcy >= shape.y &&
+ tcy <= shape.y + shape.height;
+ if (!inside) continue;
+ const area = shape.width * shape.height;
+ if (area < bestArea) {
+ bestArea = area;
+ bestShape = shape;
+ }
+ }
+
+ if (bestShape) {
+ containerToText.set(bestShape.id, text);
+ autoBoundTextIds.add(text.id);
+ }
+ }
+
+ // Inverse map: text element id -> container shape id. Used to redirect arrows that
+ // are bound to a text element (common when the author clicks on the visible text
+ // overlay) to the underlying shape.
+ const textToContainer = new Map();
+ for (const [shapeId, textEl] of containerToText.entries()) {
+ textToContainer.set(textEl.id, shapeId);
+ }
+
+ // Compute minX/minY across non-arrow elements for coordinate normalization
+ let minX = Infinity;
+ let minY = Infinity;
+ for (const el of elements) {
+ if (el.type === 'arrow' || el.type === 'line') continue;
+ if (el.type === 'text' && el.containerId) continue; // bound text follows its container
+ if (el.type === 'text' && autoBoundTextIds.has(el.id)) continue; // auto-bound follows its shape
+ minX = Math.min(minX, el.x);
+ minY = Math.min(minY, el.y);
+ }
+ if (!isFinite(minX)) minX = 0;
+ if (!isFinite(minY)) minY = 0;
+
+ const nodes: Node[] = [];
+ const edges: Edge[] = [];
+
+ for (const el of elements) {
+ // Text bound (explicitly OR auto-bound) to a container is rendered as its label, not a node
+ if (el.type === 'text' && el.containerId) continue;
+ if (el.type === 'text' && autoBoundTextIds.has(el.id)) continue;
+
+ // Shape nodes
+ if (el.type === 'rectangle' || el.type === 'ellipse' || el.type === 'diamond') {
+ const boundText = containerToText.get(el.id);
+ const label = boundText?.text ?? '';
+ const hoverKey = getCustomString(el.customData, 'hoverContent');
+ const colorToken = getCustomString(el.customData, 'colorToken');
+ const isManifestTrigger = !!transitions?.some((t) => t.trigger === label);
+ const isBlinking = isManifestTrigger || el.customData?.blinking === true;
+ const textAlign = normalizeTextAlign(boundText?.textAlign);
+ const verticalAlign = normalizeVerticalAlign(boundText?.verticalAlign);
+
+ const nodeData: NodeData = {
+ label,
+ shape: determineShape(el.type),
+ centerable: isBlinking || undefined,
+ navigateTo: transitions?.find((t) => t.trigger === label)?.targetFile || undefined,
+ colorToken,
+ hoverContentKey: hoverKey,
+ textAlign,
+ verticalAlign,
+ onNavigate,
+ };
+
+ nodes.push({
+ id: el.id,
+ type: 'custom',
+ position: { x: el.x - minX + PADDING, y: el.y - minY + PADDING },
+ data: nodeData,
+ style: { width: el.width, height: el.height },
+ className: isBlinking ? 'node-blinking' : undefined,
+ sourcePosition: Position.Right,
+ targetPosition: Position.Left,
+ });
+ continue;
+ }
+
+ // Standalone floating text (not bound to any container) — rendered as a transparent text node
+ if (el.type === 'text') {
+ nodes.push({
+ id: el.id,
+ type: 'default',
+ position: { x: el.x - minX + PADDING, y: el.y - minY + PADDING },
+ data: { label: el.text ?? '' },
+ style: {
+ width: el.width,
+ height: el.height,
+ backgroundColor: 'transparent',
+ border: 'none',
+ color: '#ffffff',
+ fontSize: `${el.fontSize ?? 14}px`,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ overflow: 'hidden',
+ padding: 0,
+ },
+ });
+ continue;
+ }
+
+ // Image nodes — resolve the data URL via fileId -> top-level files dict
+ if (el.type === 'image') {
+ if (!el.fileId) continue;
+ const dataUrl = filesMap.get(el.fileId);
+ if (!dataUrl) continue;
+ nodes.push({
+ id: el.id,
+ type: 'image',
+ position: { x: el.x - minX + PADDING, y: el.y - minY + PADDING },
+ data: { imageUrl: dataUrl },
+ style: { width: el.width, height: el.height },
+ sourcePosition: Position.Right,
+ targetPosition: Position.Left,
+ });
+ continue;
+ }
+
+ // Arrows — require both bindings to render as a ReactFlow edge
+ if (el.type === 'arrow') {
+ if (!el.startBinding?.elementId || !el.endBinding?.elementId) continue;
+
+ const srcRawId = el.startBinding.elementId;
+ const tgtRawId = el.endBinding.elementId;
+ const srcShapeId = textToContainer.get(srcRawId) ?? srcRawId;
+ const tgtShapeId = textToContainer.get(tgtRawId) ?? tgtRawId;
+
+ const srcRawEl = elementById.get(srcRawId);
+ const tgtRawEl = elementById.get(tgtRawId);
+ const srcEl = elementById.get(srcShapeId);
+ const tgtEl = elementById.get(tgtShapeId);
+ if (!srcEl || !tgtEl) continue;
+
+ // Remap fixedPoints from the bound element's coordinate space to the shape's,
+ // so side resolution is computed relative to the actual rendered node geometry.
+ const sfp =
+ srcRawEl && srcRawEl !== srcEl && el.startBinding.fixedPoint
+ ? remapFixedPoint(el.startBinding.fixedPoint, srcRawEl, srcEl)
+ : el.startBinding.fixedPoint;
+ const efp =
+ tgtRawEl && tgtRawEl !== tgtEl && el.endBinding.fixedPoint
+ ? remapFixedPoint(el.endBinding.fixedPoint, tgtRawEl, tgtEl)
+ : el.endBinding.fixedPoint;
+
+ const sourceAnchor = fixedPointToSideAndOffset(sfp, srcEl, tgtEl);
+ const targetAnchor = fixedPointToSideAndOffset(efp, tgtEl, srcEl);
+ const sourcePosition = sourceAnchor.side;
+ const targetPosition = targetAnchor.side;
+
+ const labelEl = containerToText.get(el.id);
+ const label = labelEl?.text ?? '';
+ const hoverKey = getCustomString(el.customData, 'hoverContent');
+
+ const edge: Edge = {
+ id: el.id,
+ source: srcShapeId,
+ target: tgtShapeId,
+ sourceHandle: `${sourcePosition}-${sourceAnchor.alongPercent}-source`,
+ targetHandle: `${targetPosition}-${targetAnchor.alongPercent}-target`,
+ type: hoverKey ? 'hoverEdge' : 'smoothstep',
+ animated: false,
+ style: { strokeWidth: 1.5 },
+ };
+
+ if (isArrowhead(el.endArrowhead)) {
+ edge.markerEnd = { type: MarkerType.ArrowClosed };
+ }
+ if (isArrowhead(el.startArrowhead)) {
+ edge.markerStart = { type: MarkerType.ArrowClosed };
+ }
+ if (label) edge.label = label;
+ if (hoverKey) edge.data = { hoverContentKey: hoverKey };
+
+ edges.push(edge);
+ continue;
+ }
+ }
+
+ // Filter edges whose source or target didn't produce a node (e.g., deleted, or bound to a text)
+ const nodeIds = new Set(nodes.map((n) => n.id));
+ const filteredEdges = edges.filter((e) => nodeIds.has(e.source) && nodeIds.has(e.target));
+
+ return { nodes, edges: filteredEdges };
+}
diff --git a/src/components/DrawioReactFlow/utils/parseManifest.ts b/src/components/DrawioReactFlow/utils/parseManifest.ts
new file mode 100644
index 0000000000..56bcd84e15
--- /dev/null
+++ b/src/components/DrawioReactFlow/utils/parseManifest.ts
@@ -0,0 +1,88 @@
+import { ManifestData, TransitionConfig } from '../types';
+
+const DEFAULT_ZOOM = { level: 4, duration: 1600 };
+const DEFAULT_PAUSE = { duration: 200 };
+const DEFAULT_FADE = { duration: 1500, easing: 'easeInOut' };
+
+function parseFloat2(value: string | null, fallback: number): number {
+ if (!value) return fallback;
+ const parsed = parseFloat(value);
+ return isNaN(parsed) ? fallback : parsed;
+}
+
+function parseTransition(el: Element, diagrams: Map): TransitionConfig | null {
+ const from = el.getAttribute('from') ?? '';
+ const to = el.getAttribute('to') ?? '';
+ const trigger = el.getAttribute('trigger') ?? '';
+ const fromFile = diagrams.get(from) ?? '';
+ const targetFile = diagrams.get(to) ?? '';
+
+ if (!from || !to || !trigger || !fromFile || !targetFile) return null;
+
+ const zoomEl = el.querySelector('zoom');
+ const pauseEl = el.querySelector('pause');
+ const fadeEl = el.querySelector('fade');
+
+ const rawMode = el.getAttribute('mode');
+ const mode: TransitionConfig['mode'] = rawMode === 'modal' ? 'modal' : 'zoom';
+
+ return {
+ fromFile,
+ trigger,
+ targetDiagram: to,
+ targetFile,
+ mode,
+ zoom: {
+ level: parseFloat2(zoomEl?.getAttribute('level') ?? null, DEFAULT_ZOOM.level),
+ duration: parseFloat2(zoomEl?.getAttribute('duration') ?? null, DEFAULT_ZOOM.duration),
+ },
+ pause: {
+ duration: parseFloat2(pauseEl?.getAttribute('duration') ?? null, DEFAULT_PAUSE.duration),
+ },
+ fade: {
+ duration: parseFloat2(fadeEl?.getAttribute('duration') ?? null, DEFAULT_FADE.duration),
+ easing: fadeEl?.getAttribute('easing') ?? DEFAULT_FADE.easing,
+ },
+ };
+}
+
+export async function fetchAndParseManifest(manifestUrl: string): Promise {
+ const response = await fetch(manifestUrl);
+ if (!response.ok) {
+ throw new Error(`Failed to load manifest: ${manifestUrl} (${response.status})`);
+ }
+
+ const xmlString = await response.text();
+ const parser = new DOMParser();
+ const doc = parser.parseFromString(xmlString, 'text/xml');
+
+ const parserError = doc.querySelector('parsererror');
+ if (parserError) {
+ throw new Error(`Invalid manifest XML: ${parserError.textContent}`);
+ }
+
+ const root = doc.documentElement;
+ const id = root.getAttribute('id') ?? '';
+ const title = root.getAttribute('title') ?? '';
+ const entryDiagramId = root.getAttribute('entryDiagram') ?? '';
+
+ const diagrams = new Map();
+ for (const el of Array.from(root.querySelectorAll('diagram'))) {
+ const diagId = el.getAttribute('id') ?? '';
+ const file = el.getAttribute('file') ?? '';
+ if (diagId && file) diagrams.set(diagId, file);
+ }
+
+ const entryDiagramFile = diagrams.get(entryDiagramId) ?? '';
+ if (!entryDiagramFile) {
+ throw new Error(`entryDiagram "${entryDiagramId}" not found in manifest diagrams`);
+ }
+
+ const transitions: TransitionConfig[] = [];
+ for (const el of Array.from(root.querySelectorAll('transition'))) {
+ const config = parseTransition(el, diagrams);
+ if (config) transitions.push(config);
+ }
+
+ return { id, title, entryDiagramFile, diagrams, transitions };
+}
diff --git a/src/css/custom.scss b/src/css/custom.scss
index e08b1880c6..8a0935ba17 100644
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@@ -13,8 +13,8 @@
@use './partials/_footer.scss';
@use './partials/_navbar.scss';
@use './partials/_modal.scss';
-@use './partials/_image-zoom.scss';
-@use './partials/_edge-challenge-flow.scss';
+@use './partials/_drawio-reactflow.scss';
+@use './partials/_diagram-hover-modal.scss';
// ========================================
// Global Styles
diff --git a/src/css/partials/_diagram-hover-modal.scss b/src/css/partials/_diagram-hover-modal.scss
new file mode 100644
index 0000000000..95b42b944a
--- /dev/null
+++ b/src/css/partials/_diagram-hover-modal.scss
@@ -0,0 +1,164 @@
+// Diagram Hover Modal — Arbitrum glassmorphic style
+// Hover-triggered floating modal for diagram cell annotations
+
+.diagram-hover-modal__trigger {
+ border-bottom: 1px dotted rgba(18, 170, 255, 0.6);
+ cursor: pointer;
+ transition: border-color var(--arbitrum-transition-normal, 0.2s ease);
+
+ &:hover {
+ border-bottom-color: rgba(18, 170, 255, 1);
+ }
+}
+
+.diagram-hover-modal__content {
+ background: rgba(33, 49, 71, 0.95);
+ border: 1px solid rgba(18, 170, 255, 0.3);
+ border-radius: 0;
+ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(18, 170, 255, 0.1);
+ backdrop-filter: blur(12px);
+ max-width: 500px;
+ max-height: 60vh;
+ min-width: 320px;
+ z-index: 9999;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ font-family: var(--arbitrum-font-family, var(--ifm-font-family-base));
+}
+
+.diagram-hover-modal__header {
+ display: flex;
+ justify-content: flex-end;
+ padding: 6px 10px 0;
+ flex-shrink: 0;
+}
+
+.diagram-hover-modal__close {
+ background: none;
+ border: none;
+ font-size: 18px;
+ cursor: pointer;
+ color: rgba(157, 204, 237, 0.6);
+ padding: 4px 8px;
+ border-radius: 0;
+ transition: all var(--arbitrum-transition-normal, 0.2s ease);
+ font-family: var(--arbitrum-font-family, var(--ifm-font-family-base));
+
+ &:hover {
+ color: #ffffff;
+ background: rgba(18, 170, 255, 0.15);
+ }
+}
+
+.diagram-hover-modal__body {
+ padding: 0 20px 20px;
+ overflow-y: auto;
+ flex: 1;
+ color: #ffffff;
+}
+
+.diagram-hover-modal__title {
+ font-size: 20px;
+ font-weight: 600;
+ margin: 0 0 12px 0;
+ color: #ffffff;
+}
+
+.diagram-hover-modal__subtitle {
+ font-size: 17px;
+ font-weight: 600;
+ margin: 16px 0 8px 0;
+ color: #9dcced;
+}
+
+.diagram-hover-modal__heading3 {
+ font-size: 15px;
+ font-weight: 600;
+ margin: 14px 0 6px 0;
+ color: #9dcced;
+}
+
+.diagram-hover-modal__heading4 {
+ font-size: 14px;
+ font-weight: 600;
+ margin: 12px 0 6px 0;
+ color: rgba(157, 204, 237, 0.8);
+}
+
+.diagram-hover-modal__paragraph {
+ margin: 0 0 12px 0;
+ line-height: 1.6;
+ font-size: 14px;
+ color: rgba(255, 255, 255, 0.85);
+}
+
+.diagram-hover-modal__list {
+ margin: 0 0 12px 0;
+ padding-left: 18px;
+}
+
+.diagram-hover-modal__list-item {
+ margin-bottom: 6px;
+ line-height: 1.5;
+ font-size: 14px;
+ color: rgba(255, 255, 255, 0.85);
+}
+
+.diagram-hover-modal__strong {
+ font-weight: 600;
+ color: #ffffff;
+}
+
+.diagram-hover-modal__inline-code {
+ background: rgba(18, 170, 255, 0.1);
+ border: 1px solid rgba(18, 170, 255, 0.2);
+ padding: 1px 5px;
+ border-radius: 0;
+ font-family: var(--arbitrum-mono-font, var(--ifm-font-family-monospace));
+ font-size: 0.85em;
+ color: rgba(18, 170, 255, 0.9);
+}
+
+.diagram-hover-modal__link {
+ color: rgba(18, 170, 255, 0.9);
+ text-decoration: underline;
+ text-decoration-color: rgba(18, 170, 255, 0.4);
+
+ &:hover {
+ color: #12aaff;
+ text-decoration-color: #12aaff;
+ }
+}
+
+.diagram-hover-modal__body::-webkit-scrollbar {
+ width: 6px;
+}
+
+.diagram-hover-modal__body::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.diagram-hover-modal__body::-webkit-scrollbar-thumb {
+ background: rgba(18, 170, 255, 0.2);
+ border-radius: 0;
+
+ &:hover {
+ background: rgba(18, 170, 255, 0.4);
+ }
+}
+
+@media (max-width: 768px) {
+ .diagram-hover-modal__content {
+ min-width: 280px;
+ max-width: calc(100vw - 32px);
+ max-height: 50vh;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .diagram-hover-modal__trigger,
+ .diagram-hover-modal__close {
+ transition: none;
+ }
+}
diff --git a/src/css/partials/_drawio-reactflow.scss b/src/css/partials/_drawio-reactflow.scss
new file mode 100644
index 0000000000..667cedd3cc
--- /dev/null
+++ b/src/css/partials/_drawio-reactflow.scss
@@ -0,0 +1,543 @@
+// Draw.io React Flow Interactive Diagrams
+// Theme-integrated styling for click-through diagram navigation
+
+// Arbitrum glassmorphic color scheme
+:root {
+ // Node colors — visible glass fills with strong borders
+ // Palette: orange #f66826, yellow #ffd600, purple #9897fe, red-orange #fd5a1b, blue #1a3a6b
+ --node-rect-bg: rgba(246, 104, 38, 0.5);
+ --node-rect-border: rgba(246, 104, 38, 0.85);
+ --node-diamond-bg: rgba(246, 104, 38, 0.45);
+ --node-diamond-border: rgba(246, 104, 38, 0.8);
+ --node-circle-bg: rgba(255, 214, 0, 0.4);
+ --node-circle-border: rgba(255, 214, 0, 0.75);
+ --node-stadium-bg: rgba(152, 151, 254, 0.45);
+ --node-stadium-border: rgba(152, 151, 254, 0.8);
+ --node-round-bg: rgba(152, 151, 254, 0.5);
+ --node-round-border: rgba(152, 151, 254, 0.85);
+ --node-process-bg: rgba(253, 90, 27, 0.5);
+ --node-process-border: rgba(253, 90, 27, 0.85);
+
+ // Subgraph rotating palette — glassmorphic containers
+ --subgraph-color-0-bg: rgba(18, 170, 255, 0.08);
+ --subgraph-color-0-border: rgba(18, 170, 255, 0.25);
+ --subgraph-color-1-bg: rgba(56, 189, 127, 0.08);
+ --subgraph-color-1-border: rgba(56, 189, 127, 0.25);
+ --subgraph-color-2-bg: rgba(99, 102, 241, 0.08);
+ --subgraph-color-2-border: rgba(99, 102, 241, 0.25);
+ --subgraph-color-3-bg: rgba(255, 165, 0, 0.08);
+ --subgraph-color-3-border: rgba(255, 165, 0, 0.25);
+ --subgraph-color-4-bg: rgba(227, 6, 110, 0.08);
+ --subgraph-color-4-border: rgba(227, 6, 110, 0.25);
+}
+
+[data-theme='dark'] {
+ --node-rect-bg: rgba(246, 104, 38, 0.45);
+ --node-diamond-bg: rgba(246, 104, 38, 0.4);
+ --node-circle-bg: rgba(255, 214, 0, 0.35);
+ --node-stadium-bg: rgba(152, 151, 254, 0.4);
+ --node-round-bg: rgba(152, 151, 254, 0.45);
+ --node-process-bg: rgba(253, 90, 27, 0.45);
+
+ --subgraph-color-0-bg: rgba(18, 170, 255, 0.06);
+ --subgraph-color-1-bg: rgba(56, 189, 127, 0.06);
+ --subgraph-color-2-bg: rgba(99, 102, 241, 0.06);
+ --subgraph-color-3-bg: rgba(255, 165, 0, 0.06);
+ --subgraph-color-4-bg: rgba(227, 6, 110, 0.06);
+}
+
+.drawio-reactflow-container {
+ width: 100%;
+ aspect-ratio: 16 / 9;
+ border: 1px solid rgba(18, 170, 255, 0.2);
+ border-radius: 0;
+ background-image: url('/diagrams/diagram-background.svg');
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-color: #1a1a2e;
+ margin: var(--ifm-spacing-vertical) 0;
+ overflow: hidden;
+ position: relative;
+
+ // Image nodes (e.g. envelope icons) — no border, background, or shadow
+ .react-flow__node-image {
+ background: transparent !important;
+ border: none !important;
+ box-shadow: none !important;
+ padding: 0;
+ }
+
+ // Hide ReactFlow connection handle dots
+ .react-flow__handle {
+ opacity: 0;
+ width: 1px;
+ height: 1px;
+ }
+
+ // Light mode — diagram always uses dark background, so nodes stay light text
+ &[data-theme='light'] {
+ .react-flow__node {
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
+ }
+
+ .react-flow__controls {
+ background-color: rgba(33, 49, 71, 0.9);
+ border: 1px solid rgba(18, 170, 255, 0.2);
+ border-radius: 0;
+
+ button {
+ background-color: transparent;
+ border-bottom: 1px solid rgba(18, 170, 255, 0.15);
+ color: #ffffff;
+
+ &:hover {
+ background-color: rgba(18, 170, 255, 0.1);
+ }
+ }
+ }
+ }
+
+ // Dark mode
+ &[data-theme='dark'] {
+ .react-flow__node {
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
+ }
+
+ .react-flow__edge-text {
+ background-color: rgba(33, 49, 71, 0.9) !important;
+ border-color: rgba(18, 170, 255, 0.2) !important;
+ }
+
+ .react-flow__controls {
+ background-color: rgba(33, 49, 71, 0.9);
+ border: 1px solid rgba(18, 170, 255, 0.2);
+ border-radius: 0;
+
+ button {
+ background-color: transparent;
+ border-bottom: 1px solid rgba(18, 170, 255, 0.15);
+ color: #ffffff;
+
+ &:hover {
+ background-color: rgba(18, 170, 255, 0.1);
+ }
+ }
+ }
+ }
+}
+
+// Animated edge flow — slow, subtle directional dash movement
+.drawio-reactflow-container .react-flow__edge.animated path {
+ stroke-dasharray: 5 5;
+ animation: flowDash 1.5s linear infinite;
+}
+
+@keyframes flowDash {
+ to {
+ stroke-dashoffset: -20;
+ }
+}
+
+// Slow blink animation for highlighted nodes
+.node-blinking .custom-node {
+ animation: blink 2s ease-in-out infinite;
+ transition: background-color 0.3s ease;
+
+ &:hover {
+ animation-play-state: paused;
+ background-color: rgba(253, 90, 27, 0.3) !important;
+ opacity: 1;
+ }
+}
+
+// Custom node styling — Arbitrum glassmorphic
+.custom-node {
+ padding: 4px 6px;
+ font-family: var(--arbitrum-font-family, var(--ifm-font-family-base));
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 1.2;
+ color: #ffffff;
+ transition: all var(--arbitrum-transition-normal, 0.2s ease);
+ border: 1px solid rgba(200, 210, 220, 0.35);
+ border-radius: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ word-wrap: break-word;
+ white-space: pre-wrap;
+ overflow: hidden;
+ backdrop-filter: blur(8px);
+
+ &.node-static {
+ cursor: default;
+ }
+
+ &.node-clickable {
+ cursor: pointer;
+
+ &:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 4px 20px rgba(18, 170, 255, 0.15);
+ border-color: rgba(18, 170, 255, 0.6);
+ }
+
+ &:focus {
+ outline: 1px solid rgba(18, 170, 255, 0.6);
+ outline-offset: 2px;
+ }
+
+ &:active {
+ transform: translateY(0);
+ }
+ }
+
+ // Shape variations — sharp corners by default
+ &.shape-rect {
+ border-radius: 0;
+ background-color: var(--node-rect-bg);
+ border-color: var(--node-rect-border);
+ }
+
+ &.shape-round {
+ border-radius: 0;
+ background-color: var(--node-round-bg);
+ border-color: var(--node-round-border);
+ }
+
+ &.shape-stadium {
+ border-radius: 0;
+ padding: 10px 30px;
+ background-color: var(--node-stadium-bg);
+ border-color: var(--node-stadium-border);
+ }
+
+ &.shape-circle {
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: var(--node-circle-bg);
+ border-color: var(--node-circle-border);
+ }
+
+ &.shape-diamond {
+ border-radius: 0;
+ min-width: 120px;
+ min-height: 120px;
+ background-color: var(--node-diamond-bg);
+ border-color: var(--node-diamond-border);
+ }
+
+ &.shape-process {
+ border-radius: 0;
+ background-color: var(--node-process-bg);
+ border-color: var(--node-process-border);
+ }
+
+ // Color token overrides — set via colorToken attribute in Draw.io XML
+ &.color-orange {
+ background-color: var(--node-rect-bg);
+ border-color: var(--node-rect-border);
+ }
+
+ &.color-yellow {
+ background-color: var(--node-circle-bg);
+ border-color: var(--node-circle-border);
+ }
+
+ &.color-purple {
+ background-color: var(--node-round-bg);
+ border-color: var(--node-round-border);
+ }
+
+ &.color-red {
+ background-color: var(--node-process-bg);
+ border-color: var(--node-process-border);
+ }
+
+ &.color-blue {
+ background-color: rgba(26, 58, 107, 0.7);
+ border-color: rgba(26, 58, 107, 0.9);
+ }
+
+ &.color-green {
+ background-color: rgba(46, 204, 113, 0.5);
+ border-color: rgba(46, 204, 113, 0.85);
+ }
+
+ &.color-grey {
+ background-color: rgba(160, 170, 180, 0.45);
+ border-color: rgba(160, 170, 180, 0.8);
+ }
+
+ &.color-lightblue {
+ background-color: rgba(91, 192, 222, 0.5);
+ border-color: rgba(91, 192, 222, 0.85);
+ }
+
+ .node-content {
+ word-wrap: break-word;
+ white-space: pre-wrap;
+ text-align: center;
+ }
+}
+
+// Navigation controls — Arbitrum glass style
+.diagram-nav-controls {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ z-index: 5;
+
+ .back-button {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 8px 16px;
+ background-color: rgba(18, 170, 255, 0.15);
+ color: #ffffff;
+ border: 1px solid rgba(18, 170, 255, 0.4);
+ border-radius: 0;
+ font-family: var(--arbitrum-font-family, var(--ifm-font-family-base));
+ font-size: 14px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all var(--arbitrum-transition-normal, 0.2s ease);
+ backdrop-filter: blur(8px);
+
+ &:hover {
+ background-color: rgba(18, 170, 255, 0.25);
+ border-color: rgba(18, 170, 255, 0.6);
+ box-shadow: 0 4px 20px rgba(18, 170, 255, 0.15);
+ }
+
+ &:active {
+ transform: scale(0.98);
+ }
+
+ &:focus-visible {
+ outline: 1px solid rgba(18, 170, 255, 0.6);
+ outline-offset: 2px;
+ }
+
+ .back-icon {
+ font-size: 16px;
+ line-height: 1;
+ }
+ }
+}
+
+// Responsive design
+@media (max-width: 768px) {
+ .drawio-reactflow-container {
+ .custom-node {
+ font-size: 12px;
+ padding: 8px 12px;
+ }
+
+ .back-button {
+ font-size: 12px;
+ padding: 6px 12px;
+ }
+ }
+}
+
+// Accessibility - high contrast mode
+@media (prefers-contrast: high) {
+ .custom-node.node-clickable {
+ border-width: 3px;
+ }
+
+ .back-button {
+ border-width: 2px;
+ }
+}
+
+// Accessibility - reduced motion
+@media (prefers-reduced-motion: reduce) {
+ .custom-node,
+ .back-button {
+ transition: none;
+ }
+
+ .custom-node.node-clickable:hover {
+ transform: none;
+ }
+}
+
+// Subgraph/Group Node Styles
+.react-flow__node-group {
+ transform: none !important;
+
+ .subgraph-node {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ transform: none !important;
+ }
+}
+
+.subgraph-header {
+ position: absolute;
+ top: 12px;
+ left: 12px;
+ z-index: 10;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.subgraph-title {
+ margin: 0;
+ font-size: 13px;
+ font-weight: 500;
+ text-align: left;
+ font-family: var(--arbitrum-font-family, var(--ifm-font-family-base));
+ background: rgba(33, 49, 71, 0.9);
+ padding: 6px 14px;
+ border-radius: 0;
+ display: inline-block;
+ border: 1px solid rgba(18, 170, 255, 0.3);
+ backdrop-filter: blur(10px);
+ color: #9dcced;
+ letter-spacing: 0.02em;
+ text-transform: uppercase;
+}
+
+.drawio-reactflow-container[data-theme='dark'] {
+ .subgraph-title {
+ background: rgba(33, 49, 71, 0.9);
+ color: #9dcced;
+ border-color: rgba(18, 170, 255, 0.25);
+ }
+}
+
+// Diagram modal — full-screen overlay rendering a nested ReactFlow diagram
+.diagram-modal-backdrop {
+ position: fixed;
+ inset: 0;
+ z-index: 1000;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: rgba(8, 10, 22, 0.72);
+ backdrop-filter: blur(6px);
+ -webkit-backdrop-filter: blur(6px);
+ padding: 2vh 5vw;
+}
+
+.diagram-modal {
+ position: relative;
+ width: min(90vw, 1600px);
+ height: 85vh;
+ display: flex;
+ flex-direction: column;
+ background-color: #1a1a2e;
+ background-image: url('/diagrams/diagram-background.svg');
+ background-size: cover;
+ background-position: center;
+ border: 1px solid rgba(18, 170, 255, 0.35);
+ border-radius: 8px;
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
+ overflow: hidden;
+}
+
+.diagram-modal__header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
+ padding: 12px 20px;
+ background-color: rgba(18, 170, 255, 0.08);
+ border-bottom: 1px solid rgba(18, 170, 255, 0.2);
+}
+
+.diagram-modal__title {
+ margin: 0;
+ font-size: 16px;
+ font-weight: 600;
+ color: #ffffff;
+ letter-spacing: 0.01em;
+}
+
+.diagram-modal__close {
+ appearance: none;
+ background: rgba(255, 255, 255, 0.08);
+ color: #ffffff;
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 4px;
+ width: 32px;
+ height: 32px;
+ font-size: 20px;
+ line-height: 1;
+ cursor: pointer;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ transition: background-color 150ms ease, transform 150ms ease;
+
+ &:hover {
+ background: rgba(255, 255, 255, 0.18);
+ }
+
+ &:focus-visible {
+ outline: 2px solid #12aaff;
+ outline-offset: 2px;
+ }
+}
+
+.diagram-modal__body {
+ flex: 1 1 auto;
+ position: relative;
+ min-height: 0;
+
+ .react-flow {
+ width: 100%;
+ height: 100%;
+ }
+}
+
+.diagram-modal__status {
+ position: absolute;
+ inset: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: rgba(255, 255, 255, 0.8);
+ font-size: 14px;
+}
+
+.diagram-modal__status--error {
+ color: var(--ifm-color-danger);
+}
+
+// Responsive — smaller viewports get a tighter modal
+@media (max-width: 768px) {
+ .diagram-modal-backdrop {
+ padding: 0;
+ }
+
+ .diagram-modal {
+ width: 100vw;
+ height: 100vh;
+ border-radius: 0;
+ border: none;
+ }
+
+ .diagram-modal__title {
+ font-size: 14px;
+ }
+}
+
+// Reduced motion — suppress backdrop blur animation
+@media (prefers-reduced-motion: reduce) {
+ .diagram-modal-backdrop,
+ .diagram-modal {
+ transition: none;
+ }
+}
diff --git a/static/diagrams/.$stylus-learning-paths.drawio.bkp b/static/diagrams/.$stylus-learning-paths.drawio.bkp
new file mode 100644
index 0000000000..98e6257f42
--- /dev/null
+++ b/static/diagrams/.$stylus-learning-paths.drawio.bkp
@@ -0,0 +1,166 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/diagrams/diagram-background.svg b/static/diagrams/diagram-background.svg
new file mode 100644
index 0000000000..e767a221de
--- /dev/null
+++ b/static/diagrams/diagram-background.svg
@@ -0,0 +1,608 @@
+
+
\ No newline at end of file
diff --git a/static/diagrams/haw-ticket-submission.drawio b/static/diagrams/haw-ticket-submission.drawio
new file mode 100644
index 0000000000..059e98c3a1
--- /dev/null
+++ b/static/diagrams/haw-ticket-submission.drawio
@@ -0,0 +1,126 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/diagrams/haw-transaction-lifecycle.excalidraw b/static/diagrams/haw-transaction-lifecycle.excalidraw
new file mode 100644
index 0000000000..adf804d929
--- /dev/null
+++ b/static/diagrams/haw-transaction-lifecycle.excalidraw
@@ -0,0 +1,2218 @@
+{
+ "type": "excalidraw",
+ "version": 2,
+ "source": "http://localhost:3001",
+ "elements": [
+ {
+ "id": "ZhT9DZ3sOSysoQGSykDgl",
+ "type": "text",
+ "x": 1084.1438231625423,
+ "y": 479.8942607583499,
+ "width": 113.89988708496094,
+ "height": 50,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "Zw",
+ "roundness": null,
+ "seed": 28517492,
+ "version": 11,
+ "versionNonce": 970223308,
+ "isDeleted": true,
+ "boundElements": null,
+ "updated": 1776906110992,
+ "link": null,
+ "locked": false,
+ "text": "Sequenced \nTransactions",
+ "fontSize": 20,
+ "fontFamily": 6,
+ "textAlign": "center",
+ "verticalAlign": "top",
+ "containerId": null,
+ "originalText": "Sequenced \nTransactions",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "aTa7eVCzZffgeQmaQk07q",
+ "type": "text",
+ "x": 975.0328810972765,
+ "y": 78.7732043563736,
+ "width": 143.285338912978,
+ "height": 50,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "Zx",
+ "roundness": null,
+ "seed": 858027508,
+ "version": 143,
+ "versionNonce": 1970863564,
+ "isDeleted": true,
+ "boundElements": null,
+ "updated": 1776906073155,
+ "link": null,
+ "locked": false,
+ "text": "sequencer feed\nSoft guarantee",
+ "fontSize": 20,
+ "fontFamily": 6,
+ "textAlign": "center",
+ "verticalAlign": "top",
+ "containerId": null,
+ "originalText": "sequencer feed\nSoft guarantee",
+ "autoResize": false,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "LKNcPWikrj0RV31WF2HUd",
+ "type": "text",
+ "x": 728.8121284783961,
+ "y": 614.9468725798974,
+ "width": 201.88792419433594,
+ "height": 45,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "Zy",
+ "roundness": null,
+ "seed": 724287860,
+ "version": 166,
+ "versionNonce": 906598988,
+ "isDeleted": true,
+ "boundElements": null,
+ "updated": 1776905925312,
+ "link": null,
+ "locked": false,
+ "text": "Parent chain",
+ "fontSize": 36,
+ "fontFamily": 6,
+ "textAlign": "center",
+ "verticalAlign": "top",
+ "containerId": null,
+ "originalText": "Parent chain",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "EHtfy-cHUqfq2AiT_VQwe",
+ "type": "rectangle",
+ "x": 766.2265566307913,
+ "y": 187.4380553392287,
+ "width": 210.6015625,
+ "height": 75.57037867142446,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "a0",
+ "roundness": {
+ "type": 3
+ },
+ "seed": 670936617,
+ "version": 591,
+ "versionNonce": 213742836,
+ "isDeleted": false,
+ "boundElements": [
+ {
+ "id": "ANN9qbtcZ9LTB4AVN7f0k",
+ "type": "text"
+ },
+ {
+ "id": "YCNKEb3yDALHhj6IwTcGG",
+ "type": "arrow"
+ },
+ {
+ "id": "6X8h3a08CIRc2cF__KoPW",
+ "type": "arrow"
+ }
+ ],
+ "updated": 1776906801000,
+ "link": null,
+ "locked": false
+ },
+ {
+ "id": "ANN9qbtcZ9LTB4AVN7f0k",
+ "type": "text",
+ "x": 801.4674089867483,
+ "y": 200.22324467494093,
+ "width": 140.11985778808594,
+ "height": 50,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "a0V",
+ "roundness": null,
+ "seed": 1471816436,
+ "version": 402,
+ "versionNonce": 1554691700,
+ "isDeleted": false,
+ "boundElements": null,
+ "updated": 1776906801000,
+ "link": null,
+ "locked": false,
+ "text": "Sequencer feed\nSoft guarantee",
+ "fontSize": 20,
+ "fontFamily": 6,
+ "textAlign": "center",
+ "verticalAlign": "middle",
+ "containerId": "EHtfy-cHUqfq2AiT_VQwe",
+ "originalText": "Sequencer feed\nSoft guarantee",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "uBLxCVVq9Pze24Y_GEgDH",
+ "type": "rectangle",
+ "x": 766.563963100191,
+ "y": 319.62755867235865,
+ "width": 210.6015625,
+ "height": 60.2734375,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "a1",
+ "roundness": {
+ "type": 3
+ },
+ "seed": 248480329,
+ "version": 606,
+ "versionNonce": 1643153612,
+ "isDeleted": false,
+ "boundElements": [
+ {
+ "id": "pzHWt9AB_PD8ST0ydX1u1",
+ "type": "text"
+ },
+ {
+ "id": "yD3jwQeRda30A8KibqNWG",
+ "type": "arrow"
+ },
+ {
+ "id": "6X8h3a08CIRc2cF__KoPW",
+ "type": "arrow"
+ },
+ {
+ "id": "u-b7c0CVnJF1Ylx2y6nvq",
+ "type": "arrow"
+ },
+ {
+ "id": "Xs2DUq02O1tRvKDXn9AhI",
+ "type": "arrow"
+ }
+ ],
+ "updated": 1776906788375,
+ "link": null,
+ "locked": false
+ },
+ {
+ "id": "pzHWt9AB_PD8ST0ydX1u1",
+ "type": "text",
+ "x": 824.2247907369098,
+ "y": 337.26427742235865,
+ "width": 95.2799072265625,
+ "height": 25,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "a2",
+ "roundness": null,
+ "seed": 2037914484,
+ "version": 230,
+ "versionNonce": 251498316,
+ "isDeleted": false,
+ "boundElements": null,
+ "updated": 1776906788376,
+ "link": null,
+ "locked": false,
+ "text": "Sequencer",
+ "fontSize": 20,
+ "fontFamily": 6,
+ "textAlign": "center",
+ "verticalAlign": "middle",
+ "containerId": "uBLxCVVq9Pze24Y_GEgDH",
+ "originalText": "Sequencer",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "TLJ1ZtYPWU7UoOOlST6YH",
+ "type": "text",
+ "x": 642.51171875,
+ "y": 266.98046875,
+ "width": 95.2799072265625,
+ "height": 25,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "a8",
+ "roundness": null,
+ "seed": 251798375,
+ "version": 477,
+ "versionNonce": 1455638004,
+ "isDeleted": true,
+ "boundElements": [],
+ "updated": 1776904163427,
+ "link": null,
+ "locked": false,
+ "text": "Sequencer",
+ "fontSize": 20,
+ "fontFamily": 6,
+ "textAlign": "left",
+ "verticalAlign": "top",
+ "containerId": null,
+ "originalText": "Sequencer",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "fxCWrngrbhuLbM58Q4KeM",
+ "type": "rectangle",
+ "x": 769.07421875,
+ "y": 422.28599395219317,
+ "width": 210.6015625,
+ "height": 60.2734375,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "a9",
+ "roundness": {
+ "type": 3
+ },
+ "seed": 363807591,
+ "version": 738,
+ "versionNonce": 1788872396,
+ "isDeleted": false,
+ "boundElements": [
+ {
+ "id": "O01Q27ugZ4-e79o1agQNR",
+ "type": "text"
+ },
+ {
+ "id": "PP6BPLTKU8Sr4z1V9Paie",
+ "type": "arrow"
+ },
+ {
+ "id": "u-b7c0CVnJF1Ylx2y6nvq",
+ "type": "arrow"
+ }
+ ],
+ "updated": 1776906770487,
+ "link": null,
+ "locked": false
+ },
+ {
+ "id": "O01Q27ugZ4-e79o1agQNR",
+ "type": "text",
+ "x": 783.0051040649414,
+ "y": 439.92271270219317,
+ "width": 182.7397918701172,
+ "height": 25,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "a9V",
+ "roundness": null,
+ "seed": 779722868,
+ "version": 154,
+ "versionNonce": 286084428,
+ "isDeleted": false,
+ "boundElements": null,
+ "updated": 1776906770487,
+ "link": null,
+ "locked": false,
+ "text": "Batch and compress",
+ "fontSize": 20,
+ "fontFamily": 6,
+ "textAlign": "center",
+ "verticalAlign": "middle",
+ "containerId": "fxCWrngrbhuLbM58Q4KeM",
+ "originalText": "Batch and compress",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "zIx7bB4R2dS_H1FuFDp1w",
+ "type": "text",
+ "x": 588.4921875,
+ "y": 252.91015625,
+ "width": 182.7397918701172,
+ "height": 25,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "aA",
+ "roundness": null,
+ "seed": 635453063,
+ "version": 719,
+ "versionNonce": 1609283956,
+ "isDeleted": true,
+ "boundElements": [],
+ "updated": 1776904176090,
+ "link": null,
+ "locked": false,
+ "text": "Batch and compress",
+ "fontSize": 20,
+ "fontFamily": 6,
+ "textAlign": "left",
+ "verticalAlign": "top",
+ "containerId": null,
+ "originalText": "Batch and compress",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "YPd16UrotptPE2CScsUXm",
+ "type": "rectangle",
+ "x": 443.83224094118117,
+ "y": 547.4975449623792,
+ "width": 588.1498436024194,
+ "height": 152.46254422744028,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "aAG",
+ "roundness": {
+ "type": 3
+ },
+ "seed": 1133608201,
+ "version": 1643,
+ "versionNonce": 552079732,
+ "isDeleted": false,
+ "boundElements": [
+ {
+ "id": "yD3jwQeRda30A8KibqNWG",
+ "type": "arrow"
+ },
+ {
+ "id": "PP6BPLTKU8Sr4z1V9Paie",
+ "type": "arrow"
+ },
+ {
+ "id": "wStmzSxEYTFkoaz7LLV36",
+ "type": "arrow"
+ }
+ ],
+ "updated": 1776907210566,
+ "link": null,
+ "locked": false
+ },
+ {
+ "id": "FyoxZ6aR9xA3_JseIXQH3",
+ "type": "rectangle",
+ "x": 486.4714389637186,
+ "y": 589.9096965812649,
+ "width": 219.39202185569263,
+ "height": 55.19336069914857,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "aB",
+ "roundness": {
+ "type": 3
+ },
+ "seed": 1852223815,
+ "version": 2109,
+ "versionNonce": 2066845940,
+ "isDeleted": false,
+ "boundElements": [
+ {
+ "id": "Pf1XxhPZEztcij7YXpTUd",
+ "type": "text"
+ },
+ {
+ "id": "OlPEGs1DalbXOFarCSWu9",
+ "type": "arrow"
+ },
+ {
+ "id": "yD3jwQeRda30A8KibqNWG",
+ "type": "arrow"
+ }
+ ],
+ "updated": 1776907402112,
+ "link": null,
+ "locked": false
+ },
+ {
+ "id": "Pf1XxhPZEztcij7YXpTUd",
+ "type": "text",
+ "x": 531.1675185561157,
+ "y": 605.0063769308392,
+ "width": 129.99986267089844,
+ "height": 25,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "aBV",
+ "roundness": null,
+ "seed": 1858734796,
+ "version": 354,
+ "versionNonce": 507204212,
+ "isDeleted": false,
+ "boundElements": null,
+ "updated": 1776907402112,
+ "link": null,
+ "locked": false,
+ "text": "Delayed Inbox",
+ "fontSize": 20,
+ "fontFamily": 6,
+ "textAlign": "center",
+ "verticalAlign": "middle",
+ "containerId": "FyoxZ6aR9xA3_JseIXQH3",
+ "originalText": "Delayed Inbox",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "PP6BPLTKU8Sr4z1V9Paie",
+ "type": "arrow",
+ "x": 874.4892034060108,
+ "y": 488.55943145219317,
+ "width": 0.8218046547583526,
+ "height": 52.938113510185985,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "aJ",
+ "roundness": {
+ "type": 2
+ },
+ "seed": 2053922151,
+ "version": 2740,
+ "versionNonce": 590714740,
+ "isDeleted": false,
+ "boundElements": [],
+ "updated": 1776907381884,
+ "link": null,
+ "locked": false,
+ "points": [
+ [
+ 0,
+ 0
+ ],
+ [
+ 0.8218046547583526,
+ 52.938113510185985
+ ]
+ ],
+ "startBinding": {
+ "elementId": "fxCWrngrbhuLbM58Q4KeM",
+ "mode": "orbit",
+ "fixedPoint": [
+ 0.5001,
+ 1
+ ]
+ },
+ "endBinding": {
+ "elementId": "YPd16UrotptPE2CScsUXm",
+ "mode": "orbit",
+ "fixedPoint": [
+ 0.7348458635032701,
+ 0.2651541364967304
+ ]
+ },
+ "startArrowhead": null,
+ "endArrowhead": "arrow",
+ "elbowed": false,
+ "moveMidPointsWithElement": false
+ },
+ {
+ "id": "u-b7c0CVnJF1Ylx2y6nvq",
+ "type": "arrow",
+ "x": 874.478025600191,
+ "y": 379.85412117235865,
+ "width": 0.07037527288730416,
+ "height": 36.43187277983452,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "aL",
+ "roundness": {
+ "type": 2
+ },
+ "seed": 1257997385,
+ "version": 868,
+ "versionNonce": 2028978892,
+ "isDeleted": false,
+ "boundElements": [],
+ "updated": 1776906788379,
+ "link": null,
+ "locked": false,
+ "points": [
+ [
+ 0,
+ 0
+ ],
+ [
+ -0.07037527288730416,
+ 36.43187277983452
+ ]
+ ],
+ "startBinding": {
+ "elementId": "uBLxCVVq9Pze24Y_GEgDH",
+ "mode": "inside",
+ "fixedPoint": [
+ 0.5124086508142598,
+ 0.9992222942320156
+ ]
+ },
+ "endBinding": {
+ "elementId": "fxCWrngrbhuLbM58Q4KeM",
+ "mode": "orbit",
+ "fixedPoint": [
+ 0.5001,
+ 0
+ ]
+ },
+ "startArrowhead": null,
+ "endArrowhead": "arrow",
+ "elbowed": false,
+ "moveMidPointsWithElement": false
+ },
+ {
+ "id": "WRoCFoyelPj4qRCEvtRUj",
+ "type": "rectangle",
+ "x": 477.5163305777478,
+ "y": 183.54821012001767,
+ "width": 98.00781250000003,
+ "height": 81.796875,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [
+ "-B0mnCuz65uyhiti3VQzs"
+ ],
+ "frameId": null,
+ "index": "aLV",
+ "roundness": {
+ "type": 3
+ },
+ "seed": 1823010633,
+ "version": 835,
+ "versionNonce": 1757773300,
+ "isDeleted": false,
+ "boundElements": [
+ {
+ "id": "SEE9gFf-pHChY_TDNN_H0",
+ "type": "text"
+ },
+ {
+ "id": "YCNKEb3yDALHhj6IwTcGG",
+ "type": "arrow"
+ },
+ {
+ "id": "OlPEGs1DalbXOFarCSWu9",
+ "type": "arrow"
+ }
+ ],
+ "updated": 1776906795574,
+ "link": null,
+ "locked": false
+ },
+ {
+ "id": "SEE9gFf-pHChY_TDNN_H0",
+ "type": "text",
+ "x": 505.3902548331189,
+ "y": 235.34508512001767,
+ "width": 42.25996398925781,
+ "height": 25,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [
+ "-B0mnCuz65uyhiti3VQzs"
+ ],
+ "frameId": null,
+ "index": "aM",
+ "roundness": null,
+ "seed": 1972605004,
+ "version": 264,
+ "versionNonce": 1825152884,
+ "isDeleted": false,
+ "boundElements": null,
+ "updated": 1776906795574,
+ "link": null,
+ "locked": false,
+ "text": "User",
+ "fontSize": 20,
+ "fontFamily": 6,
+ "textAlign": "center",
+ "verticalAlign": "bottom",
+ "containerId": "WRoCFoyelPj4qRCEvtRUj",
+ "originalText": "User",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "U7xTuPwIYT86SGMikMjgz",
+ "type": "image",
+ "x": 502.8913305777478,
+ "y": 184.35680387001767,
+ "width": 50,
+ "height": 50,
+ "angle": 0,
+ "strokeColor": "transparent",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [
+ "-B0mnCuz65uyhiti3VQzs"
+ ],
+ "frameId": null,
+ "index": "aN",
+ "roundness": null,
+ "seed": 1046026601,
+ "version": 749,
+ "versionNonce": 1244455924,
+ "isDeleted": false,
+ "boundElements": [],
+ "updated": 1776906795574,
+ "link": null,
+ "locked": false,
+ "status": "saved",
+ "fileId": "33b0bce30ea98d549bc1aca14f7485a6f33d608c",
+ "scale": [
+ 1,
+ 1
+ ],
+ "crop": null
+ },
+ {
+ "id": "g5h7FCtQzjX8gjdf9O_wX",
+ "type": "rectangle",
+ "x": 1042.3623392790366,
+ "y": 164.99783153597116,
+ "width": 150.5005829227467,
+ "height": 370.39383829082374,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "aP8",
+ "roundness": {
+ "type": 3
+ },
+ "seed": 544294567,
+ "version": 1245,
+ "versionNonce": 1799436276,
+ "isDeleted": false,
+ "boundElements": [
+ {
+ "id": "h4-uWBp98L80dbyFPl8JP",
+ "type": "arrow"
+ },
+ {
+ "id": "o0bxJ0debm6t3D4CY5jQu",
+ "type": "text"
+ },
+ {
+ "id": "Xs2DUq02O1tRvKDXn9AhI",
+ "type": "arrow"
+ },
+ {
+ "id": "oY8KgsRVyF616iu5Pu110",
+ "type": "arrow"
+ }
+ ],
+ "updated": 1776907157390,
+ "link": null,
+ "locked": false
+ },
+ {
+ "id": "o0bxJ0debm6t3D4CY5jQu",
+ "type": "text",
+ "x": 1060.6626871979295,
+ "y": 480.3916698267949,
+ "width": 113.89988708496094,
+ "height": 50,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "aPC",
+ "roundness": null,
+ "seed": 1112026060,
+ "version": 186,
+ "versionNonce": 1539185012,
+ "isDeleted": false,
+ "boundElements": null,
+ "updated": 1776907157390,
+ "link": null,
+ "locked": false,
+ "text": "Sequenced \nTransactions",
+ "fontSize": 20,
+ "fontFamily": 6,
+ "textAlign": "center",
+ "verticalAlign": "bottom",
+ "containerId": "g5h7FCtQzjX8gjdf9O_wX",
+ "originalText": "Sequenced \nTransactions",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "rLrDhTgmUZC_jmeHrKAsE",
+ "type": "rectangle",
+ "x": 1079.1466464097614,
+ "y": 205.6720821291523,
+ "width": 89.33853679525645,
+ "height": 57.62253413796258,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [
+ "d-GMlSASQohQcvS4elqB6"
+ ],
+ "frameId": null,
+ "index": "aPb",
+ "roundness": {
+ "type": 3
+ },
+ "seed": 2118463431,
+ "version": 919,
+ "versionNonce": 1106594932,
+ "isDeleted": false,
+ "boundElements": [],
+ "updated": 1776907157391,
+ "link": null,
+ "locked": false
+ },
+ {
+ "id": "Qxs7IaUVj1W2Oq9BNbQrA",
+ "type": "image",
+ "x": 1096.039644236131,
+ "y": 203.17207022223016,
+ "width": 53.9631575187241,
+ "height": 53.9631575187241,
+ "angle": 0,
+ "strokeColor": "transparent",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [
+ "d-GMlSASQohQcvS4elqB6"
+ ],
+ "frameId": null,
+ "index": "aQ",
+ "roundness": null,
+ "seed": 2081565097,
+ "version": 890,
+ "versionNonce": 1543216628,
+ "isDeleted": false,
+ "boundElements": [],
+ "updated": 1776907157391,
+ "link": null,
+ "locked": false,
+ "status": "saved",
+ "fileId": "04ee4bc3228fceccb6fd0820bf0ed8c0232b9edf",
+ "scale": [
+ 1,
+ 1
+ ],
+ "crop": null
+ },
+ {
+ "id": "TlBvmJtBAHHVglli0DN97",
+ "type": "text",
+ "x": 1087.939661979114,
+ "y": 225.21269499897258,
+ "width": 9.599990844726562,
+ "height": 20,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [
+ "d-GMlSASQohQcvS4elqB6"
+ ],
+ "frameId": null,
+ "index": "aR",
+ "roundness": null,
+ "seed": 777578887,
+ "version": 1147,
+ "versionNonce": 1413201780,
+ "isDeleted": false,
+ "boundElements": [],
+ "updated": 1776907157391,
+ "link": null,
+ "locked": false,
+ "text": "1",
+ "fontSize": 16,
+ "fontFamily": 6,
+ "textAlign": "left",
+ "verticalAlign": "top",
+ "containerId": null,
+ "originalText": "1",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "7FNtUZIHvClKCDExGnh1F",
+ "type": "rectangle",
+ "x": 1076.728075269825,
+ "y": 298.12416513333363,
+ "width": 89.33853679525645,
+ "height": 57.62253413796258,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [
+ "FahYpGD8yGFVhCLTg4pkQ"
+ ],
+ "frameId": null,
+ "index": "aRC",
+ "roundness": {
+ "type": 3
+ },
+ "seed": 1063090505,
+ "version": 1004,
+ "versionNonce": 1660662004,
+ "isDeleted": false,
+ "boundElements": [],
+ "updated": 1776907157391,
+ "link": null,
+ "locked": false
+ },
+ {
+ "id": "hwSw6f03YSBd5CwFJB5JQ",
+ "type": "image",
+ "x": 1093.6210730961943,
+ "y": 295.62415322641147,
+ "width": 53.9631575187241,
+ "height": 53.9631575187241,
+ "angle": 0,
+ "strokeColor": "transparent",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [
+ "FahYpGD8yGFVhCLTg4pkQ"
+ ],
+ "frameId": null,
+ "index": "aRO",
+ "roundness": null,
+ "seed": 1641113641,
+ "version": 975,
+ "versionNonce": 1203860084,
+ "isDeleted": false,
+ "boundElements": [],
+ "updated": 1776907157391,
+ "link": null,
+ "locked": false,
+ "status": "saved",
+ "fileId": "04ee4bc3228fceccb6fd0820bf0ed8c0232b9edf",
+ "scale": [
+ 1,
+ 1
+ ],
+ "crop": null
+ },
+ {
+ "id": "-OzOD7VtKbRepbvJppsIe",
+ "type": "text",
+ "x": 1083.6931344125856,
+ "y": 319.7157995760336,
+ "width": 9.599990844726562,
+ "height": 20,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [
+ "FahYpGD8yGFVhCLTg4pkQ"
+ ],
+ "frameId": null,
+ "index": "aRa",
+ "roundness": null,
+ "seed": 5613993,
+ "version": 1229,
+ "versionNonce": 1632830452,
+ "isDeleted": false,
+ "boundElements": [],
+ "updated": 1776907157391,
+ "link": null,
+ "locked": false,
+ "text": "2",
+ "fontSize": 16,
+ "fontFamily": 6,
+ "textAlign": "left",
+ "verticalAlign": "top",
+ "containerId": null,
+ "originalText": "2",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "D22aCfWqIkwWKclpElAyd",
+ "type": "rectangle",
+ "x": 1075.187011234572,
+ "y": 392.13415400672943,
+ "width": 89.33853679525645,
+ "height": 57.62253413796258,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [
+ "fXgt2pVR8YiDM_D_TJizF"
+ ],
+ "frameId": null,
+ "index": "aRl",
+ "roundness": {
+ "type": 3
+ },
+ "seed": 957819015,
+ "version": 1005,
+ "versionNonce": 1169581428,
+ "isDeleted": false,
+ "boundElements": [],
+ "updated": 1776907157391,
+ "link": null,
+ "locked": false
+ },
+ {
+ "id": "YaSn4u61RCzCL0Hsu6TnS",
+ "type": "image",
+ "x": 1092.0800090609414,
+ "y": 389.7829390067363,
+ "width": 53.9631575187241,
+ "height": 53.9631575187241,
+ "angle": 0,
+ "strokeColor": "transparent",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [
+ "fXgt2pVR8YiDM_D_TJizF"
+ ],
+ "frameId": null,
+ "index": "aS",
+ "roundness": null,
+ "seed": 424574887,
+ "version": 977,
+ "versionNonce": 1513199348,
+ "isDeleted": false,
+ "boundElements": [],
+ "updated": 1776907157391,
+ "link": null,
+ "locked": false,
+ "status": "saved",
+ "fileId": "04ee4bc3228fceccb6fd0820bf0ed8c0232b9edf",
+ "scale": [
+ 1,
+ 1
+ ],
+ "crop": null
+ },
+ {
+ "id": "3VNNSPpI8Ntu-8h-gLc0k",
+ "type": "text",
+ "x": 1082.8577897584253,
+ "y": 410.71901503369696,
+ "width": 9.599990844726562,
+ "height": 20,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [
+ "fXgt2pVR8YiDM_D_TJizF"
+ ],
+ "frameId": null,
+ "index": "aT",
+ "roundness": null,
+ "seed": 1696520487,
+ "version": 1278,
+ "versionNonce": 1800050804,
+ "isDeleted": false,
+ "boundElements": [],
+ "updated": 1776907157391,
+ "link": null,
+ "locked": false,
+ "text": "3",
+ "fontSize": 16,
+ "fontFamily": 6,
+ "textAlign": "left",
+ "verticalAlign": "top",
+ "containerId": null,
+ "originalText": "3",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "-Soy-VeT2jJAcLl-Rgswi",
+ "type": "rectangle",
+ "x": 1301.7372618960553,
+ "y": 453.4741781328279,
+ "width": 113.19531249999987,
+ "height": 51.718750000000014,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "ac",
+ "roundness": {
+ "type": 3
+ },
+ "seed": 447588935,
+ "version": 1703,
+ "versionNonce": 1153919476,
+ "isDeleted": false,
+ "boundElements": [
+ {
+ "id": "_Y1mn5JizdTC-Qje9WFPR",
+ "type": "text"
+ },
+ {
+ "id": "h4-uWBp98L80dbyFPl8JP",
+ "type": "arrow"
+ }
+ ],
+ "updated": 1776907157391,
+ "link": null,
+ "locked": false
+ },
+ {
+ "id": "_Y1mn5JizdTC-Qje9WFPR",
+ "type": "text",
+ "x": 1319.1649581240827,
+ "y": 466.8335531328279,
+ "width": 78.33992004394531,
+ "height": 25,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "acV",
+ "roundness": null,
+ "seed": 1992487412,
+ "version": 486,
+ "versionNonce": 1236142964,
+ "isDeleted": false,
+ "boundElements": null,
+ "updated": 1776907157391,
+ "link": null,
+ "locked": false,
+ "text": "L2 Block",
+ "fontSize": 20,
+ "fontFamily": 6,
+ "textAlign": "center",
+ "verticalAlign": "middle",
+ "containerId": "-Soy-VeT2jJAcLl-Rgswi",
+ "originalText": "L2 Block",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "YBQSYHnJOQEICH-q-EEH8",
+ "type": "rectangle",
+ "x": 1302.2450536877618,
+ "y": 507.0806234453279,
+ "width": 113.19531249999987,
+ "height": 51.718750000000014,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "ae",
+ "roundness": {
+ "type": 3
+ },
+ "seed": 1088101161,
+ "version": 1873,
+ "versionNonce": 205815028,
+ "isDeleted": false,
+ "boundElements": [
+ {
+ "id": "SACVN4gDKAMuHaLumbstV",
+ "type": "text"
+ },
+ {
+ "id": "wStmzSxEYTFkoaz7LLV36",
+ "type": "arrow"
+ }
+ ],
+ "updated": 1776907157391,
+ "link": null,
+ "locked": false
+ },
+ {
+ "id": "SACVN4gDKAMuHaLumbstV",
+ "type": "text",
+ "x": 1319.6727499157892,
+ "y": 520.4399984453279,
+ "width": 78.33992004394531,
+ "height": 25,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "aeV",
+ "roundness": null,
+ "seed": 1416227572,
+ "version": 529,
+ "versionNonce": 1712373364,
+ "isDeleted": false,
+ "boundElements": null,
+ "updated": 1776907157391,
+ "link": null,
+ "locked": false,
+ "text": "L2 Block",
+ "fontSize": 20,
+ "fontFamily": 6,
+ "textAlign": "center",
+ "verticalAlign": "middle",
+ "containerId": "YBQSYHnJOQEICH-q-EEH8",
+ "originalText": "L2 Block",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "wStmzSxEYTFkoaz7LLV36",
+ "type": "arrow",
+ "x": 1358.7427099377617,
+ "y": 564.7993734453279,
+ "width": 320.56220170966185,
+ "height": 58.8401726392168,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "ah",
+ "roundness": null,
+ "seed": 552047785,
+ "version": 1847,
+ "versionNonce": 1325483124,
+ "isDeleted": false,
+ "boundElements": [],
+ "updated": 1776907210566,
+ "link": null,
+ "locked": false,
+ "points": [
+ [
+ 0,
+ 0
+ ],
+ [
+ 0,
+ 58.8401726392168
+ ],
+ [
+ -320.56220170966185,
+ 58.8401726392168
+ ]
+ ],
+ "startBinding": {
+ "elementId": "YBQSYHnJOQEICH-q-EEH8",
+ "mode": "orbit",
+ "fixedPoint": [
+ 0.4991165711919381,
+ 1.1160120845921446
+ ]
+ },
+ "endBinding": {
+ "elementId": "YPd16UrotptPE2CScsUXm",
+ "mode": "orbit",
+ "fixedPoint": [
+ 1.010538851199099,
+ 0.49941447263649563
+ ]
+ },
+ "startArrowhead": null,
+ "endArrowhead": "arrow",
+ "elbowed": true,
+ "moveMidPointsWithElement": false,
+ "fixedSegments": null,
+ "startIsSpecial": null,
+ "endIsSpecial": null
+ },
+ {
+ "id": "S1rIQ7wNmh8gz6MVnKaA1",
+ "type": "rectangle",
+ "x": 1305.983973859383,
+ "y": 189.48009621574158,
+ "width": 98.00781250000003,
+ "height": 60.56211641117375,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "aj",
+ "roundness": {
+ "type": 3
+ },
+ "seed": 2078972233,
+ "version": 1472,
+ "versionNonce": 966963572,
+ "isDeleted": false,
+ "boundElements": [
+ {
+ "id": "r1Vzq0m2xNVsgih_L65yW",
+ "type": "text"
+ },
+ {
+ "id": "29SQOsQVVbnXa-WbpyKcE",
+ "type": "arrow"
+ }
+ ],
+ "updated": 1776907157391,
+ "link": null,
+ "locked": false
+ },
+ {
+ "id": "r1Vzq0m2xNVsgih_L65yW",
+ "type": "text",
+ "x": 1331.0579103217854,
+ "y": 207.26115442132846,
+ "width": 47.85993957519531,
+ "height": 25,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "ak",
+ "roundness": null,
+ "seed": 475670732,
+ "version": 470,
+ "versionNonce": 582247156,
+ "isDeleted": false,
+ "boundElements": null,
+ "updated": 1776907157391,
+ "link": null,
+ "locked": false,
+ "text": "State",
+ "fontSize": 20,
+ "fontFamily": 6,
+ "textAlign": "center",
+ "verticalAlign": "middle",
+ "containerId": "S1rIQ7wNmh8gz6MVnKaA1",
+ "originalText": "State",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "NPwUD4jlZE_BuBlSwFdly",
+ "type": "rectangle",
+ "x": 1249.6896242771181,
+ "y": 321.2908937714552,
+ "width": 210.6015625,
+ "height": 60.2734375,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "am",
+ "roundness": {
+ "type": 3
+ },
+ "seed": 1387619977,
+ "version": 1273,
+ "versionNonce": 831775860,
+ "isDeleted": false,
+ "boundElements": [
+ {
+ "id": "Q4EDmllklpRQX36UfHu0k",
+ "type": "text"
+ },
+ {
+ "id": "h4-uWBp98L80dbyFPl8JP",
+ "type": "arrow"
+ },
+ {
+ "id": "29SQOsQVVbnXa-WbpyKcE",
+ "type": "arrow"
+ },
+ {
+ "id": "oY8KgsRVyF616iu5Pu110",
+ "type": "arrow"
+ }
+ ],
+ "updated": 1776907157391,
+ "link": null,
+ "locked": false
+ },
+ {
+ "id": "Q4EDmllklpRQX36UfHu0k",
+ "type": "text",
+ "x": 1263.6205095920595,
+ "y": 338.9276125214552,
+ "width": 182.7397918701172,
+ "height": 25,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "amG",
+ "roundness": null,
+ "seed": 1963854796,
+ "version": 441,
+ "versionNonce": 201799156,
+ "isDeleted": false,
+ "boundElements": null,
+ "updated": 1776907157391,
+ "link": null,
+ "locked": false,
+ "text": "Batch and compress",
+ "fontSize": 20,
+ "fontFamily": 6,
+ "textAlign": "center",
+ "verticalAlign": "middle",
+ "containerId": "NPwUD4jlZE_BuBlSwFdly",
+ "originalText": "Batch and compress",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "h4-uWBp98L80dbyFPl8JP",
+ "type": "arrow",
+ "x": 1355.2897117489204,
+ "y": 387.5643312714552,
+ "width": 2.77827986283296,
+ "height": 59.90984686137267,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "amV",
+ "roundness": {
+ "type": 2
+ },
+ "seed": 1073521351,
+ "version": 1672,
+ "versionNonce": 789862260,
+ "isDeleted": false,
+ "boundElements": [],
+ "updated": 1776907157391,
+ "link": null,
+ "locked": false,
+ "points": [
+ [
+ 0,
+ 0
+ ],
+ [
+ 2.77827986283296,
+ 59.90984686137267
+ ]
+ ],
+ "startBinding": {
+ "elementId": "NPwUD4jlZE_BuBlSwFdly",
+ "mode": "orbit",
+ "fixedPoint": [
+ 0.5001,
+ 1
+ ]
+ },
+ "endBinding": {
+ "elementId": "-Soy-VeT2jJAcLl-Rgswi",
+ "mode": "orbit",
+ "fixedPoint": [
+ 0.5001,
+ 0
+ ]
+ },
+ "startArrowhead": null,
+ "endArrowhead": "arrow",
+ "elbowed": false,
+ "moveMidPointsWithElement": false
+ },
+ {
+ "id": "29SQOsQVVbnXa-WbpyKcE",
+ "type": "arrow",
+ "x": 1355.0103048372293,
+ "y": 315.2908937714552,
+ "width": 0.01146310045737664,
+ "height": 59.248681144539916,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "dashed",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "ao",
+ "roundness": {
+ "type": 2
+ },
+ "seed": 836214569,
+ "version": 1023,
+ "versionNonce": 117524724,
+ "isDeleted": false,
+ "boundElements": [],
+ "updated": 1776907157391,
+ "link": null,
+ "locked": false,
+ "points": [
+ [
+ 0,
+ 0
+ ],
+ [
+ -0.01146310045737664,
+ -59.248681144539916
+ ]
+ ],
+ "startBinding": {
+ "elementId": "NPwUD4jlZE_BuBlSwFdly",
+ "mode": "orbit",
+ "fixedPoint": [
+ 0.5001,
+ 0
+ ]
+ },
+ "endBinding": {
+ "elementId": "S1rIQ7wNmh8gz6MVnKaA1",
+ "mode": "orbit",
+ "fixedPoint": [
+ 0.5001,
+ 1
+ ]
+ },
+ "startArrowhead": null,
+ "endArrowhead": "arrow",
+ "elbowed": false,
+ "moveMidPointsWithElement": false
+ },
+ {
+ "id": "oY8KgsRVyF616iu5Pu110",
+ "type": "arrow",
+ "x": 1198.8629222017832,
+ "y": 350.3586863751616,
+ "width": 44.82670207533488,
+ "height": 0.9480571800942243,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "dashed",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "ap",
+ "roundness": {
+ "type": 2
+ },
+ "seed": 225785161,
+ "version": 1125,
+ "versionNonce": 122948212,
+ "isDeleted": false,
+ "boundElements": [],
+ "updated": 1776907157391,
+ "link": null,
+ "locked": false,
+ "points": [
+ [
+ 0,
+ 0
+ ],
+ [
+ 44.82670207533488,
+ 0.9480571800942243
+ ]
+ ],
+ "startBinding": {
+ "elementId": "g5h7FCtQzjX8gjdf9O_wX",
+ "mode": "orbit",
+ "fixedPoint": [
+ 0.9999999999999994,
+ 0.5001
+ ]
+ },
+ "endBinding": {
+ "elementId": "NPwUD4jlZE_BuBlSwFdly",
+ "mode": "orbit",
+ "fixedPoint": [
+ 0,
+ 0.5001
+ ]
+ },
+ "startArrowhead": null,
+ "endArrowhead": "arrow",
+ "elbowed": false,
+ "moveMidPointsWithElement": false
+ },
+ {
+ "id": "6X8h3a08CIRc2cF__KoPW",
+ "type": "arrow",
+ "x": 871.584153425852,
+ "y": 269.0084340106532,
+ "width": 0.2658956917781552,
+ "height": 44.61912466170543,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "ax",
+ "roundness": {
+ "type": 2
+ },
+ "seed": 1340889321,
+ "version": 1226,
+ "versionNonce": 1545513332,
+ "isDeleted": false,
+ "boundElements": [],
+ "updated": 1776906801002,
+ "link": null,
+ "locked": false,
+ "points": [
+ [
+ 0,
+ 0
+ ],
+ [
+ 0.2658956917781552,
+ 44.61912466170543
+ ]
+ ],
+ "startBinding": {
+ "elementId": "EHtfy-cHUqfq2AiT_VQwe",
+ "mode": "orbit",
+ "fixedPoint": [
+ 0.5001,
+ 1.0000000000000002
+ ]
+ },
+ "endBinding": {
+ "elementId": "uBLxCVVq9Pze24Y_GEgDH",
+ "mode": "orbit",
+ "fixedPoint": [
+ 0.5001,
+ 0
+ ]
+ },
+ "startArrowhead": null,
+ "endArrowhead": "arrow",
+ "elbowed": false,
+ "moveMidPointsWithElement": false
+ },
+ {
+ "id": "4bu8Bxanc5hAzbcrZPGld",
+ "type": "text",
+ "x": 768.6293111882622,
+ "y": 593.5607665484534,
+ "width": 201.88792419433594,
+ "height": 45,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "ay",
+ "roundness": null,
+ "seed": 1153988428,
+ "version": 203,
+ "versionNonce": 53579380,
+ "isDeleted": false,
+ "boundElements": null,
+ "updated": 1776907393376,
+ "link": null,
+ "locked": false,
+ "text": "Parent chain",
+ "fontSize": 36,
+ "fontFamily": 6,
+ "textAlign": "center",
+ "verticalAlign": "top",
+ "containerId": null,
+ "originalText": "Parent chain",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "yD3jwQeRda30A8KibqNWG",
+ "type": "arrow",
+ "x": 760.563963100191,
+ "y": 349.6642774223586,
+ "width": 72.36422026968341,
+ "height": 237.4602151583457,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "az",
+ "roundness": null,
+ "seed": 450459591,
+ "version": 2645,
+ "versionNonce": 1865958772,
+ "isDeleted": false,
+ "boundElements": [],
+ "updated": 1776907402113,
+ "link": null,
+ "locked": false,
+ "points": [
+ [
+ 0,
+ 0
+ ],
+ [
+ -72.36422026968341,
+ 0
+ ],
+ [
+ -72.36422026968341,
+ 237.4602151583457
+ ]
+ ],
+ "startBinding": {
+ "elementId": "uBLxCVVq9Pze24Y_GEgDH",
+ "mode": "orbit",
+ "fixedPoint": [
+ -0.02848981711614794,
+ 0.4983408943616328
+ ]
+ },
+ "endBinding": {
+ "elementId": "FyoxZ6aR9xA3_JseIXQH3",
+ "mode": "orbit",
+ "fixedPoint": [
+ 0.919487874538473,
+ -0.05046266372041373
+ ]
+ },
+ "startArrowhead": "arrow",
+ "endArrowhead": "arrow",
+ "elbowed": true,
+ "moveMidPointsWithElement": false,
+ "fixedSegments": null,
+ "startIsSpecial": null,
+ "endIsSpecial": null
+ },
+ {
+ "id": "OlPEGs1DalbXOFarCSWu9",
+ "type": "arrow",
+ "x": 526.5967300688112,
+ "y": 271.34508512001764,
+ "width": 3.4742837981611956,
+ "height": 312.5646114612473,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "b00",
+ "roundness": {
+ "type": 2
+ },
+ "seed": 1290883527,
+ "version": 2466,
+ "versionNonce": 227599348,
+ "isDeleted": false,
+ "boundElements": [
+ {
+ "type": "text",
+ "id": "aJQddyHClvUA-26RiAO9h"
+ }
+ ],
+ "updated": 1776907402113,
+ "link": null,
+ "locked": false,
+ "points": [
+ [
+ 0,
+ 0
+ ],
+ [
+ 3.4742837981611956,
+ 312.5646114612473
+ ]
+ ],
+ "startBinding": {
+ "elementId": "WRoCFoyelPj4qRCEvtRUj",
+ "mode": "orbit",
+ "fixedPoint": [
+ 0.5001,
+ 1
+ ]
+ },
+ "endBinding": {
+ "elementId": "FyoxZ6aR9xA3_JseIXQH3",
+ "mode": "orbit",
+ "fixedPoint": [
+ 0.19959119551740784,
+ 0.19959119551740728
+ ]
+ },
+ "startArrowhead": null,
+ "endArrowhead": "arrow",
+ "elbowed": false,
+ "moveMidPointsWithElement": false
+ },
+ {
+ "id": "aJQddyHClvUA-26RiAO9h",
+ "type": "text",
+ "x": 469.0134739731353,
+ "y": 405.77669538113264,
+ "width": 113.91987609863281,
+ "height": 20,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "b01",
+ "roundness": null,
+ "seed": 1186221577,
+ "version": 38,
+ "versionNonce": 1084449612,
+ "isDeleted": false,
+ "boundElements": [],
+ "updated": 1776906703273,
+ "link": null,
+ "locked": false,
+ "text": "Retryable ticket",
+ "fontSize": 16,
+ "fontFamily": 6,
+ "textAlign": "center",
+ "verticalAlign": "middle",
+ "containerId": "OlPEGs1DalbXOFarCSWu9",
+ "originalText": "Retryable ticket",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "YCNKEb3yDALHhj6IwTcGG",
+ "type": "arrow",
+ "x": 574.2928172034125,
+ "y": 226.55307963087182,
+ "width": 185.9337394273789,
+ "height": 1.2809424679649055,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "b02",
+ "roundness": {
+ "type": 2
+ },
+ "seed": 1619859015,
+ "version": 1155,
+ "versionNonce": 276023284,
+ "isDeleted": false,
+ "boundElements": [
+ {
+ "type": "text",
+ "id": "jFugxcLrsDHrRBASInA0N"
+ }
+ ],
+ "updated": 1776906801001,
+ "link": null,
+ "locked": false,
+ "points": [
+ [
+ 0,
+ 0
+ ],
+ [
+ 185.9337394273789,
+ -1.2809424679649055
+ ]
+ ],
+ "startBinding": {
+ "elementId": "WRoCFoyelPj4qRCEvtRUj",
+ "mode": "inside",
+ "fixedPoint": [
+ 0.9874364518202536,
+ 0.5257519863791147
+ ]
+ },
+ "endBinding": {
+ "elementId": "EHtfy-cHUqfq2AiT_VQwe",
+ "mode": "orbit",
+ "fixedPoint": [
+ 0,
+ 0.5001
+ ]
+ },
+ "startArrowhead": null,
+ "endArrowhead": "arrow",
+ "elbowed": false,
+ "moveMidPointsWithElement": false
+ },
+ {
+ "id": "jFugxcLrsDHrRBASInA0N",
+ "type": "text",
+ "x": 626.3460304095985,
+ "y": 192.34588401950944,
+ "width": 83.39195251464844,
+ "height": 20,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "b03",
+ "roundness": null,
+ "seed": 1474986311,
+ "version": 32,
+ "versionNonce": 683728076,
+ "isDeleted": false,
+ "boundElements": [],
+ "updated": 1776906703273,
+ "link": null,
+ "locked": false,
+ "text": "Transaction",
+ "fontSize": 16,
+ "fontFamily": 6,
+ "textAlign": "center",
+ "verticalAlign": "middle",
+ "containerId": "YCNKEb3yDALHhj6IwTcGG",
+ "originalText": "Transaction",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "Xs2DUq02O1tRvKDXn9AhI",
+ "type": "arrow",
+ "x": 983.1655256001909,
+ "y": 349.8127748139282,
+ "width": 53.19681367884573,
+ "height": 0.3765452034644454,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "b04",
+ "roundness": {
+ "type": 2
+ },
+ "seed": 1065353639,
+ "version": 830,
+ "versionNonce": 1025690356,
+ "isDeleted": false,
+ "boundElements": [],
+ "updated": 1776907157391,
+ "link": null,
+ "locked": false,
+ "points": [
+ [
+ 0,
+ 0
+ ],
+ [
+ 53.19681367884573,
+ 0.3765452034644454
+ ]
+ ],
+ "startBinding": {
+ "elementId": "uBLxCVVq9Pze24Y_GEgDH",
+ "mode": "orbit",
+ "fixedPoint": [
+ 1,
+ 0.5001
+ ]
+ },
+ "endBinding": {
+ "elementId": "g5h7FCtQzjX8gjdf9O_wX",
+ "mode": "orbit",
+ "fixedPoint": [
+ 0,
+ 0.5001
+ ]
+ },
+ "startArrowhead": null,
+ "endArrowhead": "arrow",
+ "elbowed": false,
+ "moveMidPointsWithElement": false
+ }
+ ],
+ "appState": {
+ "gridSize": 20,
+ "gridStep": 5,
+ "gridModeEnabled": false,
+ "viewBackgroundColor": "#ffffff",
+ "lockedMultiSelections": {}
+ },
+ "files": {
+ "33b0bce30ea98d549bc1aca14f7485a6f33d608c": {
+ "mimeType": "image/svg+xml",
+ "id": "33b0bce30ea98d549bc1aca14f7485a6f33d608c",
+ "dataURL": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJMYXllcl8xIiBkYXRhLW5hbWU9IkxheWVyIDEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIj4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiBub25lOwogICAgICAgIHN0cm9rZTogIzIxMzE0NzsKICAgICAgICBzdHJva2UtbGluZWNhcDogcm91bmQ7CiAgICAgICAgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDsKICAgICAgICBzdHJva2Utd2lkdGg6IDEuMnB4OwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8ZyBpZD0ib25lX3NpZ2xlX21hbl9hdmF0YXIiIGRhdGEtbmFtZT0ib25lIHNpZ2xlIG1hbiBhdmF0YXIiPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTQuNjMsMzcuMjR2OC43NyIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMzIuMTgsMzcuMjR2OC43NyIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjMuNDEsMjUuNzdjLTEuNDcsMC0yLjgzLS4zOS00LjAyLTEuMDctMi40NC0xLjQtNC4wNy00LjAyLTQuMDctNy4wM3YtNC4wNWMwLTQuNDcsMy42My04LjEsOC4xLTguMXM4LjEsMy42Myw4LjEsOC4xdjQuMDVjMCwyLjk3LTEuNjUsNS41Ni00LjA1LDYuOTd2Mi40OGw1LjY2LDEuNjZjMy40NSwxLjAxLDUuODEsNC4xOCw1LjgxLDcuNzd2OC4xMXMtNC43MiwyLjctMTUuNTIsMi43LTE1LjUyLTIuNy0xNS41Mi0yLjd2LTguMTFjMC0zLjU5LDIuMzctNi43Niw1LjgxLTcuNzdsNS42Ni0xLjY2di0yLjAyIi8+CiAgPC9nPgo8L3N2Zz4=",
+ "created": 1776896296310,
+ "lastRetrieved": 1776896296310
+ },
+ "04ee4bc3228fceccb6fd0820bf0ed8c0232b9edf": {
+ "mimeType": "image/svg+xml",
+ "id": "04ee4bc3228fceccb6fd0820bf0ed8c0232b9edf",
+ "dataURL": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJMYXllcl8xIiBkYXRhLW5hbWU9IkxheWVyIDEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIj4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiAjMjEzMTQ3OwogICAgICAgIHN0cm9rZTogIzJkMzY0ZDsKICAgICAgICBzdHJva2UtbWl0ZXJsaW1pdDogMTA7CiAgICAgICAgc3Ryb2tlLXdpZHRoOiAuNHB4OwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0zOS4yMSwzNy44NUg5Ljk1Yy0uMjksMC0uNTItLjIzLS41Mi0uNTJ2LTE5LjI2YzAtLjI5LjIzLS41Mi41Mi0uNTJoMjkuMjZjLjI5LDAsLjUyLjIzLjUyLjUydjE5LjI2YzAsLjI5LS4yMy41Mi0uNTIuNTJaTTEwLjQ3LDM2LjgxaDI4LjIydi0xOC4yMkgxMC40N3YxOC4yMloiLz4KICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yNC41OCwzMS45M2MtLjEzLDAtLjI1LS4wNS0uMzUtLjE0bC0xNC42My0xMy4zM2MtLjE2LS4xNS0uMjEtLjM3LS4xNC0uNTcuMDgtLjIuMjctLjMzLjQ5LS4zM2gyOS4yNmMuMjIsMCwuNDEuMTMuNDkuMzMuMDguMi4wMi40My0uMTQuNTdsLTE0LjYzLDEzLjMzYy0uMS4wOS0uMjMuMTQtLjM1LjE0Wk0xMS4zLDE4LjU5bDEzLjI4LDEyLjEsMTMuMjgtMTIuMUgxMS4zWiIvPgogIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTM5LjIxLDM3Ljg1SDkuOTVjLS4yMiwwLS40Mi0uMTQtLjUtLjM2LS4wNy0uMjEsMC0uNDUuMTgtLjU4bDExLjU5LTguNjljLjIzLS4xNy41Ni0uMTMuNzMuMS4xNy4yMy4xMy41Ni0uMS43M2wtMTAuMzQsNy43NWgyNi4xM2wtMTAuMjEtNy42NmMtLjIzLS4xNy0uMjgtLjUtLjEtLjczLjE3LS4yMy41LS4yOC43My0uMWwxMS40Niw4LjZjLjE4LjE0LjI1LjM3LjE4LjU4LS4wNy4yMS0uMjcuMzYtLjUuMzZaIi8+Cjwvc3ZnPg==",
+ "created": 1776896514541,
+ "lastRetrieved": 1776896514541
+ }
+ }
+}
\ No newline at end of file
diff --git a/static/diagrams/haw-transaction-lifecycle.manifest.xml b/static/diagrams/haw-transaction-lifecycle.manifest.xml
new file mode 100644
index 0000000000..f8b0700c23
--- /dev/null
+++ b/static/diagrams/haw-transaction-lifecycle.manifest.xml
@@ -0,0 +1,26 @@
+
+
+
+
+
diff --git a/static/diagrams/stylus-learning-paths.drawio b/static/diagrams/stylus-learning-paths.drawio
new file mode 100644
index 0000000000..f4145e8499
--- /dev/null
+++ b/static/diagrams/stylus-learning-paths.drawio
@@ -0,0 +1,171 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/diagrams/stylus-learning-paths.png b/static/diagrams/stylus-learning-paths.png
new file mode 100644
index 0000000000..497664a7c3
Binary files /dev/null and b/static/diagrams/stylus-learning-paths.png differ
diff --git a/static/img/.$haw-ticket-submission.drawio.bkp b/static/img/.$haw-ticket-submission.drawio.bkp
new file mode 100644
index 0000000000..4f7fd733cf
--- /dev/null
+++ b/static/img/.$haw-ticket-submission.drawio.bkp
@@ -0,0 +1,97 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/img/haw-automatic-redemption-of-the-ticket.png b/static/img/haw-automatic-redemption-of-the-ticket.png
deleted file mode 100644
index 1f06013a62..0000000000
Binary files a/static/img/haw-automatic-redemption-of-the-ticket.png and /dev/null differ
diff --git a/static/img/haw-bypassing-the-sequencer.drawio b/static/img/haw-bypassing-the-sequencer.drawio
new file mode 100644
index 0000000000..beb9777d19
--- /dev/null
+++ b/static/img/haw-bypassing-the-sequencer.drawio
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/static/img/haw-canonical-bridge.svg b/static/img/haw-canonical-bridge.svg
deleted file mode 100644
index 6c55f27a5e..0000000000
--- a/static/img/haw-canonical-bridge.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
-
diff --git a/static/img/haw-challenge-manager.svg b/static/img/haw-challenge-manager.svg
deleted file mode 100755
index 1aa7c593dd..0000000000
--- a/static/img/haw-challenge-manager.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-
diff --git a/static/img/haw-interactive-fraud-proof.svg b/static/img/haw-interactive-fraud-proof.svg
deleted file mode 100755
index 7b403fd17a..0000000000
--- a/static/img/haw-interactive-fraud-proof.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-