### Usage Example

Source: https://github.com/mdaines/viz-js/blob/v3/website/src/api/index.html

Demonstrates how to import Viz.js, get an instance, and render an SVG element.

```APIDOC
## Usage Example

Viz.js exports a function, `instance`, which encapsulates decoding the WebAssembly code and instantiating the WebAssembly and Emscripten modules. This returns a promise that resolves to an instance of the `Viz` class, which provides methods for rendering graphs.

### Code Example

```javascript
import * as Viz from "@viz-js/viz";

Viz.instance().then(viz => {
  const svg = viz.renderSVGElement("digraph { a -> b }");

  document.getElementById("graph").appendChild(svg);
});
```

The instance can be used to render multiple graphs.
```

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

### Viz.js 2.x Usage Example

Source: https://github.com/mdaines/viz-js/wiki/Differences-between-Viz.js-2.x-and-3.x

Demonstrates the traditional method of initializing Viz.js in version 2.x using `new Viz()` and handling asynchronous rendering with promises.

```html
<script src="viz.js"></script>
<script src="full.render.js"></script>
<script>
  let viz = new Viz();
  
  viz.renderSVGElement("digraph { a -> b }")
    .then(element => {
      document.body.appendChild(element);
    })
    .catch(error => {
      console.error(error);
    });
</script>
```

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

### Viz.js 3.x Basic Usage Example

Source: https://github.com/mdaines/viz-js/wiki/Differences-between-Viz.js-2.x-and-3.x

Illustrates the updated initialization pattern for Viz.js 3.x using `Viz.instance()`, which returns a promise. Rendering methods now return results synchronously.

```html
<script src="viz-standalone.js"></script>
<script>
  Viz.instance()
    .then(viz => {
      document.body.appendChild(viz.renderSVGElement("digraph { a -> b }"));
    })
    .catch(error => {
      console.error(error);
    });
</script>
```

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

### Initialize Viz.js Instance and Render Graph

Source: https://github.com/mdaines/viz-js/blob/v3/website/src/api/index.html

Import Viz.js, get an instance, and then use it to render a graph to an SVG element, appending it to the DOM. This is the primary way to use Viz.js for rendering.

```javascript
import * as Viz from "@viz-js/viz";
    
    Viz.instance().then(viz => {
      const svg = viz.renderSVGElement("digraph { a -> b }");
    
      document.getElementById("graph").appendChild(svg);
    });
    
```

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

### Checkout Default Branch

Source: https://github.com/mdaines/viz-js/wiki/Release

Switch to the 'v3' branch and pull the latest changes before starting the release process.

```bash
git switch v3
git pull
```

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

### Parse Line Comments in DOT

Source: https://github.com/mdaines/viz-js/blob/v3/packages/lang-dot/test/graph.txt

Shows how to use line comments in DOT graphs. Both '//' and '#' can be used to start a line comment, which extends to the end of the line.

```dot
graph {
  a // line comment
  b # line comment
}
```

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

### Viz Instance

Source: https://github.com/mdaines/viz-js/blob/v3/website/src/api/index.html

Details on obtaining and using a Viz.js instance.

```APIDOC
## Viz Instance

### `instance()`

- **Returns**: `Promise<Viz>` - A promise that resolves to an instance of the `Viz` class.
- **Description**: Returns a promise that resolves to an instance of the `Viz` class. This instance is used to render graphs.

### Class `Viz`

- **Description**: The `Viz` class isn't exported directly but is instantiated using the `instance()` function. It provides methods for rendering graphs and accessing Graphviz information at runtime.
```

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

### Import and Render Graph with Viz.js

Source: https://github.com/mdaines/viz-js/blob/v3/packages/viz/site/index.md

Import the Viz.js library and use the instance function to render a graph. The rendered SVG element is then appended to the DOM. Ensure the Viz.js library is imported correctly.

```javascript
import * as Viz from "@viz-js/viz";

Viz.instance().then(viz => {
  const svg = viz.renderSVGElement("digraph { a -> b }");

  document.getElementById("graph").appendChild(svg);
});
```

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

### Node with Ports

Source: https://github.com/mdaines/viz-js/blob/v3/packages/lang-dot/test/graph.txt

Demonstrates defining nodes with ports. Ports are specified using colons after the node name.

```dot
graph {
a:b
a:b:c
}
```

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

### Create Release Branch

Source: https://github.com/mdaines/viz-js/wiki/Release

