Drawio Academic Skills

# macOS
.DS_Store

# Tooling artifacts
.playwright-mcp/
logs/

# Auto-update timestamp (written by SKILL.md step 0)
.last_update

# Superpowers skill files (local-only)
docs/superpowers

interface:
  display_name: 'Draw.io Academic Figures'
  short_description: 'Create publication-ready draw.io figures with YAML sidecars, academic checks, Desktop export, and base-backed style presets'
  brand_color: '#2563EB'

policy:
  allow_implicit_invocation: true

capabilities:
  - Create academic-paper draw.io figures from natural language or YAML specs
  - Generate .drawio, .spec.yaml, .arch.json, and SVG as the default offline bundle
  - Export PNG, SVG, PDF, and JPG through draw.io Desktop when available
  - Generate diagrams.net browser URLs when Desktop export is unavailable
  - Apply user style presets and sibling base bundled presets
  - Self-check exported images and support targeted refinement loops
  - Work without MCP through the sibling base CLI exports and diagrams.net URL fallback

prerequisites:
  - Node 20+
  - Sibling base skill installed at ../drawio
  - draw.io Desktop app for PNG/PDF/JPG and embedded SVG exports

interface:
  display_name: "Draw.io Academic Figures"
  short_description: "Create publication-ready draw.io figures with YAML sidecars, academic checks, Desktop export, and base-backed style presets"
  brand_color: "#2563EB"

policy:
  allow_implicit_invocation: true

capabilities:
  - Create academic-paper draw.io figures from natural language or YAML specs
  - Generate .drawio, .spec.yaml, .arch.json, and SVG as the default offline bundle
  - Export PNG, SVG, PDF, and JPG through draw.io Desktop when available
  - Generate diagrams.net browser URLs when Desktop export is unavailable
  - Apply user style presets and sibling base bundled presets
  - Self-check exported images and support targeted refinement loops
  - Work without MCP through the sibling base CLI exports and diagrams.net URL fallback

prerequisites:
  - Node 20+
  - draw.io Desktop app for PNG/PDF/JPG and embedded SVG exports

[
  {
    "id": "academic-ieee-campus-network",
    "profile": "academic-paper",
    "prompt": "Create an IEEE-style campus network paper figure with core, distribution, and access layers in grayscale. Return final .drawio and .svg, with sidecars in a work directory."
  },
  {
    "id": "academic-research-workflow-paper",
    "profile": "academic-paper",
    "prompt": "Create a research workflow figure for a manuscript showing data collection, preprocessing, modeling, validation, and reporting."
  },
  {
    "id": "academic-system-architecture-paper",
    "profile": "academic-paper",
    "prompt": "Create a system architecture paper figure with client, API, worker, and storage layers. Make it readable in a two-column paper."
  },
  {
    "id": "academic-ablation-pipeline",
    "profile": "academic-paper",
    "prompt": "Create an ablation-study figure comparing a baseline and two variants before a shared evaluation block for a conference paper."
  },
  {
    "id": "academic-paper-evidence-chain-preview",
    "profile": "academic-paper",
    "prompt": "I have a draft optimization paper about traffic-signal control. Build a publication figure from the paper logic, not just a list of sections: problem gap, sensor data, assumptions, multi-agent controller, simulation scenarios, metrics, results, and contribution. Use an image-generation concept preview if appropriate, but don't send raw unpublished text externally without asking."
  },
  {
    "id": "academic-thesis-word-a4-bundle",
    "profile": "academic-paper",
    "prompt": "Create an A4-safe thesis figure for Word export. Deliver the editable bundle plus SVG, and include PNG only if draw.io Desktop is available."
  },
  {
    "id": "academic-formula-publication-figure",
    "profile": "academic-paper",
    "prompt": "Create a publication-ready training pipeline figure with a visible loss formula $$L = -\\sum y_i \\log(\\hat{y}_i)$$ and an inline metric note \\(F_1\\)."
  },
  {
    "id": "academic-replication-text-formula-edge-labels",
    "profile": "academic-paper",
    "prompt": "Replicate the uploaded academic figure into an editable bundle. Preserve caption, legend, formula block, standalone text boxes, and edge labels with their relative positions."
  },
  {
    "id": "academic-image-improvement-preview-gate",
    "profile": "academic-paper",
    "prompt": "Redraw the uploaded framework screenshot as a cleaner journal figure. Improve the hierarchy and academic tone, but preserve the visible caption, legend, callouts, and edge labels. Use a visual concept preview before final draw.io if that helps, then deliver editable .drawio and .svg with sidecars in a work directory."
  },
  {
    "id": "academic-desktop-png-pdf-unavailable-fallback",
    "profile": "academic-paper",
    "prompt": "Export the final paper figure as PNG and PDF for submission, but draw.io Desktop might not be installed."
  }
]

timestamp	commit	skill	old_score	new_score	status	dimension	note	eval_mode
2026-04-27T11:15:25+08:00	baseline-agent	drawio-academic-skills	-	82.8	baseline	-	Independent verifier baseline; weakest dimensions were checkpoint design, boundary coverage, and Desktop fallback clarity	dry_run
2026-04-27T11:15:25+08:00	working-tree	drawio-academic-skills	82.8	89.2	keep	boundary-coverage	Added non-negotiable offline/MCP-free contract, preflight, edit round-trip, Desktop fallback, failure recovery, completion report, and regression assertions	dry_run

