### Quick Start with Mise

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/development/setup.md

Use 'mise' to quickly set up the complete development environment by cloning the repo, installing all tools, and verifying the setup.

```bash
git clone git@github.com:kevinswiber/mmdflux.git
cd mmdflux

mise install

just check
```

--------------------------------

### Manual Setup: Cocogitto

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/development/setup.md

Install 'cocogitto' version 6.5.0 for Conventional Commits enforcement.

```bash
cargo install cocogitto@6.5.0
```

--------------------------------

### Manual Setup: Cargo Nexittest

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/development/setup.md

Install 'cargo-nextest' for parallel test execution.

```bash
cargo install cargo-nextest
```

--------------------------------

### Manual Setup: Just Task Runner

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/development/setup.md

Install the 'just' task runner using Cargo or Homebrew.

```bash
cargo install just
```

```bash
brew install just
```

--------------------------------

### Install WASM Target and wasm-pack

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/development/wasm.md

Install the WASM target and wasm-pack toolchain. This is a one-time setup per environment.

```bash
rustup target add wasm32-unknown-unknown
cargo install wasm-pack --locked
```

--------------------------------

### Manual Setup: Node.js

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/development/setup.md

Install Node.js LTS version using nvm or Homebrew for MMDS packages and scripts.

```bash
via nvm or brew
```

--------------------------------

### Optional Setup: GitHub CLI

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/development/setup.md

Install the GitHub CLI ('gh') for CI checks and release assets.

```bash
brew install gh
```

--------------------------------

### Optional Setup: Wasm-pack

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/development/setup.md

Install 'wasm-pack' for WebAssembly builds.

```bash
cargo install wasm-pack
```

--------------------------------

### First-time Setup Commands

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/development/setup.md

Clone the repository, set up git hooks for Conventional Commits, and verify the setup.

```bash
git clone git@github.com:kevinswiber/mmdflux.git
cd mmdflux

just setup-hooks

just check
```

--------------------------------

### Manual Setup: Rust Toolchain

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/development/setup.md

Install stable and nightly Rust toolchains using rustup for building, testing, and formatting.

```bash
rustup install stable nightly
```

--------------------------------

### Manual Setup: jq

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/development/setup.md

Install 'jq' for JSON processing in scripts and hooks using Homebrew or system package manager.

```bash
brew install jq
```

--------------------------------

### Manual Setup: Cargo Edit

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/development/setup.md

Install 'cargo-edit' to use 'cargo set-version' in release hooks.

```bash
cargo install cargo-edit
```

--------------------------------

### Optional Setup: Mermaid CLI

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/development/setup.md

Install '@mermaid-js/mermaid-cli' globally via npm for Mermaid parity comparison.

```bash
npm install -g @mermaid-js/mermaid-cli
```

--------------------------------

### Install and Run Commands

Source: https://github.com/kevinswiber/mmdflux/blob/main/web/README.md

Standard npm commands for installing dependencies, running tests, building the project, and developing locally.

```bash
npm install
npm run test
npm run build
npm run build:release
npm run dev
npm run benchmark:smoke
npm run benchmark:smoke:release
npm run benchmark:full
npm run benchmark:full:release
npm run benchmark:compare -- --baseline <path-to-baseline.json>
npm run benchmark:compare:release -- --baseline <path-to-baseline.json>
```

--------------------------------

### Install rust-analyzer via rustup

Source: https://github.com/kevinswiber/mmdflux/blob/main/mmdflux-plugin-marketplace/plugins/rust-analyzer-lsp/README.md

Use this command to add the rust-analyzer component to your Rust installation. This is the recommended installation method.

```bash
rustup component add rust-analyzer
```

--------------------------------

### Start Tldraw Preview Server

Source: https://github.com/kevinswiber/mmdflux/blob/main/packages/mmds-tldraw/README.md

Start the Vite-based preview server required for the --open flag and other preview functionalities. Navigate to the package directory and run the preview script.

```bash
cd packages/mmds-tldraw && npm run preview
```

--------------------------------

### Install rust-analyzer via pacman on Arch Linux

Source: https://github.com/kevinswiber/mmdflux/blob/main/mmdflux-plugin-marketplace/plugins/rust-analyzer-lsp/README.md

Install rust-analyzer on Arch Linux using the pacman package manager.

```bash
sudo pacman -S rust-analyzer
```

--------------------------------

### Full Benchmark Example

Source: https://github.com/kevinswiber/mmdflux/blob/main/web/README.md

Command to run a full benchmark suite, including all scenarios, and output the results to a JSON file.

```bash
npm run benchmark:full:release -- --out .benchmarks/full-release.json
```

--------------------------------

### Configuration Setup

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

This section details the configuration setup for mmdflux. Ensure your configuration is correctly established before proceeding.

```plaintext
Configuration Setup
```

--------------------------------

### Install Mmdflux via Homebrew

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/development/releasing.md

Users can install the mmdflux CLI using Homebrew by tapping the custom repository and then installing the package.