Create a new Git branch for the release preparation. Replace X-Y-Z with the version number using hyphens.

```bash
git switch -c viz-prepare-release-X-Y-Z
```

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

### String Identifiers and Values

Source: https://github.com/mdaines/viz-js/blob/v3/packages/lang-dot/test/graph.txt

Shows how to use strings as graph names, node names, port names, and attribute values. Strings must be enclosed in double quotes.

```dot
graph "abc" {
  "a"="b"
  "test" ["x"="y"]
  "x" -- "y" -- "z"
  subgraph "\"test\"" { }
  "a":"b":"c"
}
```

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

### Viz.js 3.x Reusable Instance Pattern

Source: https://github.com/mdaines/viz-js/wiki/Differences-between-Viz.js-2.x-and-3.x

Shows a pattern for reusing a Viz.js 3.x instance by deferring the call to `Viz.instance()` until it's actually needed, managing the promise to avoid repeated instantiations.

```html
<script src="viz-standalone.js"></script>
<script>
  let vizPromise;

  function render(src) {
    if (typeof vizPromise === "undefined") {
      vizPromise = Viz.instance();
    }

    return vizPromise.then(viz => viz.renderSVGElement(src));
  }

  render("digraph { a -> b }")
    .then(element => {
      document.body.appendChild(element);
    })
    .catch(error => {
      console.error(error);
    });
</script>
```

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

### Viz Class Getters

Source: https://github.com/mdaines/viz-js/blob/v3/website/src/api/index.html

Runtime information about the Graphviz environment available through the Viz instance.

```APIDOC
## Viz Class Getters

### `graphvizVersion`

- **Returns**: `string` - The version of Graphviz at runtime.
- **Description**: Returns the version of Graphviz used for this build.

### `formats`

- **Returns**: `string[]` - An array of supported output format names.
- **Description**: The names of the [Graphviz output formats](https://www.graphviz.org/docs/outputs/) supported at runtime.

### `engines`

- **Returns**: `string[]` - An array of supported layout engine names.
- **Description**: The names of the [Graphviz layout engines](https://www.graphviz.org/docs/layouts/) supported at runtime.

**Note**: These getters return the same values as the constants `graphvizVersion`, `formats`, and `engines`.
```

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

### Create Release Commit

Source: https://github.com/mdaines/viz-js/wiki/Release

Stage and commit the updated package-lock.json, package.json, and CHANGELOG.md files for the release. Replace X.Y.Z with the actual version number.

```bash
git add package-lock.json packages/viz/package.json packages/viz/CHANGELOG.md
git commit -m "Release @viz-js/viz X.Y.Z"
```

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

### Render Basic SVG Element with Viz.js

Source: https://github.com/mdaines/viz-js/blob/v3/packages/viz/test/browser/index.html

Use this to render a simple SVG element from a DOT language string. Ensure Viz.js instance is initialized.

```javascript
assert.ok(viz.renderSVGElement("digraph { a -> b }"));
```

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

### Viz.js - @viz-js/viz

Source: https://github.com/mdaines/viz-js/blob/v3/website/src/api/index.html

Provides a WebAssembly build of Graphviz with a simple JavaScript wrapper.

```APIDOC
## GET @viz-js/viz

### Description
Initializes and provides access to the WebAssembly build of Graphviz.

### Method
GET

### Endpoint
/api/@viz-js/viz

### Parameters
#### Query Parameters
None

### Request Example
None

### Response
#### Success Response (200)
- **GraphvizInstance** (object) - An instance of the Graphviz engine.

#### Response Example
```json
{
  "graphviz": "..."
}
```
```

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

### Node List Definition

Source: https://github.com/mdaines/viz-js/blob/v3/packages/lang-dot/test/graph.txt

Shows how to define multiple nodes in a list, separated by commas. This is useful for defining several nodes at once.

```dot
graph { a, b:x:y; c }
```

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

### Viz.js Render Options

Source: https://github.com/mdaines/viz-js/blob/v3/website/src/api/index.html

Configuration options for the viz.render function.