{
  "skill_name": "drawio-academic-skills",
  "version": "0.1.0",
  "evals": [
    {
      "id": "academic-ieee-campus-network",
      "prompt": "Create an IEEE-style campus network paper figure with core, distribution, and access layers in grayscale. Return the final .drawio and .svg, with sidecars in a work directory.",
      "expected_output": "A grayscale-safe IEEE campus network figure generated through the sibling base CLI with clean final outputs.",
      "files": [],
      "assertions": [
        "Uses drawio-academic-skills overlay policy",
        "Calls or references sibling ../drawio for CLI execution",
        "Sets meta.profile to academic-paper",
        "Sets meta.figureType to architecture",
        "Includes caption or legend guidance for IEEE-style symbols"
      ]
    },
    {
      "id": "academic-research-workflow-paper",
      "prompt": "Create a research workflow figure for a manuscript showing data collection, preprocessing, modeling, validation, and reporting.",
      "expected_output": "A publication-ready workflow figure with default final .drawio and .svg outputs.",
      "files": [],
      "assertions": [
        "Sets meta.figureType to workflow",
        "Uses academic or academic-color theme based on color policy",
        "Default final deliverables are .drawio and .svg, with .spec.yaml and .arch.json in a work directory",
        "Does not require MCP or live backend"
      ]
    },
    {
      "id": "academic-system-architecture-paper",
      "prompt": "Create a system architecture paper figure with client, API, worker, and storage layers. Make it readable in a two-column paper.",
      "expected_output": "A paper-facing architecture diagram with compact labels and publication checks.",
      "files": ["skills/drawio-academic-skills/references/examples/system-architecture-paper.yaml"],
      "assertions": [
        "Sets meta.figureType to architecture",
        "Uses concise labels before shrinking fonts",
        "Preserves caption-ready title and one-sentence description",
        "Runs sibling base CLI validation with strict warnings or equivalent"
      ]
    },
    {
      "id": "academic-yolo-model-architecture",
      "prompt": "Create a paper-ready YOLO-style object detection architecture figure. Show input image, backbone, neck/fusion, detection heads, and loss/output. Use editable draw.io primitives, compact labels, and deliver .drawio plus .svg with sidecars in a work directory.",
      "expected_output": "An academic model-architecture figure using modules and deep-learning semantic types rather than generic boxes.",
      "files": ["skills/drawio-academic-skills/references/examples/yolo-model-architecture-paper.yaml"],
      "assertions": [
        "Uses drawio-academic-skills overlay policy for the publication-facing request",
        "Sets meta.profile to academic-paper and meta.figureType to architecture",
        "Uses modules for stages such as input, backbone, fusion or neck, head, and loss/output",
        "Uses deep-learning semantic node types such as input, conv, pool, attention, tensor3d, loss, and output",
        "Keeps labels compact and uses a legend or caption instead of long prose inside layer blocks",
        "Delivers final .drawio and .svg, with .spec.yaml and .arch.json in .drawio-tmp/<name>/"
      ]
    },
    {
      "id": "academic-max-pooling-operation-figure",
      "prompt": "Create a publication-ready max-pooling operation figure using native draw.io cells. Show a 2 x 2 input window, the max operation, the output value, a short formula, and arrow labels that do not overlap connector lines.",
      "expected_output": "A compact academic operation figure built from native grid cells, formula/text nodes, and offset connector labels.",
      "files": ["skills/drawio-academic-skills/references/examples/max-pooling-operation-paper.yaml"],
      "assertions": [
        "Sets meta.profile to academic-paper and maps the operation to an existing meta.figureType value",
        "Builds the grid from native editable draw.io cells instead of embedding a raster image",
        "Uses explicit bounds for grid cells, formula, and callout or label placement",
        "Uses supported math delimiters for the formula",
        "Uses labelOffset or equivalent placement so edge labels sit off connector lines",
        "Verifies exported SVG or Desktop-exported artifacts before any browser screenshot"
      ]
    },
    {
      "id": "academic-ablation-pipeline",
      "prompt": "Create an ablation-study figure comparing a baseline and two variants before a shared evaluation block for a conference paper.",
      "expected_output": "A workflow-style ablation pipeline suitable for publication.",
      "files": [],
      "assertions": [
        "Sets meta.figureType to workflow",
        "Shows baseline and at least two variant branches",
        "Branches converge at shared evaluation",
        "Includes legend or caption guidance when line styles or colors encode meaning"
      ]
    },
    {
      "id": "academic-paper-evidence-chain-preview",
      "prompt": "I have a draft optimization paper about traffic-signal control. Build a publication figure from the paper logic, not just a list of sections: problem gap, sensor data, assumptions, multi-agent controller, simulation scenarios, metrics, results, and contribution. Use an image-generation concept preview if appropriate, but don't send raw unpublished text externally without asking.",
      "expected_output": "A paper-derived academic figure workflow that extracts the research evidence chain, confirms a diagram plan, optionally uses privacy-gated image preview, then renders editable draw.io artifacts.",
      "files": [],
      "assertions": [
        "Identifies the source as a paper-derived figure and extracts a research evidence chain",
        "Maps the figure to an existing meta.figureType value rather than inventing a new schema field",
        "Presents a diagram plan for confirmation before rendering",
        "Uses optional image-generation preview only after plan confirmation and privacy approval",
        "Keeps YAML as the canonical source and final .drawio/.svg as the authoritative artifacts"
      ]
    },
    {
      "id": "academic-thesis-word-a4-bundle",
      "prompt": "Create an A4-safe thesis figure for Word export. Deliver the editable bundle plus SVG, and include PNG only if draw.io Desktop is available.",
      "expected_output": "An academic bundle with Word/A4 export policy and honest Desktop fallback.",
      "files": [],
      "assertions": [
        "Performs venue/audience preflight for thesis or Word",
        "Default final deliverables include .drawio and .svg, with sidecars in a work directory",
        "Treats PNG as optional Desktop-enhanced export",
        "Reports missing PNG clearly if Desktop is unavailable"
      ]
    },
    {
      "id": "academic-formula-publication-figure",
      "prompt": "Create a publication-ready training pipeline figure with a visible loss formula $$L = -\\sum y_i \\log(\\hat{y}_i)$$ and an inline metric note \\(F_1\\).",
      "expected_output": "A formula-bearing academic workflow figure with formula and text fidelity checks.",
      "files": [],
      "assertions": [
        "Loads or follows math-typesetting guidance from sibling base",
        "Uses only official math delimiters",
        "Keeps formulas readable and unclipped",
        "Sets meta.profile to academic-paper and meta.figureType to workflow"
      ]
    },
    {
      "id": "academic-replication-text-formula-edge-labels",
      "prompt": "Replicate the uploaded academic figure into an editable bundle. Preserve caption, legend, formula block, standalone text boxes, and edge labels with their relative positions.",
      "expected_output": "An academic replication bundle with explicit text placement and label offsets.",
      "files": ["skills/drawio/evals/fixtures/replicate-academic-highlight.svg"],
      "assertions": [
        "Sets meta.source to replicated",
        "Sets meta.profile to academic-paper",
        "Uses explicit bounds for standalone text, captions, formulas, or callouts when placement matters",
        "Uses labelOffset for connector labels that would otherwise sit on lines",
        "Records a visual/text-position self-check before completion",
        "Uses exported SVG or Desktop-exported artifacts for visual verification before any browser screenshot"
      ]
    },
    {
      "id": "academic-reference-redraw-native-scientific",
      "prompt": "Redraw the uploaded research framework screenshot as an editable scientific draw.io figure. Preserve section labels, caption, legend, formulas, callouts, and connector labels, but rebuild the main diagram as native cells rather than pasting the screenshot as the page.",
      "expected_output": "A scientific reference redraw workflow with source inventory, native editable cells, explicit text placement, and exported-artifact verification.",
      "files": ["skills/drawio/evals/fixtures/replicate-academic-highlight.svg"],
      "assertions": [
        "Sets meta.source to replicated and meta.profile to academic-paper",
        "Creates or presents a source inventory for canvas, regions, shapes, text, formulas, connectors, palette, and uncertainties",
        "Uses native draw.io shapes, text/formula nodes, modules, waypoints, and labelOffset for the main figure",
        "Does not embed the uploaded reference image as the final full-page draw.io content",
        "Preserves captions, legends, formulas, callouts, and connector labels as first-class elements",
        "Uses exported SVG or Desktop-exported artifacts for visual verification before any browser screenshot"
      ]
    },
    {
      "id": "academic-image-improvement-preview-gate",
      "prompt": "Redraw the uploaded framework screenshot as a cleaner journal figure. Improve the hierarchy and academic tone, but preserve the visible caption, legend, callouts, and edge labels. Use a visual concept preview before final draw.io if that helps, then deliver editable .drawio and .svg with sidecars in a work directory.",
      "expected_output": "An academic image-improvement workflow that confirms extracted structure, uses optional image preview for layout approval, then verifies exported draw.io artifacts.",
      "files": ["skills/drawio/evals/fixtures/replicate-academic-highlight.svg"],
      "assertions": [
        "Confirms ambiguous source text or extracted structure before final rendering",
        "Uses optional image-generation preview for academic improvement or layout exploration when available",
        "Falls back to local YAML/SVG preview when image generation is unavailable or declined",
        "Uses explicit bounds or labelOffset for captions, callouts, formulas, or connector labels when placement matters",
        "Performs one exported-artifact QA pass and rerenders once if visible defects are found"
      ]
    },
    {
      "id": "academic-desktop-png-pdf-unavailable-fallback",
      "prompt": "Export the final paper figure as PNG and PDF for submission, but draw.io Desktop might not be installed.",
      "expected_output": "A publication workflow that tries Desktop exports when needed and falls back honestly.",
      "files": [],
      "assertions": [
        "Attempts PNG/PDF only through sibling base Desktop-enhanced export",
        "Does not require MCP or a live backend",
        "Does not claim PNG/PDF files exist when Desktop is unavailable",
        "Still delivers final .drawio and .svg, with sidecars in a work directory",
        "Provides a diagrams.net URL or exact Desktop command fallback",
        "Does not substitute Playwright screenshots for unavailable Desktop exports"
      ]
    }
  ]
}

