diagram-types.bs

{
  "id": "diagram-file-types",
  "title": "Diagram File Types Blockscape",
  "abstract": "Users author and consume diagrams in formats like PlantUML, Mermaid, SVG, and DOT. These formats rely on modeling semantics, layout calculation, and vector rendering provided by engines and libraries implemented in specific programming languages. https://gist.githubusercontent.com/pwright/462e221d2ecfa768842f5c85808fac84/raw/c11ad20f0145bf102c35720eca3d725b39e27c25/types.bs",
  "categories": [
    {
      "id": "user-formats",
      "title": "Diagram Formats",
      "items": [
        { "id": "plantuml-format", "name": "PlantUML (.puml)", "deps": ["text-modeling", "layout-engine", "styling-theming"] },
        { "id": "mermaid-format", "name": "Mermaid (markdown fences)", "deps": ["text-modeling", "layout-engine", "interactivity", "styling-theming"] },
        { "id": "svg-format", "name": "SVG (.svg)", "deps": ["vector-graphics", "styling-theming", "interactivity"] },
        { "id": "graphviz-dot-format", "name": "Graphviz DOT (.dot)", "deps": ["text-modeling", "layout-engine", "styling-theming"] }
      ]
    },
    {
      "id": "capabilities",
      "title": "Capabilities",
      "items": [
        { "id": "text-modeling", "name": "Text-based Modeling", "deps": ["plantuml-engine", "mermaid-core"] },
        { "id": "layout-engine", "name": "Auto Layout", "deps": ["graphviz-core", "plantuml-engine", "mermaid-core"] },
        { "id": "vector-graphics", "name": "Vector Graphics Rendering", "deps": ["svg-dom-lib"] },
        { "id": "interactivity", "name": "Interactivity (links, pan/zoom)", "deps": ["svg-dom-lib", "mermaid-core"] },
        { "id": "styling-theming", "name": "Styling & Theming", "deps": ["svg-dom-lib"] }
      ]
    },
    {
      "id": "tooling",
      "title": "Engines & Tooling",
      "items": [
        { "id": "plantuml-engine", "name": "PlantUML Engine", "deps": ["java"] },
        { "id": "mermaid-core", "name": "Mermaid Core", "deps": ["typescript", "javascript"] },
        { "id": "graphviz-core", "name": "Graphviz Core", "deps": ["c"] },
        { "id": "svg-dom-lib", "name": "SVG DOM Library", "deps": ["javascript", "typescript"] }
      ]
    },
    {
      "id": "programming-langs",
      "title": "Programming Languages Used to Implement",
      "items": [
        { "id": "java", "name": "Java", "deps": [] },
        { "id": "javascript", "name": "JavaScript", "deps": [] },
        { "id": "typescript", "name": "TypeScript", "deps": [] },
        { "id": "c", "name": "C", "deps": [] }
      ]
    }
  ]
}

types.bs