```bash
brew tap kevinswiber/mmdflux
brew install mmdflux
```

--------------------------------

### Setup Debug Dependencies

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/development/mermaid-parity.md

Run this script to clone and configure external dependencies like dagre and mermaid for debugging.

```bash
./scripts/setup-debug-deps.sh
```

--------------------------------

### Install rust-analyzer via apt on Ubuntu/Debian

Source: https://github.com/kevinswiber/mmdflux/blob/main/mmdflux-plugin-marketplace/plugins/rust-analyzer-lsp/README.md

Install rust-analyzer on Ubuntu or Debian-based Linux distributions using the apt package manager.

```bash
sudo apt install rust-analyzer
```

--------------------------------

### Install @mmds/excalidraw Globally

Source: https://github.com/kevinswiber/mmdflux/blob/main/packages/mmds-excalidraw/README.md

Install the package globally using npm to use the `mmds-to-excalidraw` command-line tool. This allows direct execution of the conversion process.

```bash
npm install -g @mmds/excalidraw
```

--------------------------------

### Benchmark Comparison Example

Source: https://github.com/kevinswiber/mmdflux/blob/main/web/README.md

Commands to capture a baseline benchmark and compare current runs against it, with an option to set regression thresholds.

```bash
npm run benchmark:smoke:release -- --out .benchmarks/baseline-release.json
```

```bash
npm run benchmark:compare:release -- --baseline .benchmarks/baseline-release.json
```

```bash
npm run benchmark:compare:release -- --baseline .benchmarks/baseline-release.json --max-regression-pct 25
```

--------------------------------

### Install rust-analyzer via Homebrew on macOS

Source: https://github.com/kevinswiber/mmdflux/blob/main/mmdflux-plugin-marketplace/plugins/rust-analyzer-lsp/README.md

For macOS users, install rust-analyzer using the Homebrew package manager.

```bash
brew install rust-analyzer
```

--------------------------------

### Mmdflux Dependency Graph Example

Source: https://github.com/kevinswiber/mmdflux/blob/main/xtask/docs/architecture.md

Example Mermaid syntax for representing the dependency graph, showing relationships between different components.

```mermaid
graph LR
    errors["errors"]
    format["format"]
    graph["graph"]
    ...
    graph --> errors
    graph --> format
    ...
```

--------------------------------

### Start Mmdflux Architecture Host with Timings and Verbose Output

Source: https://github.com/kevinswiber/mmdflux/blob/main/xtask/docs/architecture.md

Initiate the architecture host process with detailed phase timing breakdowns and verbose diagnostic output.

```bash
cargo xtask architecture host --timings --verbose
```

--------------------------------

### Host Semantic Architecture Linter with Just

Source: https://github.com/kevinswiber/mmdflux/blob/main/CLAUDE.md

Start a local server for the semantic architecture linter using 'just architecture-host'. Useful during large refactors.

```bash
just architecture-host
```

--------------------------------

### Install mmdflux with Cargo

Source: https://github.com/kevinswiber/mmdflux/blob/main/README.md

Install mmdflux using Cargo, the Rust package manager. Ensure you have Rust and Cargo installed.

```bash
cargo install mmdflux
```

--------------------------------

### TOML Allow Rule Example

Source: https://github.com/kevinswiber/mmdflux/blob/main/xtask/docs/architecture.md

An example of an 'allow' rule in boundaries.toml, specifying which modules a source module is permitted to depend on.

```toml
[[rules]]
id = "allow-graph"
type = "allow"
[rules.config]
source = "graph"
allowed = ["errors", "format"]
```

--------------------------------

### Start Mmdflux Architecture Host

Source: https://github.com/kevinswiber/mmdflux/blob/main/xtask/docs/architecture.md

Run the architecture check and then monitor for file changes, hosting results for subsequent 'check' commands to reuse a warmed context.

```bash
cargo xtask architecture host
```

--------------------------------

### Install @mmds/tldraw CLI Globally

Source: https://github.com/kevinswiber/mmdflux/blob/main/packages/mmds-tldraw/README.md

Install the @mmds/tldraw command-line interface globally using npm for direct use in your terminal.

```bash
npm install -g @mmds/tldraw
```

--------------------------------

### TOML Module Tags Example

Source: https://github.com/kevinswiber/mmdflux/blob/main/xtask/docs/architecture.md

Illustrates how to assign tags to modules within the boundaries.toml file for rule targeting.

```toml
[modules.engines]
tags = { role = "runtime-facade", layer = "layout" }
```

--------------------------------

### Setup Layout Data

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

Configures layout data, including type, algorithm, direction, spacing, markers, and diagram ID.

```typescript
Setup layout data
- type, layoutAlgorithm
- direction, spacing
- markers, diagramId
```

--------------------------------

### WASM Runtime Configuration Contract Example

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/development/wasm.md

Example JSON configuration for the mmdflux-wasm runtime. Uses a strict camelCase schema for supported keys.