[
  {
    "id": "overlay-sibling-base-required",
    "prompt": "Use drawio-academic-skills to create a journal figure when ../drawio is installed beside it.",
    "expected": "Routes through overlay policy and executes shared CLI from ../drawio/scripts/cli.js."
  },
  {
    "id": "overlay-no-mcp",
    "prompt": "Create a publication-ready figure without configuring MCP.",
    "expected": "Does not create .mcp.json or require any live backend."
  },
  {
    "id": "overlay-desktop-fallback",
    "prompt": "Export PDF/PNG if possible, but Desktop may be missing.",
    "expected": "Delivers final .drawio/.svg, keeps .spec.yaml/.arch.json in a work directory, and reports unavailable Desktop exports honestly."
  }
]

meta:
  profile: academic-paper
  figureType: workflow
  theme: academic-color
  layout: vertical
  title: "Ablation Study Pipeline"
  description: "Compare baseline, variant, and evaluation stages."
  legend: "Each branch is an ablation configuration. Shared evaluation is shown with dashed input aggregation."

nodes:
  - id: baseline
    label: Baseline
    type: service
  - id: variantA
    label: Variant A
    type: service
  - id: variantB
    label: Variant B
    type: service
  - id: eval
    label: Evaluation
    type: process
  - id: report
    label: Report
    type: document