{
  "id": "plantuml-engine-map",
  "title": "PlantUML Engine Blockscape",
  "abstract": "PlantUML renders diagrams from a text DSL, typically producing SVG/PNG by delegating layout to Graphviz and rendering via Java libraries.",
  "categories": [
    {
      "id": "formats",
      "title": "User Formats",
      "items": [
        { "id": "plantuml-format", "name": "PlantUML (.puml)", "deps": ["text-modeling", "auto-layout", "styling"] },
        { "id": "svg-output", "name": "SVG Output", "deps": ["vector-graphics"] }
      ]
    },
    {
      "id": "capabilities",
      "title": "Capabilities",
      "items": [
        { "id": "text-modeling", "name": "Text-based Modeling", "deps": ["plantuml-engine"] },
        { "id": "auto-layout", "name": "Auto Layout", "deps": ["graphviz-core"] },
        { "id": "vector-graphics", "name": "Vector Graphics Rendering", "deps": ["plantuml-engine"] },
        { "id": "styling", "name": "Styling & Themes", "deps": ["plantuml-engine"] }
      ]
    },
    {
      "id": "tooling",
      "title": "Engines & Tooling",
      "items": [
        { "id": "plantuml-engine", "name": "PlantUML Engine", "deps": ["java"] },
        { "id": "graphviz-core", "name": "Graphviz Core", "deps": ["c"] }
      ]
    },
    {
      "id": "programming-langs",
      "title": "Programming Languages Used to Implement",
      "items": [
        { "id": "java", "name": "Java", "deps": [] },
        { "id": "c", "name": "C", "deps": [] }
      ]
    }
  ]
}
---
{
  "id": "mermaid-core-map",
  "title": "Mermaid Core Blockscape",
  "abstract": "Mermaid compiles a Markdown-friendly DSL into SVG/HTML with client-side layout using Dagre or ELK and DOM-based interactivity.",
  "categories": [
    {
      "id": "formats",
      "title": "User Formats",
      "items": [
        { "id": "mermaid-format", "name": "Mermaid (fenced code)", "deps": ["text-modeling", "auto-layout", "interactivity", "theming"] },
        { "id": "svg-output", "name": "SVG Output", "deps": ["vector-graphics"] }
      ]
    },
    {
      "id": "capabilities",
      "title": "Capabilities",
      "items": [
        { "id": "text-modeling", "name": "Text-based Modeling", "deps": ["mermaid-core"] },
        { "id": "auto-layout", "name": "Auto Layout", "deps": ["dagre-layout", "elk-layout"] },
        { "id": "vector-graphics", "name": "Vector Graphics Rendering", "deps": ["svg-dom-lib"] },
        { "id": "interactivity", "name": "Interactivity (links, zoom)", "deps": ["svg-dom-lib"] },
        { "id": "theming", "name": "Styling & Themes", "deps": ["mermaid-core"] }
      ]
    },
    {
      "id": "tooling",
      "title": "Engines & Tooling",
      "items": [
        { "id": "mermaid-core", "name": "Mermaid Core", "deps": ["typescript", "javascript"] },
        { "id": "dagre-layout", "name": "Dagre Layout", "deps": ["javascript"] },
        { "id": "elk-layout", "name": "ELK (Eclipse Layout Kernel)", "deps": ["java", "javascript"] },
        { "id": "svg-dom-lib", "name": "SVG/DOM Library", "deps": ["javascript", "typescript"] }
      ]
    },
    {
      "id": "programming-langs",
      "title": "Programming Languages Used to Implement",
      "items": [
        { "id": "typescript", "name": "TypeScript", "deps": [] },
        { "id": "javascript", "name": "JavaScript", "deps": [] },
        { "id": "java", "name": "Java", "deps": [] }
      ]
    }
  ]
}
---
{
  "id": "graphviz-core-map",
  "title": "Graphviz Core Blockscape",
  "abstract": "Graphviz provides graph layout engines (dot, neato, etc.) that compute node/edge positions and output vector formats like SVG.",
  "categories": [
    {
      "id": "formats",
      "title": "User Formats",
      "items": [
        { "id": "graphviz-dot-format", "name": "DOT Language (.dot)", "deps": ["auto-layout"] },
        { "id": "svg-output", "name": "SVG Output", "deps": ["vector-graphics"] }
      ]
    },
    {
      "id": "capabilities",
      "title": "Capabilities",
      "items": [
        { "id": "auto-layout", "name": "Auto Layout (dot/neato)", "deps": ["graphviz-core"] },
        { "id": "vector-graphics", "name": "Vector Graphics Rendering", "deps": ["graphviz-core"] }
      ]
    },
    {
      "id": "tooling",
      "title": "Engines & Tooling",
      "items": [
        { "id": "graphviz-core", "name": "Graphviz Core", "deps": ["c"] }
      ]
    },
    {
      "id": "programming-langs",
      "title": "Programming Languages Used to Implement",
      "items": [
        { "id": "c", "name": "C", "deps": [] }
      ]
    }
  ]
}
---
{
  "id": "elk-layout-map",
  "title": "ELK Layout Blockscape",
  "abstract": "Eclipse Layout Kernel (ELK) offers configurable layout algorithms for layered, orthogonal, and force-directed graph drawings.",
  "categories": [
    {
      "id": "formats",
      "title": "User Formats",
      "items": [
        { "id": "elk-consumers", "name": "ELK Consumers (Mermaid, Eclipse)", "deps": ["auto-layout"] }
      ]
    },
    {
      "id": "capabilities",
      "title": "Capabilities",
      "items": [
        { "id": "auto-layout", "name": "Auto Layout Algorithms", "deps": ["elk-core"] }
      ]
    },
    {
      "id": "tooling",
      "title": "Engines & Tooling",
      "items": [
        { "id": "elk-core", "name": "ELK Core", "deps": ["java", "javascript"] }
      ]
    },
    {
      "id": "programming-langs",
      "title": "Programming Languages Used to Implement",
      "items": [
        { "id": "java", "name": "Java", "deps": [] },
        { "id": "javascript", "name": "JavaScript", "deps": [] }
      ]
    }
  ]
}
---
{
  "id": "dagre-layout-map",
  "title": "Dagre Layout Blockscape",
  "abstract": "Dagre implements a JavaScript port of the Sugiyama layered layout used to position nodes/edges for directed graphs.",
  "categories": [
    {
      "id": "formats",
      "title": "User Formats",
      "items": [
        { "id": "dagre-consumers", "name": "Dagre Consumers (Mermaid, custom UIs)", "deps": ["auto-layout"] }
      ]
    },
    {
      "id": "capabilities",
      "title": "Capabilities",
      "items": [
        { "id": "auto-layout", "name": "Layered Auto Layout", "deps": ["dagre-core"] }
      ]
    },
    {
      "id": "tooling",
      "title": "Engines & Tooling",
      "items": [
        { "id": "dagre-core", "name": "Dagre Core", "deps": ["javascript"] }
      ]
    },
    {
      "id": "programming-langs",
      "title": "Programming Languages Used to Implement",
      "items": [
        { "id": "javascript", "name": "JavaScript", "deps": [] }
      ]
    }
  ]
}
---
{
  "id": "d2-engine-map",
  "title": "D2 Engine Blockscape",
  "abstract": "D2 converts a concise text DSL into diagrams using built-in layout and theming, emitting SVG/PNG for docs and web UIs.",
  "categories": [
    {
      "id": "formats",
      "title": "User Formats",
      "items": [
        { "id": "d2-format", "name": "D2 (.d2)", "deps": ["text-modeling", "auto-layout", "theming"] },
        { "id": "svg-output", "name": "SVG Output", "deps": ["vector-graphics"] }
      ]
    },
    {
      "id": "capabilities",
      "title": "Capabilities",
      "items": [
        { "id": "text-modeling", "name": "Text-based Modeling", "deps": ["d2-core"] },
        { "id": "auto-layout", "name": "Auto Layout", "deps": ["d2-core"] },
        { "id": "vector-graphics", "name": "Vector Graphics Rendering", "deps": ["d2-core"] },
        { "id": "theming", "name": "Styling & Themes", "deps": ["d2-core"] }
      ]
    },
    {
      "id": "tooling",
      "title": "Engines & Tooling",
      "items": [
        { "id": "d2-core", "name": "D2 Core", "deps": ["go"] }
      ]
    },
    {
      "id": "programming-langs",
      "title": "Programming Languages Used to Implement",
      "items": [
        { "id": "go", "name": "Go", "deps": [] }
      ]
    }
  ]
}
---
{
  "id": "svg-dom-lib-map",
  "title": "SVG/DOM Library Blockscape",
  "abstract": "SVG/DOM libraries provide runtime manipulation, interactivity, and rendering helpers for vector diagrams in browsers.",
  "categories": [
    {
      "id": "formats",
      "title": "User Formats",
      "items": [
        { "id": "svg-format", "name": "SVG (.svg)", "deps": ["vector-graphics", "interactivity"] }
      ]
    },
    {
      "id": "capabilities",
      "title": "Capabilities",
      "items": [
        { "id": "vector-graphics", "name": "Vector Graphics APIs", "deps": ["svg-lib-core"] },
        { "id": "interactivity", "name": "Interactivity (events, zoom)", "deps": ["svg-lib-core"] },
        { "id": "theming", "name": "Styling & Themes", "deps": ["svg-lib-core"] }
      ]
    },
    {
      "id": "tooling",
      "title": "Engines & Tooling",
      "items": [
        { "id": "svg-lib-core", "name": "SVG/DOM Library Core", "deps": ["javascript", "typescript"] }
      ]
    },
    {
      "id": "programming-langs",
      "title": "Programming Languages Used to Implement",
      "items": [
        { "id": "javascript", "name": "JavaScript", "deps": [] },
        { "id": "typescript", "name": "TypeScript", "deps": [] }
      ]
    }
  ]
}