```json
{
  "layoutEngine": "flux-layered",
  "edgePreset": "smooth-step",
  "edgeRadius": 6,
  "geometryLevel": "routed",
  "pathSimplification": "lossless",
  "layout": {
    "nodeSep": 40,
    "rankSep": 50
  }
}
```

--------------------------------

### Initialize Rendering

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

Initializes the rendering process by getting configuration, handling security, and obtaining the diagram element.

```typescript
Initialize rendering
- getConfig()
- handle securityLevel
- getDiagramElement()
```

--------------------------------

### TOML Tag-Based Rule Targeting Example

Source: https://github.com/kevinswiber/mmdflux/blob/main/xtask/docs/architecture.md

Demonstrates using tags for rule targeting in the boundaries.toml file, showing both explicit lists and tag references.

```toml
# Explicit list:
targets = ["engines", "render", "builtins", "frontends"]

# Equivalent via tag:
targets = { tag = "role", value = "runtime-facade" }
```

--------------------------------

### Refresh README Assets

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/development/readme-assets.md

Execute this script to regenerate all showcase variants from the source diagram. Ensure you have the necessary dependencies installed.

```bash
./scripts/refresh-readme-assets.sh
```

--------------------------------

### Mermaid LR Graph with Built-in Modules

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

This example defines a left-to-right graph with various modules and their dependencies. It's useful for visualizing project structures or system architectures.

```mermaid
graph LR
    builtins["builtins"]
    diagrams["diagrams"]
    engines["engines"]
    errors["errors"]
    format["format"]
    frontends["frontends"]
    graph1["graph"]
    mermaid["mermaid"]
    mmds["mmds"]
    payload["payload"]
    registry["registry"]
    render["render"]
    runtime["runtime"]
    simplification["simplification"]
    timeline["timeline"]
    builtins --> diagrams
    builtins --> format
    builtins --> registry
    diagrams --> errors
    diagrams --> graph1
    diagrams --> mermaid
    diagrams --> payload
    diagrams --> registry
    diagrams --> timeline
    engines --> errors
    engines --> format
    engines --> graph1
    format --> errors
    frontends --> mermaid
    frontends --> mmds
    graph1 --> errors
    graph1 --> format
    mermaid --> errors
    mermaid --> graph1
    mermaid --> timeline
    mmds --> errors
    mmds --> format
    mmds --> graph1
    mmds --> simplification
    payload --> graph1
    payload --> timeline
    registry --> errors
    registry --> format
    registry --> payload
    render --> format
    render --> graph1
    render --> simplification
    render --> timeline
    runtime --> builtins
    runtime --> engines
    runtime --> errors
    runtime --> format
    runtime --> frontends
    runtime --> graph1
    runtime --> mermaid
    runtime --> mmds
    runtime --> payload
    runtime --> registry
    runtime --> render
    runtime --> simplification
    runtime --> timeline
    simplification --> errors
    simplification --> format
```

--------------------------------

### Apply Basic Style to Node

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

Use the 'style' keyword to apply styling to a specific node. This example sets the fill color, stroke, and text color for the 'Alpha' node.

```mermaid
graph TD
A[Alpha]
style A fill:#ffeeaa,stroke:#333,color:#111
```

--------------------------------

### Comprehensive Flowchart with Styling and Directives

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

A complex flowchart example incorporating frontmatter for theme, directives for curve, class definitions for styling, and handling of different paths (valid/invalid).

```mermaid
---
config:
  theme: default
---
%%{init: {"flowchart": {"curve": "basis"}}}%%
graph TD
    start-node[Start] --> check-1{Check Input}
    check-1 -->|valid| process-A:::success
    check-1 -->|invalid| error-1[Error]:::error
    process-A --> end-node[Done]
    error-1 --> end-node
    style start-node fill:#f9f
    classDef success fill:#0f0
    classDef error fill:#f00
```

--------------------------------

### Get Tldraw Preview URL

Source: https://github.com/kevinswiber/mmdflux/blob/main/packages/mmds-tldraw/README.md

Obtain a preview URL for the converted diagram by using the -o url flag. This requires a preview server to be running.

```bash
mmdflux --format mmds --geometry-level routed diagram.mmd | npx mmds-to-tldraw -o url
```

--------------------------------

### CLI Usage for MMDS to Excalidraw Conversion

Source: https://context7.com/kevinswiber/mmdflux/llms.txt

Command-line interface examples for converting MMDS to Excalidraw format. Options include piping output, generating shareable URLs, opening directly in the browser, and applying custom scale factors.

```bash
# CLI usage: pipe mmdflux output to excalidraw converter
mmdflux --format mmds --geometry-level routed diagram.mmd | npx mmds-to-excalidraw > out.excalidraw
```

```bash
# Get a shareable excalidraw.com URL
mmdflux --format mmds --geometry-level routed diagram.mmd | npx mmds-to-excalidraw -o url
```

```bash
# Open directly in browser
mmdflux --format mmds --geometry-level routed diagram.mmd | npx mmds-to-excalidraw --open
```