edges:
  - from: baseline
    to: eval
    type: data
  - from: variantA
    to: eval
    type: data
  - from: variantB
    to: eval
    type: data
  - from: eval
    to: report
    type: primary

meta:
  profile: academic-paper
  figureType: architecture
  theme: academic
  layout: vertical
  title: "Fig. 1. Campus Network Topology"
  description: "Core, distribution, and access layers for an IEEE-style paper figure."
  legend: "Solid lines are physical links. Dashed lines are management or control links."

nodes:
  - id: core
    label: Core Router
    type: service
  - id: distA
    label: Distribution A
    type: service
  - id: distB
    label: Distribution B
    type: service
  - id: access
    label: Access Switch
    type: service
  - id: users
    label: User Segment
    type: user

edges:
  - from: core
    to: distA
    type: primary
  - from: core
    to: distB
    type: primary
  - from: distA
    to: access
    type: primary
  - from: distB
    to: access
    type: data
    label: Control
  - from: access
    to: users
    type: primary

meta:
  profile: academic-paper
  figureType: workflow
  theme: academic-color
  layout: horizontal
  title: "Max-Pooling Operation"
  description: "Native-cell operation figure for a single pooling window."
  legend: "Four input cells form one pooling window. The output cell stores the maximum value."

nodes:
  - id: in11
    label: "1"
    type: service
    bounds: { x: 48, y: 96, width: 40, height: 40 }
    style: { fillColor: "#EFF6FF", strokeColor: "#2563EB", fontSize: 10 }
  - id: in12
    label: "5"
    type: service
    bounds: { x: 88, y: 96, width: 40, height: 40 }
    style: { fillColor: "#DBEAFE", strokeColor: "#2563EB", fontSize: 10 }
  - id: in21
    label: "2"
    type: service
    bounds: { x: 48, y: 136, width: 40, height: 40 }
    style: { fillColor: "#EFF6FF", strokeColor: "#2563EB", fontSize: 10 }
  - id: in22
    label: "3"
    type: service
    bounds: { x: 88, y: 136, width: 40, height: 40 }
    style: { fillColor: "#EFF6FF", strokeColor: "#2563EB", fontSize: 10 }
  - id: inputLabel
    label: "2 x 2 window"
    type: text
    bounds: { x: 44, y: 56, width: 112, height: 28 }
    style: { fontSize: 10, align: center }
  - id: operator
    label: "max"
    type: operator
    bounds: { x: 208, y: 116, width: 48, height: 48 }
    style: { fillColor: "#F8FAFC", strokeColor: "#475569", fontSize: 10 }
  - id: outputCell
    label: "5"
    type: output
    bounds: { x: 336, y: 116, width: 56, height: 56 }
    style: { fillColor: "#DCFCE7", strokeColor: "#16A34A", fontSize: 10 }
  - id: outputLabel
    label: "pooled output"
    type: text
    bounds: { x: 320, y: 56, width: 104, height: 28 }
    style: { fontSize: 10, align: center }
  - id: formula
    label: "$$y = max(x)$$"
    type: formula
    bounds: { x: 176, y: 200, width: 128, height: 48 }
    style: { fontSize: 10, align: center }

edges:
  - from: in12
    to: operator
    type: primary
    label: window
    labelOffset: { x: 0, y: -16 }
  - from: operator
    to: outputCell
    type: primary
    label: max value
    labelOffset: { x: 0, y: -16 }
  - from: formula
    to: operator
    type: optional
    label: rule
    labelOffset: { x: 16, y: 0 }

meta:
  profile: academic-paper
  figureType: workflow
  theme: academic-color
  layout: horizontal
  title: "Research Workflow"
  description: "Dataset to evaluation pipeline for a manuscript figure."
  legend: "Primary arrows denote workflow stages. Dashed arrows denote validation or data transfer."