```APIDOC
## Viz.js Render Options

### Description
Configuration options for the `viz.render` function, allowing customization of graph attributes, layout engines, and image handling.

### Parameters
#### Request Body
- **engine** (string) - Optional - The Graphviz layout engine to use for graph layout. Defaults to "dot".
- **yInvert** (boolean) - Optional - Invert y coordinates in output. Corresponds to the `-y` Graphviz command-line option. Defaults to `false`.
- **reduce** (boolean) - Optional - Reduce the graph. Corresponds to the `-x` Graphviz command-line option. Defaults to `false`.
- **graphAttributes** (Attributes) - Optional - Sets the default graph attributes. Corresponds to the `-G` Graphviz command-line option.
- **nodeAttributes** (Attributes) - Optional - Sets the default node attributes. Corresponds to the `-N` Graphviz command-line option.
- **edgeAttributes** (Attributes) - Optional - Sets the default edge attributes. Corresponds to the `-E` Graphviz command-line option.
- **images** (ImageSize[]) - Optional - Image sizes to use when rendering nodes with `image` attributes.
- **trustedTypePolicy** (object) - Optional - The TrustedTypePolicy object used to sanitize the rendered SVG string before parsing.

### Request Example
```json
{
  "engine": "neato",
  "reduce": true,
  "graphAttributes": {
    "label": "My Graph"
  },
  "images": [
    { "name": "test.png", "width": 300, "height": 200 }
  ]
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates "success".
- **output** (string) - The rendered graph output.
- **errors** (RenderError[]) - A list of warning messages.

#### Failure Response
- **status** (string) - Indicates "failure".
- **output** (undefined) - No output is provided on failure.
- **errors** (RenderError[]) - A list of error messages.

#### Response Example (Success)
```json
{
  "status": "success",
  "output": "<svg>...</svg>",
  "errors": [
    { "level": "warning", "message": "Some warning" }
  ]
}
```

#### Response Example (Failure)
```json
{
  "status": "failure",
  "output": undefined,
  "errors": [
    { "level": "error", "message": "Graphviz error" }
  ]
}
```
```

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

### Render Options

Source: https://github.com/mdaines/viz-js/blob/v3/website/src/api/index.html

Options that can be passed to rendering methods.

```APIDOC
## Render Options

### `RenderOptions`

- **`format`** (`string`) - Optional - Defaults to "dot". The [Graphviz output format](https://www.graphviz.org/docs/outputs/) to render (e.g., "dot" or "svg").
- **`engine`** (`string`) - Optional - Defaults to "dot". The [Graphviz layout engine](https://www.graphviz.org/docs/layouts/) to use for graph layout (e.g., "dot" or "neato").
- **`yInvert`** (`boolean`) - Optional - Defaults to `false`. Invert y coordinates in output. Corresponds to the [`-y` Graphviz command-line option](https://www.graphviz.org/doc/info/command.html#-y).
- **`reduce`** (`boolean`) - Optional - Defaults to `false`.
```

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

### Viz.js Render Formats Options

Source: https://github.com/mdaines/viz-js/blob/v3/website/src/api/index.html

Configuration options for the viz.renderFormats function.

```APIDOC
## Viz.js Render Formats Options

### Description
Configuration options for the `viz.renderFormats` function, allowing rendering in multiple formats simultaneously.

### Parameters
#### Request Body
- **formats** (string[]) - Required - An array of desired output formats (e.g., ["svg", "png"]).
- **engine** (string) - Optional - The Graphviz layout engine to use for graph layout. Defaults to "dot".
- **yInvert** (boolean) - Optional - Invert y coordinates in output. Corresponds to the `-y` Graphviz command-line option. Defaults to `false`.
- **reduce** (boolean) - Optional - Reduce the graph. Corresponds to the `-x` Graphviz command-line option. Defaults to `false`.
- **graphAttributes** (Attributes) - Optional - Sets the default graph attributes. Corresponds to the `-G` Graphviz command-line option.
- **nodeAttributes** (Attributes) - Optional - Sets the default node attributes. Corresponds to the `-N` Graphviz command-line option.
- **edgeAttributes** (Attributes) - Optional - Sets the default edge attributes. Corresponds to the `-E` Graphviz command-line option.
- **images** (ImageSize[]) - Optional - Image sizes to use when rendering nodes with `image` attributes.
- **trustedTypePolicy** (object) - Optional - The TrustedTypePolicy object used to sanitize the rendered SVG string before parsing.

### Request Example
```json
{
  "formats": ["svg", "png"],
  "engine": "dot",
  "graphAttributes": {
    "label": "Multi-Format Graph"
  }
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates "success".
- **output** (object) - An object where keys are the requested formats and values are the rendered graph output for each format.
- **errors** (RenderError[]) - A list of warning messages.

#### Failure Response
- **status** (string) - Indicates "failure".
- **output** (undefined) - No output is provided on failure.
- **errors** (RenderError[]) - A list of error messages.

#### Response Example (Success)
```json
{
  "status": "success",
  "output": {
    "svg": "<svg>...</svg>",
    "png": "base64_encoded_png_data"
  },
  "errors": [
    { "level": "warning", "message": "Some warning" }
  ]
}
```

#### Response Example (Failure)
```json
{
  "status": "failure",
  "output": undefined,
  "errors": [
    { "level": "error", "message": "Graphviz error" }
  ]
}
```
```

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

### Verify Locked Dependencies

Source: https://github.com/mdaines/viz-js/wiki/Release

Check the changes in the package-lock.json file to ensure only the viz package version was updated and dependencies remain locked.

```bash
git diff package-lock.json
```

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

### Parse HTML-like Strings in DOT

Source: https://github.com/mdaines/viz-js/blob/v3/packages/lang-dot/test/graph.txt

Demonstrates the use of HTML-like strings within DOT graphs for complex node labels. Ensure proper HTML structure within the angle brackets.

```dot
graph <> {
  <abc>=<<TABLE>
    <TR>
      <TD BGCOLOR="blue">lorem</TD>
      <TD BGCOLOR="green">ipsum</TD>
      <TD BGCOLOR="yellow" PORT="abc">dolor</TD>
    </TR>
  </TABLE>>
  <<b>test</b>> [<x>=<y>]
  <<br/>> -- <<br/>> -- <<br/><!-- comment ->>
  subgraph <y> { }
  <a>:<b>:<c>
}
```

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

### Bump Package Version

Source: https://github.com/mdaines/viz-js/wiki/Release

Increment the version of the @viz-js/viz package using npm. Note the new version for subsequent steps.

```bash
npm version minor --workspace packages/viz
```

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

### Attribute Statements

Source: https://github.com/mdaines/viz-js/blob/v3/packages/lang-dot/test/graph.txt

Shows how to set default attributes for graph, edge, and node types using attribute statements.

```dot
graph {
  x=y
  graph [a=b]
  edge [c=d]
  node [e=f]
}
```

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

### Node and Edge Attributes

Source: https://github.com/mdaines/viz-js/blob/v3/packages/lang-dot/test/graph.txt

Demonstrates assigning attributes to nodes and edges. Attributes are defined in square brackets.

```dot
graph {
  a [x=y, z=w w=w; y=x]
  b -- c -- d [m=n] [n=o]
}
```

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

### Constants

Source: https://github.com/mdaines/viz-js/blob/v3/website/src/api/index.html

Information about the Graphviz version, supported formats, and layout engines.

```APIDOC
## Constants

### `graphvizVersion`

- **Type**: `string`
- **Description**: The version of Graphviz used for this build.

### `formats`

- **Type**: `string[]`
- **Description**: The names of the [Graphviz output formats](https://www.graphviz.org/docs/outputs/) supported in this build.

### `engines`

- **Type**: `string[]`
- **Description**: The names of the [Graphviz layout engines](https://www.graphviz.org/docs/layouts/) supported in this build.
```

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

### Rendering Methods

Source: https://github.com/mdaines/viz-js/blob/v3/website/src/api/index.html

Methods for rendering graphs into different formats.

```APIDOC
## Rendering Methods

### `render(input, options?)`

- **Parameters**:
  - **input** (`string` | `Graph`) - Required - The graph description in DOT syntax or a graph object.
  - **options** (`RenderOptions`) - Optional - Rendering options.
- **Returns**: `RenderResult` - An object containing the rendering result.
- **Description**: Renders the graph described by the input and returns the result as an object. Does not throw an error for rendering failures (e.g., invalid DOT syntax), but throws for invalid input types or unexpected runtime errors.

### `renderFormats(input, formats, options?)`

- **Parameters**:
  - **input** (`string` | `Graph`) - Required - The graph description in DOT syntax or a graph object.
  - **formats** (`string[]`) - Required - An array of desired output formats.
  - **options** (`RenderOptions`) - Optional - Rendering options. The `format` option is ignored.
- **Returns**: `MultipleRenderResult` - An object keyed by format with rendering results.
- **Description**: Renders the graph for each format in `formats` and returns the result as an object. `output` is an object keyed by format for successful results. Does not throw an error for rendering failures, but throws for invalid input types or unexpected runtime errors.

### `renderString(input, options?)`

- **Parameters**:
  - **input** (`string` | `Graph`) - Required - The graph description in DOT syntax or a graph object.
  - **options** (`RenderOptions`) - Optional - Rendering options.
- **Returns**: `string` - The rendering result as a string.
- **Description**: Renders the input and returns the result as a string. Throws an error if rendering failed.

### `renderSVGElement(input, options?)`

- **Parameters**:
  - **input** (`string` | `Graph`) - Required - The graph description in DOT syntax or a graph object.
  - **options** (`SVGRenderOptions`) - Optional - SVG rendering options.
- **Returns**: `SVGSVGElement` - An SVG element representing the rendered graph.
- **Description**: Convenience method that renders the input, parses the output, and returns an SVG element. Throws an error if rendering failed.

### `renderJSON(input, options?)`

- **Parameters**:
  - **input** (`string` | `Graph`) - Required - The graph description in DOT syntax or a graph object.
  - **options** (`RenderOptions`) - Optional - Rendering options. The `format` option is ignored.
- **Returns**: `object` - A JSON object representing the rendered graph.
- **Description**: Convenience method that renders the input, parses the output, and returns a JSON object. Throws an error if rendering failed.
```

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

### Subgraph Definition

Source: https://github.com/mdaines/viz-js/blob/v3/packages/lang-dot/test/graph.txt

Demonstrates defining subgraphs. Subgraphs allow grouping of nodes and other elements.

```dot
graph {
  { a b }
  subgraph another { c d }
}
```

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

### Numeric Identifiers and Values

Source: https://github.com/mdaines/viz-js/blob/v3/packages/lang-dot/test/graph.txt

Demonstrates the use of numbers as graph names, node names, port names, and attribute values.

```dot
graph 123 {
  123=.99
  123 [8=9]
  1 -- -2 -- 3.
  subgraph 4 { }
  5:6:7
}
```

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

### Empty Directed Graph DOT Syntax

Source: https://github.com/mdaines/viz-js/blob/v3/website/src/api/index.html

The DOT syntax equivalent of an empty directed graph. This is a minimal representation.

```dot
digraph { }
```

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

### Use Trusted Type Policy for Sanitization in Viz.js

Source: https://github.com/mdaines/viz-js/blob/v3/packages/viz/test/browser/index.html

Demonstrates how to use a custom trusted type policy to sanitize HTML output from Viz.js. This is useful for security when rendering untrusted content.

```javascript
let wasFakeSanitized = false;
const fakePolicy = trustedTypes.createPolicy("fake", {
  createHTML(input) {
    wasFakeSanitized = true;
    return input;
  }
});
viz.renderSVGElement("digraph { a -> b }", { trustedTypePolicy: fakePolicy });
assert.ok(wasFakeSanitized);
```

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

### Minimal Graph Definition

Source: https://github.com/mdaines/viz-js/blob/v3/packages/lang-dot/test/graph.txt

Defines the most basic graph structure. Use this for an empty graph.

```dot
graph {}
```

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

### Graph Header with Strict Digraph

Source: https://github.com/mdaines/viz-js/blob/v3/packages/lang-dot/test/graph.txt

Illustrates a graph header with 'strict digraph' keywords. Use 'strict' to disallow duplicate edges.

```dot
strict digraph test {}
```

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

### Simple Undirected Graph DOT Syntax

Source: https://github.com/mdaines/viz-js/blob/v3/website/src/api/index.html

The DOT syntax for a simple undirected graph. Note the use of '--' for undirected edges.

```dot
graph {
  a -- b
  b -- c
  c -- a
}
```

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

### Parse Multi-line Strings in DOT

Source: https://github.com/mdaines/viz-js/blob/v3/packages/lang-dot/test/graph.txt

Illustrates the syntax for defining multi-line strings in DOT. Newlines within quotes are preserved, and backslashes can be used for line continuation.

```dot
graph {
  "test
test\
test"
}
```

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

### Statements with Optional Semicolons

Source: https://github.com/mdaines/viz-js/blob/v3/packages/lang-dot/test/graph.txt

Illustrates that semicolons are optional for statements in DOT. Use semicolons for clarity if preferred.

```dot
graph {
a;
b
}
```

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

### Render Graphviz Diagram to SVG

Source: https://github.com/mdaines/viz-js/blob/v3/README.md

Use this snippet to render a Graphviz DOT language string into an SVG element and append it to the document body. Ensure the Viz.js library is imported.

```javascript
import * as Viz from "@viz-js/viz";

Viz.instance().then(viz => {
  document.body.appendChild(viz.renderSVGElement("digraph { a -> b }"))
});
```

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

### Valid Node Names

Source: https://github.com/mdaines/viz-js/blob/v3/packages/lang-dot/test/graph.txt

Illustrates various valid identifiers for nodes, including alphanumeric characters, underscores, and Unicode characters.

```dot
graph {
  a
  A_1
  café
   
  図
}
```

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

### Viz.js - @viz-js/lang-dot

Source: https://github.com/mdaines/viz-js/blob/v3/website/src/api/index.html

Provides CodeMirror language support for the Graphviz DOT language.

```APIDOC
## GET @viz-js/lang-dot

### Description
Returns a `LanguageSupport` instance for the Graphviz DOT language, compatible with CodeMirror.

### Method
GET

### Endpoint
/api/@viz-js/lang-dot

### Parameters
#### Query Parameters
None

### Request Example
None

### Response
#### Success Response (200)
- **LanguageSupport** (object) - An instance of CodeMirror's LanguageSupport for DOT.

#### Response Example
```json
{
  "languageSupportInstance": "..."
}
```
```

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

### Parse Concatenated Strings in DOT

Source: https://github.com/mdaines/viz-js/blob/v3/packages/lang-dot/test/graph.txt

Demonstrates string concatenation using the '+' operator in DOT. This allows building longer strings from smaller parts.

```dot
graph {
  "a" + "b" +
  "c"
  d
}
```

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

### Node Definition

Source: https://github.com/mdaines/viz-js/blob/v3/packages/lang-dot/test/graph.txt

Shows how to define a single node within a graph. Nodes are the fundamental elements of a graph.

```dot
graph { a }
```

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

### Push Release Branch

Source: https://github.com/mdaines/viz-js/wiki/Release

Push the newly created release branch to the remote repository and set it as the upstream.

```bash
git push --set-upstream origin HEAD
```

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

### Render Graph with Image Size

Source: https://github.com/mdaines/viz-js/blob/v3/website/src/api/index.html

Specify image sizes for nodes with 'image' attributes. This helps Graphviz correctly interpret the dimensions of external images used in the graph.

```javascript
viz.render("graph { a[image=\"test.png\"] }", {
  images: [
    { name: "test.png", width: 300, height: 200 }
  ]
});

```

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

### Parse Block Comments in DOT

Source: https://github.com/mdaines/viz-js/blob/v3/packages/lang-dot/test/graph.txt

Illustrates the syntax for block comments in DOT graphs. Block comments are enclosed in '/*' and '*/' and can span multiple lines.

```dot
graph {
  a /*
  comment
  */ b
}
```

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

### Empty Directed Graph Object

Source: https://github.com/mdaines/viz-js/blob/v3/website/src/api/index.html

Represents an empty directed graph. Use this as a base for constructing more complex graphs.

```javascript
{}
```

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

### Parse Case Insensitive Keywords in DOT

Source: https://github.com/mdaines/viz-js/blob/v3/packages/lang-dot/test/graph.txt

Demonstrates that DOT keywords like 'STRICT', 'DIGRAPH', and 'SUBGRAPH' are case-insensitive. This allows for flexible keyword usage.

```dot
STRICT DIGRAPH {
  SUBGRAPH {
    Graph []
    Node []
    Edge []
  }
}
```

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

### Parse Empty HTML-like String in DOT

Source: https://github.com/mdaines/viz-js/blob/v3/packages/lang-dot/test/graph.txt

Shows how to define an empty HTML-like string for a label in DOT. This is useful for nodes or edges that should not display any label.

```dot
graph { a[label=<>] }
```

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

### Complex Graph Object with Attributes, Subgraphs, and HTML Labels

Source: https://github.com/mdaines/viz-js/blob/v3/website/src/api/index.html

A comprehensive graph object demonstrating graph, node, and edge attributes, along with subgraphs and HTML-formatted labels for nodes and edges. The 'html' property within labels allows for rich text formatting.

```javascript
{
  graphAttributes: {
    rankdir: "LR"
  },
  nodeAttributes: {
    shape: "circle"
  },
  nodes: [
    { name: "a", attributes: { label: { html: "<i>A</i>" }, color: "red" } },
    { name: "b", attributes: { label: { html: "<b>A</b>" }, color: "green" } }
  ],
  edges: [
    { tail: "a", head: "b", attributes: { label: "1" } },
    { tail: "b", head: "c", attributes: { label: "2", headport: "name" } }
  ],
  subgraphs: [
    {
      name: "cluster_1",
      nodes: [
        {
          name: "c",
          attributes: {
            label: {
              html: "<table><tr><td>test</td><td port=\"name\">C</td></tr></table>"
            }
          }
        }
      ]
    }
  ]
}
```

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

### Chained Edge Definitions

Source: https://github.com/mdaines/viz-js/blob/v3/packages/lang-dot/test/graph.txt

Illustrates defining a chain of directed edges using the '->' operator. This is common for flowcharts or state transitions.

```dot
digraph {
  a -> b -> c -> d -> e
}
```

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

### Image Size Object

Source: https://github.com/mdaines/viz-js/blob/v3/website/src/api/index.html

Defines the structure for specifying the dimensions of an image used as a node attribute.

```APIDOC
## Image Size Object

### Description
Specifies the size of an image used as a node's `image` attribute.

### Properties

- **name** (string) - Required - The name or path of the image. Supports filenames, absolute paths, and URLs. Relative paths are not supported.
- **width** (string | number) - Optional - The width of the image. Can be a number (defaults to points) or a string with units (in, px, pc, pt, cm, mm).
- **height** (string | number) - Optional - The height of the image. Can be a number (defaults to points) or a string with units (in, px, pc, pt, cm, mm).

### Example Usage

```json
{
  "image": "example.png",
  "width": 100,
  "height": "50px"
}
```
```

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

### Sanitize SVG Links with DOMPurify and Trusted Types in Viz.js

Source: https://github.com/mdaines/viz-js/blob/v3/packages/viz/test/browser/index.html

Renders an SVG graph with a link, demonstrating how DOMPurify can be used with a trusted type policy to sanitize potentially harmful attributes like 'href' containing JavaScript.

```javascript
const trustedTypePolicy = trustedTypes.createPolicy("purify", {
  createHTML(input) {
    return DOMPurify.sanitize(input, {
      RETURN_TRUSTED_TYPE: false,
      USE_PROFILES: { svg: true }
    });
  }
});
const src = 
`graph { a[href="javascript:alert(1)"] }
`;
const dirty = viz.renderSVGElement(src);
const clean = viz.renderSVGElement(src, { trustedTypePolicy });
assert.equal(dirty.querySelector("a").getAttributeNS("http://www.w3.org/1999/xlink", "href"), "javascript:alert(1)");
assert.equal(clean.querySelector("a").getAttributeNS("http://www.w3.org/1999/xlink", "href"), null);
```

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

### Simple Undirected Graph Object

Source: https://github.com/mdaines/viz-js/blob/v3/website/src/api/index.html

Defines a simple undirected graph with three nodes and three edges forming a cycle. Ensure 'directed' is set to false for undirected graphs.

```javascript
{
  directed: false,
  edges: [
    { tail: "a", head: "b" },
    { tail: "b", head: "c" },
    { tail: "c", head: "a" }
  ]
}
```

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

### Render SVG with Image Option in Viz.js

Source: https://github.com/mdaines/viz-js/blob/v3/packages/viz/test/browser/index.html

Renders an SVG element with an image, specifying image details like name, width, and height. The image URL is set using the xlink:href attribute.

```javascript
const svg = viz.renderSVGElement("graph { a[image=\"test.png\"] }", { images: [
    { name: "test.png", width: 300, height: 200 }
  ] });
assert.ok(svg);
const image = svg.querySelector("image");
assert.equal(image.getAttributeNS("http://www.w3.org/1999/xlink", "href"), "test.png");
assert.equal(image.getAttribute("width"), "300px");
assert.equal(image.getAttribute("height"), "200px");
```

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

### Graph Object Structure

Source: https://github.com/mdaines/viz-js/blob/v3/website/src/api/index.html

Defines the structure of a graph object that can be passed to Viz.js rendering methods. It includes properties for graph direction, attributes, nodes, edges, and subgraphs.

```APIDOC
## Graph Object Structure

### Description
Represents a graph that can be rendered by Viz.js. It supports directed and undirected graphs, attributes for graph, nodes, and edges, as well as nested subgraphs.

### Properties

- **name** (string) - Optional - The name of the graph.
- **strict** (boolean) - Optional - Defaults to `false`. If `true`, enforces strict graph rules.
- **directed** (boolean) - Optional - Defaults to `true`. If `true`, the graph is directed; otherwise, it's undirected.
- **graphAttributes** (Attributes) - Optional - Attributes applied to the graph itself.
- **nodeAttributes** (Attributes) - Optional - Default attributes for all nodes in the graph.
- **edgeAttributes** (Attributes) - Optional - Default attributes for all edges in the graph.
- **nodes** (Node[]) - Optional - An array of node objects.
- **edges** (Edge[]) - Optional - An array of edge objects.
- **subgraphs** (Subgraph[]) - Optional - An array of subgraph objects.

### Attributes Object

- **[name: string]** (string | number | boolean | HTMLString) - Any attribute name can be used as a key, with its value being a string, number, boolean, or an HTMLString.

### HTMLString Object

- **html** (string) - A string containing HTML markup for node labels.

### Node Object

- **name** (string) - Required - The unique identifier for the node.
- **attributes** (Attributes) - Optional - Specific attributes for this node.

### Edge Object

- **tail** (string) - Required - The name of the source node for the edge.
- **head** (string) - Required - The name of the target node for the edge.
- **attributes** (Attributes) - Optional - Specific attributes for this edge.

### Subgraph Object

- **name** (string) - Optional - The name of the subgraph. Prefixed with `cluster_` for cluster subgraphs.
- **graphAttributes** (Attributes) - Optional - Attributes applied to the subgraph itself.
- **nodeAttributes** (Attributes) - Optional - Default attributes for nodes within this subgraph.
- **edgeAttributes** (Attributes) - Optional - Default attributes for edges within this subgraph.
- **nodes** (Node[]) - Optional - An array of node objects within this subgraph.
- **edges** (Edge[]) - Optional - An array of edge objects within this subgraph.
- **subgraphs** (Subgraph[]) - Optional - An array of nested subgraph objects.

### Example Request Body (Simple Undirected Graph)

```json
{
  "directed": false,
  "edges": [
    { "tail": "a", "head": "b" },
    { "tail": "b", "head": "c" },
    { "tail": "c", "head": "a" }
  ]
}
```

### Example Request Body (Complex Graph with Subgraph and HTML Labels)

```json
{
  "graphAttributes": {
    "rankdir": "LR"
  },
  "nodeAttributes": {
    "shape": "circle"
  },
  "nodes": [
    { "name": "a", "attributes": { "label": { "html": "<i>A</i>" }, "color": "red" } },
    { "name": "b", "attributes": { "label": { "html": "<b>A</b>" }, "color": "green" } }
  ],
  "edges": [
    { "tail": "a", "head": "b", "attributes": { "label": "1" } },
    { "tail": "b", "head": "c", "attributes": { "label": "2", "headport": "name" } }
  ],
  "subgraphs": [
    {
      "name": "cluster_1",
      "nodes": [
        {
          "name": "c",
          "attributes": {
            "label": {
              "html": "<table><tr><td>test</td><td port=\"name\">C</td></tr></table>"
            }
          }
        }
      ]
    }
  ]
}
```
```

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

### Complex Graph DOT Syntax

Source: https://github.com/mdaines/viz-js/blob/v3/website/src/api/index.html

The DOT syntax representation of the complex graph object. It includes graph and node attributes, HTML-like labels, and a subgraph definition.

```dot
digraph {
  graph [rankdir="LR"]
  node [shape="circle"]
  a [label=<<i>A</i>>, color="red"]
  b [label=<<b>B</b>>, color="green"]
  a -> b [label="1"]
  b -> c:name [label="2"]
  subgraph cluster_1 {
    c [label=<<table><tr><td port=\"name\">C</td></tr></table>>]
  }
}
```

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

### Complex Edge Definitions

Source: https://github.com/mdaines/viz-js/blob/v3/packages/lang-dot/test/graph.txt

Shows advanced edge definitions, including edges with ports and edges connecting node lists or subgraphs.

```dot
graph {
  a -- b:p:s
  c, d -- { e f } -- g
}
```

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

### Edge Statement

Source: https://github.com/mdaines/viz-js/blob/v3/packages/lang-dot/test/graph.txt

Defines a simple edge between two nodes using the '--' operator. This represents an undirected edge.

```dot
graph {
  a -- b
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.