```bash
# Custom scale factor
mmdflux --format mmds diagram.mmd | SCALE=5 npx mmds-to-excalidraw > out.excalidraw
```

--------------------------------

### Flowchart Example with Left-to-Right Direction

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

This Mermaid syntax defines a flowchart with a left-to-right direction ('graph LR') illustrating a system architecture with payload and registry interactions.

```mermaid
graph LR
    graph --> format
    render --> format
    render --> graph
    render --> timeline
    payload --> graph
    payload --> timeline
    registry --> format
    registry --> payload

```

--------------------------------

### Node Style Extension Example

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/mmds.md

This JSON demonstrates the structure of the Node Style Extension, including profiles and extension namespaces. It is used when node styles are present to control visual aspects like fill, stroke, and color.

```json
{
  "profiles": ["mmds-core-v1", "mmdflux-node-style-v1"],
  "extensions": {
    "org.mmdflux.node-style.v1": {
      "nodes": {
        "A": {
          "fill": "#ffeeaa",
          "stroke": "#333",
          "color": "#111"
        }
      }
    }
  }
}
```

--------------------------------

### Local Benchmark Usage

Source: https://github.com/kevinswiber/mmdflux/blob/main/web/README.md

Steps to run the local development server and initiate benchmarks through the web interface.

```bash
npm run dev
```

--------------------------------

### Render Mermaid Diagrams in the Browser with WASM

Source: https://context7.com/kevinswiber/mmdflux/llms.txt

Utilize WebAssembly bindings to render Mermaid diagrams in the browser. This example shows how to initialize the WASM module, detect diagram types, validate input, and render diagrams to text or SVG with custom configurations.

```javascript
import init, { render, detect, validate, version } from '@mmds/wasm';

async function main() {
  await init();

  const input = `graph TD
    A[Start] --> B[Process]
    B --> C[End]`;

  // Get version
  console.log('mmdflux version:', version());

  // Detect diagram type
  const diagramType = detect(input);
  console.log('Detected:', diagramType); // "flowchart"

  // Validate input
  const validation = validate(input);
  const result = JSON.parse(validation);
  console.log('Valid:', result.valid); // true

  // Render as text (default config)
  const text = render(input, 'text', '{}');
  console.log('Text output:\n', text);

  // Render as SVG with config
  const svgConfig = JSON.stringify({
    layoutEngine: 'flux-layered',
    svgTheme: { name: 'dark', mode: 'dynamic' },
    edgePreset: 'smooth-step'
  });
  const svg = render(input, 'svg', svgConfig);
  document.getElementById('diagram').innerHTML = svg;

  // Render as MMDS JSON with routed geometry
  const mmdsConfig = JSON.stringify({
    geometryLevel: 'routed',
    pathSimplification: 'lossless'
  });
  const mmds = render(input, 'mmds', mmdsConfig);
  const mmdsData = JSON.parse(mmds);
  console.log('Nodes:', mmdsData.nodes.length);
  console.log('Edges:', mmdsData.edges.length);

  // Render with color support for text
  const colorConfig = JSON.stringify({ color: 'always' });
  const coloredText = render(input, 'text', colorConfig);
  console.log('ANSI colored output:', coloredText);
}

main();

```

--------------------------------

### Build and Benchmark Scripts

Source: https://github.com/kevinswiber/mmdflux/blob/main/web/README.md

Commands for building the project in development and release modes, and for running various benchmark scenarios.

```bash
npm run dev
npm run build
npm run test
```

```bash
npm run build:release
```

```bash
npm run benchmark:smoke
```

```bash
npm run benchmark:smoke:release
```

```bash
benchmark:full*
```

```bash
benchmark:compare*
```

--------------------------------

### Build Project in Release Mode with Just

Source: https://github.com/kevinswiber/mmdflux/blob/main/CLAUDE.md

Compile the project in release mode using the 'just release' command.

```bash
just release
```

--------------------------------

### Output URL and Open in Browser

Source: https://github.com/kevinswiber/mmdflux/blob/main/packages/mmds-excalidraw/README.md

Combine the `-o url` and `--open` flags to generate a shareable URL and immediately open the diagram in the browser. Only the URL is printed to stdout.

```bash
# Open in browser, only print the URL
mmdflux --format mmds --geometry-level routed diagram.mmd | npx mmds-to-excalidraw -o url --open
```

--------------------------------

### Flowchart TD Syntax Example

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

This is an example of a flowchart defined using the TD (Top Down) direction. It illustrates the basic syntax for defining nodes and connections.