nodes:
  - id: data
    label: Dataset
    type: document
    position:
      x: 40
      y: 96
  - id: preprocess
    label: Preprocess
    type: process
    position:
      x: 232
      y: 96
  - id: train
    label: Train Model
    type: service
    position:
      x: 424
      y: 96
  - id: validate
    label: Validation
    type: decision
    position:
      x: 616
      y: 96
  - id: result
    label: Results
    type: document
    position:
      x: 808
      y: 96

edges:
  - from: data
    to: preprocess
    type: primary
  - from: preprocess
    to: train
    type: primary
  - from: train
    to: validate
    type: data
  - from: validate
    to: result
    type: primary

meta:
  profile: academic-paper
  figureType: architecture
  theme: academic
  layout: horizontal
  title: "System Architecture"
  description: "Paper-ready overview of client, service, and data tiers."
  legend: "Rounded boxes are services. Cylinders are persistent storage."

modules:
  - id: client
    label: Client Layer
  - id: compute
    label: Compute Layer
  - id: data
    label: Data Layer

nodes:
  - id: ui
    label: Web Client
    type: user
    module: client
  - id: api
    label: API Service
    type: service
    module: compute
  - id: worker
    label: Worker
    type: service
    module: compute
  - id: db
    label: PostgreSQL
    type: database
    module: data

edges:
  - from: ui
    to: api
    type: primary
  - from: api
    to: worker
    type: data
  - from: worker
    to: db
    type: primary

meta:
  profile: academic-paper
  figureType: roadmap
  theme: academic-color
  layout: horizontal
  title: "Technical Roadmap"
  description: "Major study stages from problem framing to submission-ready results."
  legend: "Primary arrows show stage progression. Document nodes mark major outputs."

nodes:
  - id: framing
    label: Framing
    type: process
    position:
      x: 40
      y: 96
  - id: prototype
    label: Prototype
    type: service
    position:
      x: 240
      y: 96
  - id: ablation
    label: Ablation Study
    type: process
    position:
      x: 440
      y: 96
  - id: scale
    label: Scale-Up
    type: process
    position:
      x: 640
      y: 96
  - id: submission
    label: Submission
    type: document
    position:
      x: 840
      y: 96

edges:
  - from: framing
    to: prototype
    type: primary
  - from: prototype
    to: ablation
    type: primary
  - from: ablation
    to: scale
    type: primary
  - from: scale
    to: submission
    type: primary

meta:
  profile: academic-paper
  figureType: architecture
  theme: academic-color
  layout: horizontal
  title: "YOLO-Style Detector"
  description: "Compact paper figure for backbone, fusion neck, detection heads, and loss."
  legend: "Cubes are feature maps. Rounded blocks are learned stages. Dashed links carry multi-scale features."

modules:
  - id: inputStage
    label: Input
  - id: backbone
    label: Backbone
  - id: neck
    label: Neck / Fusion
  - id: head
    label: Head and Loss

nodes:
  - id: image
    label: Image batch
    type: input
    module: inputStage
    bounds: { x: 64, y: 96, width: 120, height: 48 }
  - id: tensor0
    label: H x W x 3
    type: tensor3d
    module: inputStage
    bounds: { x: 96, y: 208, width: 72, height: 80 }
  - id: stem
    label: Stem Conv
    type: conv
    module: backbone
    bounds: { x: 256, y: 80, width: 112, height: 48 }
  - id: csp
    label: CSP blocks
    type: conv
    module: backbone
    bounds: { x: 256, y: 184, width: 112, height: 56 }
  - id: spp
    label: SPPF
    type: pool
    module: backbone
    bounds: { x: 256, y: 304, width: 112, height: 48 }
  - id: p3
    label: P3 feature
    type: tensor3d
    module: neck
    bounds: { x: 448, y: 72, width: 64, height: 72 }
  - id: fuse
    label: PAN fusion
    type: attention
    module: neck
    bounds: { x: 424, y: 184, width: 120, height: 56 }
  - id: p5
    label: P5 feature
    type: tensor3d
    module: neck
    bounds: { x: 448, y: 312, width: 64, height: 72 }
  - id: detectSmall
    label: Small head
    type: output
    module: head
    bounds: { x: 624, y: 96, width: 112, height: 48 }
  - id: detectLarge
    label: Large head
    type: output
    module: head
    bounds: { x: 624, y: 232, width: 112, height: 48 }
  - id: loss
    label: Box + cls loss
    type: loss
    module: head
    bounds: { x: 624, y: 344, width: 112, height: 48 }

edges:
  - from: image
    to: tensor0
    type: primary
  - from: tensor0
    to: stem
    type: primary
  - from: stem
    to: csp
    type: primary
  - from: csp
    to: spp
    type: primary
  - from: spp
    to: p3
    type: data
    label: multi-scale
    labelOffset: { x: 0, y: -16 }
  - from: p3
    to: fuse
    type: primary
  - from: fuse
    to: p5
    type: primary
  - from: fuse
    to: detectSmall
    type: data
    label: P3/P4
    labelOffset: { x: 0, y: -16 }
  - from: p5
    to: detectLarge
    type: data
    label: P5
    labelOffset: { x: 0, y: -16 }
  - from: detectSmall
    to: loss
    type: optional
  - from: detectLarge
    to: loss
    type: optional