```mermaid
--- 
references: 
  - "File: /packages/mermaid/src/diagrams/flowchart/flowDiagram.ts" 
  - "File: /packages/mermaid/src/diagrams/flowchart/flowDb.ts" 
  - "File: /packages/mermaid/src/diagrams/flowchart/flowDetector.ts" 
  - "File: /packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts" 
  - "File: /packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts" 
  - "File: /packages/mermaid/src/diagrams/flowchart/styles.ts" 
  - "File: /packages/mermaid/src/diagrams/flowchart/types.ts" 
  - "File: /packages/mermaid/src/diagrams/flowchart/flowChartShapes.js" 
  - "File: /packages/mermaid/src/diagrams/flowchart/parser/flowParser.ts" 
  - "File: /packages/mermaid/src/diagrams/flowchart/elk/detector.ts" 
generationTime: 2025-07-23T10:31:53.266Z 
--- 
flowchart TD 
    %% Entry Points and Detection 
    Input["User Input Text"] --> Detection{Detection Phase} 
    
    Detection --> flowDetector["flowDetector.ts<br/>detector(txt, config)"] 
    Detection --> flowDetectorV2["flowDetector-v2.ts<br/>detector(txt, config)"] 
    Detection --> elkDetector["elk/detector.ts<br/>detector(txt, config)"] 
    
    flowDetector --> |"Checks /^\s*graph/"| DetectLegacy{Legacy Flowchart?} 
    flowDetectorV2 --> |"Checks /^\s*flowchart/"| DetectNew{New Flowchart?} 
    elkDetector --> |"Checks /^\s*flowchart-elk/"| DetectElk{ELK Layout?} 
    
    DetectLegacy --> |Yes| LoadDiagram 
    DetectNew --> |Yes| LoadDiagram 
    DetectElk --> |Yes| LoadDiagram 
    
    %% Loading Phase 
    LoadDiagram["loader() function"] --> flowDiagram["flowDiagram.ts<br/>diagram object"] 
    
    flowDiagram --> DiagramStructure{Diagram Components} 
    DiagramStructure --> Parser["parser: flowParser"] 
    DiagramStructure --> Database["db: new FlowDB()"] 
    DiagramStructure --> Renderer["renderer: flowRenderer-v3-unified"] 
    DiagramStructure --> Styles["styles: flowStyles"] 
    DiagramStructure --> Init["init: (cnf: MermaidConfig)"] 
    
    %% Parser Phase 
    Parser --> flowParser["parser/flowParser.ts<br/>newParser.parse(src)"] 
    flowParser --> |"Preprocesses src"| RemoveWhitespace["Remove trailing whitespace<br/>src.replace(/}\\s*\\n/g, '}\\n')"] 
    RemoveWhitespace --> flowJison["parser/flow.jison<br/>flowJisonParser.parse(newSrc)"] 
    
    flowJison --> ParseGraph["Parse Graph Structure"] 
    ParseGraph --> ParseVertices["Parse Vertices"] 
    ParseGraph --> ParseEdges["Parse Edges"] 
    ParseGraph --> ParseSubgraphs["Parse Subgraphs"] 
    ParseGraph --> ParseClasses["Parse Classes"] 
    ParseGraph --> ParseStyles["Parse Styles"] 
    
    %% Database Phase - FlowDB Class 
    Database --> FlowDBClass["flowDb.ts<br/>FlowDB class"] 
    
    FlowDBClass --> DBInit["constructor()\n- Initialize counters\n- Bind methods\n- Setup toolTips\n- Call clear()"]

```

--------------------------------

### Run Conformance Checks

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/mmds.md

Execute the project's conformance tests using the provided 'just' command. Ensure the environment is set up correctly before running.

```bash
just conformance
```

--------------------------------

### Mermaid: Nested Subgraph with Start, Process, and End Nodes

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

Defines a flowchart with nested 'Outer' and 'Inner' subgraphs, showing a sequence from 'Start' to 'Process' to 'End'.

```mermaid
graph TD
subgraph outer[Outer]
A[Start]
subgraph inner[Inner]
B[Process] --> C[End]
end
end
A --> B
```

--------------------------------

### Day-to-day Commands: Check

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/development/setup.md

Run linting, tests, and architecture checks.

```bash
just check
```

--------------------------------

### Setup Viewport for SVG

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

Configures the SVG viewport with specified padding.

```typescript
setupViewPortForSVG(svg, padding)
```

--------------------------------

### Build Project in Debug Mode with Just

Source: https://github.com/kevinswiber/mmdflux/blob/main/CLAUDE.md

Compile the project in debug mode using the 'just build' command.

```bash
just build
```

--------------------------------

### Get Layout Data

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

Retrieves layout data from the diagram database.

```typescript
diag.db.getData()
as LayoutData
```

--------------------------------

### Day-to-day Commands: Test

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/development/setup.md

Run all tests in the project.

```bash
just test
```

--------------------------------

### Get Type from Vertex

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

Determines the type of a vertex based on its properties.

```typescript
GetTypeFromVertex(vertex)
```

--------------------------------

### CLI Basic Rendering

Source: https://context7.com/kevinswiber/mmdflux/llms.txt

Demonstrates basic command-line usage for rendering Mermaid diagrams to different formats like text, SVG, and MMDS JSON.