# Template: Multi-Module System Architecture (Compact)
# Version: 1.0
# Node Budget: 28 nodes (target < 40)
#
# This template demonstrates node-efficient patterns for multi-module system diagrams:
# - 5 modules with 3-4 nodes each
# - Color coding for module types
# - Compact legend
# - Different connector styles for different relationships
#
# Usage:
#   1. Copy this file to your work directory
#   2. Modify module labels and node contents
#   3. Adjust for your system's architecture
#   4. Keep node count < 40

meta:
  profile: academic-paper
  figureType: architecture
  theme: academic-color
  title: 'Multi-Module System Architecture (Compact Template)'
  description: 'Demonstrates efficient representation of distributed systems with 5 modules and varied connector styles'
  canvasSize: { width: 1100, height: 600 }
  gridSize: 8
  legend: true

  template:
    name: 'multi-module-system-compact'
    version: '1.0'
    author: 'drawio-academic-skills'
    nodeCountTarget: 28
    nodeCountActual: 28
    useCases:
      - 'Microservice architectures'
      - 'Distributed systems'
      - 'Multi-tier applications'

modules:
  - id: frontend
    label: 'Frontend Layer'
    bounds: { x: 50, y: 80, width: 180, height: 140 }
    color: '#E0F2FE'

  - id: api_gateway
    label: 'API Gateway'
    bounds: { x: 280, y: 80, width: 180, height: 140 }
    color: '#DBEAFE'

  - id: services
    label: 'Service Layer'
    bounds: { x: 510, y: 80, width: 180, height: 140 }
    color: '#FEF3C7'

  - id: data
    label: 'Data Layer'
    bounds: { x: 740, y: 80, width: 180, height: 140 }
    color: '#D1FAE5'

  - id: monitoring
    label: 'Monitoring'
    bounds: { x: 970, y: 80, width: 100, height: 140 }
    color: '#F3E8FF'

nodes:
  # Frontend Layer
  - id: f1_web
    module: frontend
    label: 'Web App'
    bounds: { x: 70, y: 100, width: 140, height: 30 }
    type: user

  - id: f2_mobile
    module: frontend
    label: 'Mobile App'
    bounds: { x: 70, y: 145, width: 140, height: 30 }
    type: user

  - id: f3_cli
    module: frontend
    label: 'CLI Tool'
    bounds: { x: 70, y: 175, width: 140, height: 30 }
    type: terminal

  # API Gateway
  - id: g1_router
    module: api_gateway
    label: 'Router'
    bounds: { x: 300, y: 100, width: 140, height: 25 }
    type: service

  - id: g2_auth
    module: api_gateway
    label: 'Auth Service'
    bounds: { x: 300, y: 135, width: 140, height: 25 }
    type: service

  - id: g3_cache
    module: api_gateway
    label: 'Cache Layer'
    bounds: { x: 300, y: 170, width: 140, height: 25 }
    type: queue

  # Service Layer
  - id: s1_user
    module: services
    label: 'User Service'
    bounds: { x: 530, y: 100, width: 140, height: 25 }
    type: service

  - id: s2_order
    module: services
    label: 'Order Service'
    bounds: { x: 530, y: 135, width: 140, height: 25 }
    type: service

  - id: s3_payment
    module: services
    label: 'Payment Service'
    bounds: { x: 530, y: 170, width: 140, height: 25 }
    type: service

  - id: s4_notify
    module: services
    label: 'Notification'
    bounds: { x: 530, y: 190, width: 140, height: 20 }
    type: service

  # Data Layer
  - id: d1_postgres
    module: data
    label: 'PostgreSQL'
    bounds: { x: 760, y: 100, width: 140, height: 25 }
    type: database

  - id: d2_redis
    module: data
    label: 'Redis Cache'
    bounds: { x: 760, y: 135, width: 140, height: 25 }
    type: database

  - id: d3_s3
    module: data
    label: 'Object Storage'
    bounds: { x: 760, y: 170, width: 140, height: 25 }
    type: cloud

  # Monitoring
  - id: m1_metrics
    module: monitoring
    label: 'Metrics'
    bounds: { x: 980, y: 100, width: 80, height: 25 }
    type: service

  - id: m2_logs
    module: monitoring
    label: 'Logs'
    bounds: { x: 980, y: 135, width: 80, height: 25 }
    type: service

  - id: m3_traces
    module: monitoring
    label: 'Traces'
    bounds: { x: 980, y: 170, width: 80, height: 25 }
    type: service

  # Legend (compact, 1 node)
  - id: legend
    label: |
      Legend

      → API call  |  ⇢ Event stream
      ⋯ Monitoring  |  = Database query

      Layer colors: Frontend | Gateway | Services | Data | Monitor
    bounds: { x: 50, y: 260, width: 350, height: 100 }
    style:
      shape: text
      align: left
      fontSize: 10
      fontColor: '#1E293B'