```APIDOC
## CLI Basic Rendering

### Description
The CLI renders Mermaid diagrams to various output formats from files or stdin.

### Method
CLI Command

### Endpoint
N/A (CLI Tool)

### Parameters
#### Command Line Arguments
- `--format` (string) - Optional - Specifies the output format (e.g., `svg`, `ascii`, `mmds`). Defaults to `text`.
- `-o` or `--output` (string) - Optional - Specifies the output file path.
- `--geometry-level` (string) - Optional - For `mmds` format, specifies the level of geometric detail (e.g., `routed`).
- `--lint` - Optional - Enables linting mode to validate input and print diagnostics.
- `--quiet` - Optional - Suppresses warnings during normal rendering.

### Request Example
```bash
# Render a Mermaid file to text (default format)
mmdflux diagram.mmd

# Read Mermaid from stdin
printf 'graph LR\nA-->B\n' | mmdflux

# SVG output
mmdflux --format svg diagram.mmd -o diagram.svg

# ASCII-only text output (no Unicode box-drawing characters)
mmdflux --format ascii diagram.mmd

# MMDS JSON output
mmdflux --format mmds diagram.mmd

# MMDS JSON with full routed geometry (includes edge paths and waypoints)
mmdflux --format mmds --geometry-level routed diagram.mmd
```

### Response
#### Success Response
Output is printed to stdout or saved to a file, depending on the `-o` flag.

#### Response Example
(Output varies based on input and format. For MMDS JSON with `--geometry-level routed`):
```json
{
  "diagram_type": "graph",
  "nodes": [
    { "id": "A", "label": "A", "bounds": [x1, y1, x2, y2] },
    { "id": "B", "label": "B", "bounds": [x1, y1, x2, y2] }
  ],
  "edges": [
    { "from": "A", "to": "B", "path": [[x1, y1], [x2, y2], ...], "label": null }
  ]
}
```
```

--------------------------------

### Mermaid Source Diagram

Source: https://github.com/kevinswiber/mmdflux/blob/main/README.md

Example of a Mermaid source diagram used for rendering.

```mermaid
graph TD
    subgraph sg1[Horizontal Section]
        direction LR
        A[Step 1] --> B[Step 2] --> C[Step 3]
    end
    Start --> A
    C --> End
```

--------------------------------

### CLI SVG Theming

Source: https://context7.com/kevinswiber/mmdflux/llms.txt

Explains how to apply themes and customize colors for SVG output.

```APIDOC
## CLI SVG Theming

### Description
SVG theming provides named themes and customizable color slots for styled output.

### Method
CLI Command

### Endpoint
N/A (CLI Tool)

### Parameters
#### Command Line Arguments
- `--format` (string) - Required for SVG output (`svg`).
- `--svg-theme` (string) - Optional - Specifies a named theme (e.g., `dark`).
- `--svg-theme-auto` (string) - Optional - Enables terminal-aware light/dark theme selection. Can be a comma-separated list of light/dark theme mappings (e.g., `light:zinc-light,dark:dracula`).
- `--svg-theme-mode` (string) - Optional - Sets the SVG theme mode (e.g., `dynamic` for browser-oriented CSS variables).
- `--svg-theme-accent` (string) - Optional - Overrides the accent color slot with a specific hex value.

### Request Example
```bash
# SVG output with a named theme
mmdflux --format svg --svg-theme dark diagram.mmd -o diagram.svg

# Terminal-aware light/dark theme selection
mmdflux --format svg --svg-theme-auto diagram.mmd -o diagram.svg

# Custom light/dark theme mapping
mmdflux --format svg --svg-theme-auto=light:zinc-light,dark:dracula diagram.mmd

# Browser-oriented SVG with CSS variables plus hex fallbacks
mmdflux --format svg --svg-theme dark --svg-theme-mode dynamic diagram.mmd

# Override individual theme slots
mmdflux --format svg --svg-theme dark --svg-theme-accent "#7dd3fc" diagram.mmd
```

### Response
#### Success Response
An SVG file is generated with the specified theme and styling.

#### Response Example
(Content of `diagram.svg` with applied theming)
```

--------------------------------

### Get Icon Styles

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

Retrieves specific styles for icons used in the flowchart.

```typescript
getIconStyles()
```

--------------------------------

### Mermaid Simple Flowchart

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

A basic linear flowchart with two nodes: Start and End.

```mermaid
graph TD
    A[Start] --> B[End]
```

--------------------------------

### Day-to-day Commands: Format

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/development/setup.md

Format the code according to project standards.

```bash
just fmt
```

--------------------------------

### Get Flowchart Data

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

Retrieves all data from the flowchart database, including nodes and edges.

```typescript
getData()
```

--------------------------------

### Get Vertex Type

Source: https://github.com/kevinswiber/mmdflux/blob/main/tests/snapshots/flowchart/flowchart_code_flow.txt

Determines the type of a vertex, which can be used for conditional rendering or behavior.

```javascript
getTypeFromVertex(vertex)
```

--------------------------------

### Process Edge Types

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

Destructs edge types to determine start and end arrow types.