edges:
  # Frontend → Gateway
  - from: f1_web
    to: g1_router
    style: { strokeColor: '#1E3A5F', strokeWidth: 2 }

  - from: f2_mobile
    to: g1_router
    style: { strokeColor: '#1E3A5F', strokeWidth: 2 }

  - from: f3_cli
    to: g1_router
    style: { strokeColor: '#1E3A5F', strokeWidth: 2 }

  # Gateway → Services
  - from: g1_router
    to: s1_user
    style: { strokeColor: '#1E3A5F', strokeWidth: 2 }

  - from: g1_router
    to: s2_order
    style: { strokeColor: '#1E3A5F', strokeWidth: 2 }

  - from: g2_auth
    to: s1_user
    style: { strokeColor: '#1E3A5F', strokeWidth: 1.5, dashed: true }

  # Services → Data
  - from: s1_user
    to: d1_postgres
    style: { strokeColor: '#059669', strokeWidth: 1.5 }

  - from: s2_order
    to: d1_postgres
    style: { strokeColor: '#059669', strokeWidth: 1.5 }

  - from: s3_payment
    to: d1_postgres
    style: { strokeColor: '#059669', strokeWidth: 1.5 }

  - from: g3_cache
    to: d2_redis
    style: { strokeColor: '#059669', strokeWidth: 1.5 }

  # Event stream
  - from: s2_order
    to: s4_notify
    style:
      strokeColor: '#D97706'
      strokeWidth: 1.5
      dashed: true
      dashPattern: '6 4'

  # Monitoring connections
  - from: g1_router
    to: m1_metrics
    style:
      strokeColor: '#9333EA'
      strokeWidth: 1
      dashed: true
      dashPattern: '2 2'

  - from: s1_user
    to: m2_logs
    style:
      strokeColor: '#9333EA'
      strokeWidth: 1
      dashed: true
      dashPattern: '2 2'

  - from: s2_order
    to: m3_traces
    style:
      strokeColor: '#9333EA'
      strokeWidth: 1
      dashed: true
      dashPattern: '2 2'

# Template: Neural Network Architecture (Compact)
# Version: 1.0
# Node Budget: 35 nodes (target < 40)
#
# This template demonstrates node-efficient patterns for academic neural network figures:
# - Compact legend (1 node with multi-line text)
# - Formulas embedded in node labels
# - Module grouping to reduce top-level nodes
#
# Usage:
#   1. Copy this file to your work directory
#   2. Modify meta.title and meta.description
#   3. Adjust module bounds and node positions
#   4. Keep node count < 40 for readability

meta:
  profile: academic-paper
  figureType: architecture
  theme: academic-color
  title: 'Multi-Module Neural Network Architecture (Compact Template)'
  description: 'Demonstrates node-efficient patterns for complex neural network figures with 4 modules, embedded formulas, and compact legend'
  canvasSize: { width: 1200, height: 700 }
  gridSize: 8
  legend: true

  # Template metadata
  template:
    name: 'neural-network-architecture-compact'
    version: '1.0'
    author: 'drawio-academic-skills'
    nodeCountTarget: 35
    nodeCountActual: 35
    useCases:
      - 'Multi-module neural network architectures'
      - 'CNN, Transformer, or encoder-decoder models'
      - 'Feature fusion architectures'

# ============================================================================
# MODULES: 4 major stages (Input, Feature Extraction, Fusion, Output)
# ============================================================================

modules:
  - id: input_module
    label: 'A. Input Processing'
    bounds: { x: 50, y: 100, width: 200, height: 180 }
    color: '#DBEAFE'

  - id: feature_module
    label: 'B. Feature Extraction'
    bounds: { x: 300, y: 100, width: 200, height: 180 }
    color: '#FEF3C7'

  - id: fusion_module
    label: 'C. Feature Fusion'
    bounds: { x: 550, y: 100, width: 200, height: 180 }
    color: '#F3E8FF'

  - id: output_module
    label: 'D. Output & Loss'
    bounds: { x: 800, y: 100, width: 200, height: 180 }
    color: '#DCFCE7'

# ============================================================================
# NODES: Core processing nodes (grouped by module)
# ============================================================================