```typescript
Process edge types
destructEdgeType()
arrowTypeStart, arrowTypeEnd
```

--------------------------------

### Get Styles from Options

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

Generates CSS styles based on provided flowchart style options.

```typescript
styles.ts
getStyles(options)
```

--------------------------------

### Get Compiled Styles

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

Retrieves and compiles CSS styles based on provided class definitions.

```typescript
Get compiled styles
getCompiledStyles(classDefs)
```

--------------------------------

### Class Diagram Interface Realization

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

Demonstrates how classes implement interfaces. Use the '<|.. ' syntax to show interface realization.

```mermaid
classDiagram
class Logger {
  <<interface>>
  +log(message)
}
class ConsoleLogger
class FileLogger
Logger <|.. ConsoleLogger
Logger <|.. FileLogger

```

--------------------------------

### Basic Self-Loop

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

A simple example of a node looping back to itself. Useful for representing iterative processes or states.

```mermaid
graph TD
    A[Process] --> A

```

--------------------------------

### Generate Edge ID

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

Generates a unique identifier for an edge based on its start and end points and a counter.

```typescript
Generate edge ID
getEdgeId(start, end, counter)
```

--------------------------------

### Open Excalidraw Diagram in Browser

Source: https://github.com/kevinswiber/mmdflux/blob/main/packages/mmds-excalidraw/README.md

Upload the generated Excalidraw diagram and open it directly in the browser using the `--open` flag. The JSON output is still printed to stdout.

```bash
# Open directly in browser (also prints JSON to stdout)
mmdflux --format mmds --geometry-level routed diagram.mmd | npx mmds-to-excalidraw --open
```

--------------------------------

### Basic CLI Rendering

Source: https://context7.com/kevinswiber/mmdflux/llms.txt

Render Mermaid diagrams to different formats using the CLI. Supports file input or stdin, and output to stdout or files.

```bash
# Render a Mermaid file to text (default format)
mmdflux diagram.mmd
```

```bash
# Read Mermaid from stdin
printf 'graph LR
A-->B
' | mmdflux
```

```bash
# SVG output
mmdflux --format svg diagram.mmd -o diagram.svg
```

```bash
# ASCII-only text output (no Unicode box-drawing characters)
mmdflux --format ascii diagram.mmd
```

```bash
# MMDS JSON output
mmdflux --format mmds diagram.mmd
```

```bash
# MMDS JSON with full routed geometry (includes edge paths and waypoints)
mmdflux --format mmds --geometry-level routed diagram.mmd
```

--------------------------------

### Flowchart with Frontmatter Configuration

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

Demonstrates a flowchart configured with frontmatter to set the theme to dark.

```mermaid
---
config:
  theme: dark
---
graph TD
    A --> B --> C
```

--------------------------------

### Edge Routing and Layout CLI Options

Source: https://context7.com/kevinswiber/mmdflux/llms.txt

Configure edge routing styles (orthogonal, polyline, straight) and layout engine parameters via the CLI.

```bash
# Smooth orthogonal corners (default)
mmdflux --format svg diagram.mmd
```

```bash
# Sharp orthogonal corners
mmdflux --format svg --edge-preset step diagram.mmd
```

```bash
# Curved orthogonal basis paths
mmdflux --format svg --edge-preset curved-step diagram.mmd
```

```bash
# Polyline routing with sharp corners
mmdflux --format svg --edge-preset polyline diagram.mmd
```

```bash
# Direct/straight routing (with collision-aware fallback)
mmdflux --format svg --edge-preset straight diagram.mmd
```

```bash
# Explicit curve control
mmdflux --format svg --curve linear-rounded diagram.mmd
```

```bash
# Layout engine selection
mmdflux --format svg --layout-engine flux-layered diagram.mmd
```

```bash
mmdflux --format svg --layout-engine mermaid-layered diagram.mmd
```

```bash
# Custom layout spacing
mmdflux --format svg --node-spacing 60 --rank-spacing 40 --edge-spacing 25 diagram.mmd
```

--------------------------------

### Day-to-day Commands: Run CLI

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/development/setup.md

Execute the MMDFlux CLI with a specified diagram file.

```bash
just run diagram.mmd
```

--------------------------------

### Subgraph with Backward Link

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

This example shows a simple subgraph where one node links back to another within the same group.

```mermaid
graph TD
subgraph sg1[Group]
A[Node] --> B[Node2]
B --> A
end
```

--------------------------------

### Run Mmdflux Architecture Check with Timings

Source: https://github.com/kevinswiber/mmdflux/blob/main/xtask/docs/architecture.md

Perform an architecture check and display a breakdown of phase timings for performance analysis.

```bash
cargo xtask architecture check --timings
```

--------------------------------

### Edge Between Subgraphs

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

Shows how to draw an edge connecting one subgraph to another. This example connects a 'Frontend' subgraph to a 'Backend' subgraph.