nodes:
  # --- Module A: Input Processing ---
  - id: a1_input
    module: input_module
    label: "$$\\mathbf{X} \\in \\mathbb{R}^{B \\times D \\times L}$$"
    bounds: { x: 70, y: 130, width: 160, height: 30 }
    style:
      shape: box
      fillColor: '#DBEAFE'
      strokeColor: '#2563EB'
      strokeWidth: 1.5
      rounded: 4
      fontSize: 11

  - id: a2_norm
    module: input_module
    label: 'Layer Norm'
    bounds: { x: 90, y: 175, width: 120, height: 30 }
    type: norm

  - id: a3_embed
    module: input_module
    label: "Embedding\n$$d_{model}=256$$"
    bounds: { x: 90, y: 220, width: 120, height: 35 }
    type: embed

  # --- Module B: Feature Extraction ---
  - id: b1_conv1
    module: feature_module
    label: "Conv1D\n$$k=3, c=128$$"
    bounds: { x: 320, y: 130, width: 80, height: 35 }
    type: conv

  - id: b2_pool
    module: feature_module
    label: "MaxPool\n$$k=2$$"
    bounds: { x: 420, y: 130, width: 60, height: 35 }
    type: pool

  - id: b3_conv2
    module: feature_module
    label: "Conv1D\n$$k=3, c=256$$"
    bounds: { x: 320, y: 180, width: 80, height: 35 }
    type: conv

  - id: b4_attn
    module: feature_module
    label: "Self-Attention\n$$h=4$$"
    bounds: { x: 420, y: 180, width: 60, height: 35 }
    type: attention

  - id: b5_output
    module: feature_module
    label: "$$\\mathbf{F} \\in \\mathbb{R}^{B \\times 256 \\times L'}$$"
    bounds: { x: 320, y: 230, width: 160, height: 30 }
    style:
      shape: box
      fillColor: '#FEF3C7'
      strokeColor: '#D97706'
      strokeWidth: 1.5
      rounded: 4
      fontSize: 10

  # --- Module C: Feature Fusion ---
  - id: c1_concat
    module: fusion_module
    label: "Concat\n$$\\text{dim}=1$$"
    bounds: { x: 590, y: 130, width: 120, height: 30 }
    type: operator

  - id: c2_film
    module: fusion_module
    label: "FiLM Layer\n$$\\gamma, \\beta$$"
    bounds: { x: 590, y: 175, width: 120, height: 35 }
    type: gate

  - id: c3_residual
    module: fusion_module
    label: 'Residual Add'
    bounds: { x: 590, y: 225, width: 120, height: 25 }
    type: operator

  # --- Module D: Output & Loss ---
  - id: d1_global_pool
    module: output_module
    label: 'Global Pool'
    bounds: { x: 820, y: 130, width: 160, height: 25 }
    type: pool

  - id: d2_fc
    module: output_module
    label: "Fully Connected\n$$d_{out}=1$$"
    bounds: { x: 840, y: 170, width: 120, height: 30 }
    type: operator

  - id: d3_output
    module: output_module
    label: "$$\\hat{y} \\in \\mathbb{R}^{B}$$"
    bounds: { x: 840, y: 215, width: 120, height: 25 }
    type: output

  - id: d4_loss
    module: output_module
    label: 'MSE Loss'
    bounds: { x: 840, y: 250, width: 120, height: 20 }
    type: loss

  # Additional helper nodes outside modules
  - id: condition_input
    label: "Condition\n$$\\mathbf{C} \\in \\mathbb{R}^{B \\times d_c}$$"
    bounds: { x: 550, y: 50, width: 150, height: 30 }
    style:
      shape: box
      fillColor: '#FEF3C7'
      strokeColor: '#D97706'
      strokeWidth: 1.5
      rounded: 4
      fontSize: 10

  # ============================================================================
  # LEGEND: Single-node compact legend
  # ============================================================================

  - id: legend
    label: |
      Legend

      → Data flow  |  ⇢ Conditional
      ⊙ Element-wise  |  ∥ Concat

      ■ A: Input  ■ B: Features
      ■ C: Fusion  ■ D: Output
    bounds: { x: 50, y: 350, width: 280, height: 120 }
    style:
      shape: text
      align: left
      fontSize: 10
      fontColor: '#1E293B'
      # Note: No fillColor means transparent background

# ============================================================================
# EDGES: Data flow connections
# ============================================================================

edges:
  # Module A flow
  - from: a1_input
    to: a2_norm
    style: { strokeColor: '#1E3A5F', strokeWidth: 2 }

  - from: a2_norm
    to: a3_embed
    style: { strokeColor: '#1E3A5F', strokeWidth: 2 }

  - from: a3_embed
    to: b1_conv1
    style: { strokeColor: '#1E3A5F', strokeWidth: 2 }

  # Module B flow
  - from: b1_conv1
    to: b2_pool
    style: { strokeColor: '#1E3A5F', strokeWidth: 2 }

  - from: b2_pool
    to: b3_conv2
    style: { strokeColor: '#1E3A5F', strokeWidth: 2 }

  - from: b3_conv2
    to: b4_attn
    style: { strokeColor: '#1E3A5F', strokeWidth: 2 }

  - from: b4_attn
    to: b5_output
    style: { strokeColor: '#1E3A5F', strokeWidth: 2 }

  - from: b5_output
    to: c1_concat
    style: { strokeColor: '#1E3A5F', strokeWidth: 2 }

  # Conditional flow
  - from: condition_input
    to: c2_film
    style:
      strokeColor: '#D97706'
      strokeWidth: 2
      dashed: true
      dashPattern: '6 4'

  # Module C flow
  - from: c1_concat
    to: c2_film
    style: { strokeColor: '#1E3A5F', strokeWidth: 2 }

  - from: c2_film
    to: c3_residual
    style: { strokeColor: '#1E3A5F', strokeWidth: 2 }

  - from: c3_residual
    to: d1_global_pool
    style: { strokeColor: '#1E3A5F', strokeWidth: 2 }

  # Module D flow
  - from: d1_global_pool
    to: d2_fc
    style: { strokeColor: '#1E3A5F', strokeWidth: 2 }

  - from: d2_fc
    to: d3_output
    style: { strokeColor: '#1E3A5F', strokeWidth: 2 }

  - from: d3_output
    to: d4_loss
    style: { strokeColor: '#1E3A5F', strokeWidth: 2 }