```mermaid
graph TD
    subgraph frontend[Frontend]
        UI[User Interface]
        State[State Manager]
        UI --> State
    end
    subgraph backend[Backend]
        API[API Server]
        DB[Database]
        API --> DB
    end
    frontend --> backend
```

--------------------------------

### Explain Architecture Boundary

Source: https://github.com/kevinswiber/mmdflux/blob/main/CLAUDE.md

Inspect the rules and dependencies associated with a specific architectural boundary. Requires specifying the boundary name.

```bash
just architecture-explain --boundary <name>
```

--------------------------------

### Add Link to Flowchart DB

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

Adds a link between two vertices in the flowchart database. Accepts arrays for start and end points.

```typescript
addLink(_start[], _end[], linkData)
```

--------------------------------

### Get Styles with getStyles

Source: https://github.com/kevinswiber/mmdflux/blob/main/tests/snapshots/flowchart/flowchart_code_flow.txt

The getStyles function in styles.ts retrieves styling options. Pass configuration options to customize the appearance of diagrams.

```typescript
getStyles(options)
```

--------------------------------

### Open Diagram in Browser via Preview Server

Source: https://github.com/kevinswiber/mmdflux/blob/main/packages/mmds-tldraw/README.md

Convert an MMDS diagram and automatically open it in the browser using the preview server. Ensure the preview server is running in a separate terminal.

```bash
mmdflux --format mmds --geometry-level routed diagram.mmd | npx mmds-to-tldraw --open
```

--------------------------------

### Flowchart Example with Ampersand

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

This Mermaid syntax defines a flowchart using the 'graph TD' direction and the ampersand symbol to represent parallel paths.

```mermaid
graph TD
    A[Source 1] & B[Source 2] --> C[Merge]
    C --> D[Output 1] & E[Output 2]

```

--------------------------------

### Run All Scripts

Source: https://github.com/kevinswiber/mmdflux/blob/main/scripts/tests/README.md

Execute all verification scripts in the suite. Outputs are saved to a timestamped directory within scripts/tests/out.

```bash
./scripts/tests/run-all.sh
```

--------------------------------

### Text Output of Mermaid Diagram

Source: https://github.com/kevinswiber/mmdflux/blob/main/README.md

Example of the text-based output generated from a Mermaid diagram, utilizing Unicode box-drawing characters for terminal readability.

```text
         ┌───────┐
         │ Start │
         └───────┘
      ┌───┘
      │
      │
      │
┌─────┼── Horizontal Section ────────┐
│     ▼                              │
│ ┌────────┐  ┌────────┐  ┌────────┐ │
│ │ Step 1 │─►│ Step 2 │─►│ Step 3 │ │
│ └────────┘  └────────┘  └────────┘ │
│                     ┌────┘         │
└─────────────────────┼──────────────┘
                      │
                      │
               ┌──────┘
               ▼
          ┌─────┐
          │ End │
          └─────┘
```

--------------------------------

### Flowchart with Port Spread and Backward Links

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

Shows how to create a flowchart where nodes have multiple backward links, utilizing port spreading for layout. The `graph TD` syntax is used for top-down direction.

```mermaid
graph TD
    A --> B --> C --> D --> E
    E --> A
    E --> B
    E --> C
```

--------------------------------

### Autonumber Controls in Sequence Diagram

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

Shows how to control autonumbering in sequence diagrams. Autonumbering can be turned on/off and set with a starting number and increment.

```mermaid
sequenceDiagram
    participant Client
    participant API
    autonumber 10 2
    Client->>API: Login request
    API-->>Client: Challenge
    autonumber off
    Client->>API: Background ping
    autonumber
    API-->>Client: Session ready

```

--------------------------------

### Create FlowEdge Object

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/gallery.md

Defines the structure for a FlowEdge object, including start and end points, type, text, label type, and classes.

```typescript
Create FlowEdge object
- start, end, type, text
- labelType, classes[]
```

--------------------------------

### Run Dagre.js Layout

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/development/mermaid-parity.md

Execute dagre.js layout using Node.js and redirect the output to a JSON file.

```bash
node scripts/dump-dagre-layout.js input.json > output.json
```

--------------------------------

### Update Adapter Dependencies

Source: https://github.com/kevinswiber/mmdflux/blob/main/docs/development/releasing.md

When @mmds/core has breaking changes, manually update its version in adapter package.json files and run 'npm install' to update lockfiles.

```bash
npm install
```

--------------------------------

### Mmdflux JSON Diagnostics Format

Source: https://github.com/kevinswiber/mmdflux/blob/main/xtask/docs/architecture.md

Example structure of JSON diagnostics output for IDE integration. Each violation includes 'reason', spans, labels, and notes.

```json
{
  "reason": "compiler-message",
  "spans": [...],
  "labels": [...],
  "notes": [
    {
      "kind": "aria",
      "message": "rule_id: ..."
    },
    {
      "kind": "aria",
      "message": "rule_type: ..."
    },
    {
      "kind": "aria",
      "message": "detail: ..."
    }
  ]
}
```