Beoe

https://github.com/stereobooster/beoe
Admin
BEOE makes it easy to add custom diagrams, like SVG, to Markdown documentation, inspired by Byrne's...
Tokens:26,397
Snippets:108
Trust Score:8.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### Basic Test Snippet (test)

Source: https://github.com/stereobooster/beoe/blob/main/packages/rehype-code-hook-img/test/fixtures/a.md

This snippet shows a minimal code block with the language label 'test' and the content 'test'. It serves as a placeholder or example, not representing actual programming logic. There are no specific dependencies or inputs/outputs.

```test
test
```

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

### Simple State Diagram v2 Mermaid

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/mermaid-test.md

This snippet shows a basic state diagram using the v2 syntax in Mermaid. It illustrates states and transitions, including the start (`[*]`) and end (`[*]`) states, representing simple movement and crash scenarios.

```mermaid
---
title: Simple sample
---
stateDiagram-v2
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
```

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

### Basic Graph D2 (Theme 101)

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/d2-test.md

Renders a simple directed graph with five nodes connected sequentially, applying 'theme 101' for specific styling presets.

```D2
direction: right
a1 -> b -> c -> d -> e
```

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

### Rendering Simple DOT Graph with Vizdom (data-url strategy)

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/vizdom-test.md

This snippet contains the identical simple linear graph DOT code as the previous example. It is rendered using the 'vizdom' tool with the specific `strategy=data-url`, indicating the resulting graph data will be embedded directly in the output document, likely as a data URL for an image or SVG element.

```DOT
digraph TD {
  node [shape=box]
  rankdir="LR"
  a -> b -> c -> d -> e -> f -> g
}
```

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

### Basic Graph D2 (ELK Layout)

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/d2-test.md

Renders a simple directed graph with five nodes connected sequentially, explicitly specifying the 'elk' layout engine.

```D2
direction: right
a -> b -> c -> f
b -> d -> e -> f
```

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

### Basic Graph D2 (Inline Strategy)

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/d2-test.md

Renders a simple directed graph with five nodes connected sequentially, explicitly specifying the 'inline' rendering strategy.

```D2
direction: right
a -> b -> c -> d -> e
```

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

### Basic Graph D2 (Padding 1)

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/d2-test.md

Renders a simple directed graph with five nodes connected sequentially, applying padding of 1 unit around the diagram content.

```D2
direction: right
a2 -> b -> c -> d -> e
```

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

### Basic Graph D2 (Sketch Style)

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/d2-test.md

Renders a simple directed graph with five nodes connected sequentially, applying the sketch style option for a hand-drawn appearance.

```D2
direction: right
a -> b -> c -> d -> e
```

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

### Rendering DOT as iframe/file with Vizdom (dagre layout, ants class)

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/vizdom-test.md

This snippet contains the identical DOT code for the finite state machine graph as the previous example. However, the 'vizdom' parameters `strategy=file` and `tag=iframe` indicate that this rendering is intended to be embedded as an iframe, likely pointing to a file generated from the DOT code. It also includes 'dagre' layout and the 'ants' class.

```DOT
digraph finite_state_machine {
    bgcolor="transparent";
    fontname="Helvetica,Arial,sans-serif";
    node [fontname="Helvetica,Arial,sans-serif"]
    edge [fontname="Helvetica,Arial,sans-serif"]
    rankdir=LR;
    node [shape = doublecircle]; 0 3 4 8;
    node [shape = circle];
    0 -> 2 [label = "SS(B)"];
    0 -> 1 [label = "SS(S)"];
    1 -> 3 [label = "S($end)"];
    2 -> 6 [label = "SS(b)"];
    2 -> 5 [label = "SS(a)"];
    2 -> 4 [label = "S(A)"];
    5 -> 7 [label = "S(b)"];
    5 -> 5 [label = "S(a)"];
    6 -> 6 [label = "S(b)"];
    6 -> 5 [label = "S(a)"];
    7 -> 8 [label = "S(b)"];
    7 -> 5 [label = "S(a)"];
    8 -> 6 [label = "S(b)"];
    8 -> 5 [label = "S(a)"];
}
```

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

### Basic Gantt Diagram Mermaid

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/mermaid-test.md

This snippet generates a simple Gantt chart using Mermaid syntax. It includes a title, date format definition, and defines tasks within different sections with their start dates and durations.

```mermaid
gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        another task    :24d
```

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

### Importing Subgraphs D2

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/d2-test.md

Demonstrates how to import a subgraph definition from an external D2 file ('shared/x.d2') and integrate it into the current graph.

```D2
direction: right
a:"shared/x.d2"
a -> b
```

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

### Applying Global Configuration - TypeScript/JavaScript

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/diagrams/penrose.mdx

Demonstrates how to pass configuration options directly to the `rehypePenrose` plugin when using it in a `unified` pipeline. This example shows how to set global `width` and `height` properties for all generated diagrams, overriding default values if any.

```ts
use(rehypePenrose, {
  width: 400,
  height: 400,
});
```

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

### Simple Sequence Diagram D2

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/d2-test.md

Creates a basic sequence diagram showing messages exchanged between two participants ('alice' and 'bob') with multi-line text support for the messages.

```D2
shape: sequence_diagram
alice -> bob: What does it mean\nto be well-adjusted?
bob -> alice: The ability to play bridge or\ngolf as if they were games.
```

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

### Flowchart with Markdown and Newlines in Labels Mermaid

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/mermaid-test.md

This snippet shows a Mermaid flowchart that utilizes an `init` block for configuration and demonstrates using Markdown formatting and multi-line text within node labels by enclosing them in backticks (` `).

```mermaid
%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
    markdown["`This **is** _Markdown_`"]
    newLines["`Line1
    Line 2
    Line 3`"]
    markdown --> newLines
```

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

### Rendering Simple DOT Graph with Vizdom (default strategy)

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/vizdom-test.md

This snippet defines a simple linear graph 'a -> b -> c...' using the DOT language. It is rendered using the 'vizdom' tool with default parameters (no specific strategy or format specified). The surrounding text notes its compatibility with dark mode and its use within a 'rehype-plugin' context.

```DOT
digraph TD {
  node [shape=box]
  rankdir="LR"
  a -> b -> c -> d -> e -> f -> g
}
```

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

### Basic Graph D2 (Interactive Inline)

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/d2-test.md

Demonstrates a simple directed graph with five nodes connected sequentially, using the inline rendering strategy and various styling options like dark scheme disabled, dagre layout, shadow class, and SVGO disabled.

```D2
direction: right
a -> b -> c -> d -> e
```

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

### Defining Nested Containers D2

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/d2-test.md

Illustrates how to define shapes nested within other shapes using dot notation (e.g., server.process) and connect them, demonstrating hierarchical grouping and relationships.

```D2
server

# Declares a shape inside of another shape
server.process

# Can declare the container and child in same line
im a parent.im a child

# Since connections can also declare keys, this works too
apartment.Bedroom.Bathroom -> office.Spare Room.Bathroom: Portal
```

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

### Custom Shapes and Icons D2 (img)

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/d2-test.md

Defines custom shapes ('my-network', 'github', 'a') with specific icons and links, demonstrating how to override default shapes and include external images/URLs, rendered using the img strategy.

```D2
my-network: {
  icon: https://icons.terrastruct.com/infra/019-network.svg
}
github: {
  shape: image
  icon: https://icons.terrastruct.com/dev/github.svg
}
a {
  link: https://example.com
  label: link
}
b
c
```

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

### Simple Graph Diagram Mermaid

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/mermaid-test.md

This snippet presents a basic left-to-right graph diagram using Mermaid syntax, modeling a simple decision-making process. It includes accessibility titles and descriptions for better context.

```mermaid
graph LR
    accTitle: Big Decisions
    accDescr: Bob's Burgers process for making big decisions
    A[Identify Big Decision] --> B{Make Big Decision}
    B --> D[Be done]
```

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

### Basic Block Diagram Beta Mermaid

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/mermaid-test.md

This snippet generates a simple block diagram using the beta syntax in Mermaid. It arranges blocks in columns, includes arrows for connections, uses spacing, and applies styling to a specific block.

```mermaid
block-beta
columns 1
  db(("DB"))
  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
  block:ID
    A
    B["A wide one in the middle"]
    C
  end
  space
  D
  ID --> D
  C --> D
  style B fill:#969,stroke:#333,stroke-width:4px
```

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

### Basic Graph D2 (object Tag)

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/d2-test.md

Shows a simple directed graph with five nodes connected sequentially, rendered using the object tag strategy and various styling options like dark scheme disabled, dagre layout, shadow class, and SVGO disabled.

```D2
direction: right
a -> b -> c -> d -> e
```

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

### Git Graph Diagram Mermaid

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/mermaid-test.md

This snippet generates a Git graph visualization using Mermaid syntax, illustrating branching, commits, and merging operations to represent a simplified Git history.

```mermaid
---
title: Example Git diagram
---
gitGraph
   commit
   commit
   branch develop
   checkout develop
   commit
   commit
   checkout main
   merge develop
   commit
   commit
```

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

### Basic Sequence Diagram Mermaid

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/mermaid-test.md

This snippet illustrates a simple sequence diagram using Mermaid syntax, showing the interaction flow between two participants, Alice and John, with messages exchanged between them.

```mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
```

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

### Illustrating Rust Concurrency and Ownership (DOT)

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/vizdom-test.md

This DOT code defines a directed graph visualizing Rust's memory management and concurrency primitives. It maps smart pointers like Arc, Rc, Mutex, and RwLock to concepts such as unique/shared ownership, mutability, thread safety, and read/write access, showing which primitives are suitable for different scenarios. It requires Graphviz to render.

```DOT
digraph G {
    rankdir="LR"
    node [shape=box, fontsize="12"];
    subgraph cluster_ownership {
        label="Ownership"
        style=dashed
        threads [label=Threads, color=green]
        ownership1 [label="Ownership", color=brown]
        threads -> ownership1 [label="<single>"]
        allocate [label=Allocate, color=orange]
        ownership1 -> allocate [label="<unique>"]
        interior_mut [label="Interior-mutability", color=gold]
        allocate -> interior_mut [label="<stack>"]
        t [label=T]
        interior_mut -> t [label="<not needed>"]
        type1 [label=Type, color=blue]
        interior_mut -> type1 [label="<need>", fontcolor=gold, color=gold]
        cell_t [label="Cell<T>", shape=plaintext]
        type1 -> cell_t [label="<Copy|move>", fontcolor=blue, color=blue]
        refcell_t [label="RefCell<T>", shape=plaintext]
        type1 -> refcell_t [label="<& reference>"]
        box_t [label="Box<T>", shape=plaintext]
        allocate -> box_t [label="<heap>", fontcolor=orange, color=orange]
        mutable1 [label=Mutable, color=gold]
        ownership1 -> mutable1 [label="<shared>", fontcolor=brown, color=brown]
        rc_t [label="Rc<T>", shape=plaintext]
        mutable1 -> rc_t [label="<immutable>"]
        type2 [label=Type, color=blue]
        mutable1 -> type2 [label="<mut>", color=gold]
        rc_cell_t [label="Rc<Cell<T>>", shape=plaintext]
        type2 -> rc_cell_t [label="<Copy|move>", fontcolor=blue, color=blue]
        rc_refcell_t [label="Rc<RefCell<T>>", shape=plaintext]
        type2 -> rc_refcell_t [label="<& reference>"]
    }
    subgraph cluster_ownership_mt {
        label="Multi-threaded Ownership"
        style=dashed
        ownership2 [label="Ownership", color=brown]
        threads -> ownership2 [label="<multiple>", fontcolor=green, color=green]
        rw1 [label="R/W", color=red]
        ownership2 -> rw1 [label="<unique>"]
        type3 [label=Type, color=blue]
        rw1 -> type3 [label="<reader/writer>"]
        atomic_t [label="AtomicT", shape=plaintext]
        type3 -> atomic_t [label="<bool|int>", fontcolor=blue, color=blue]
        mutex_t [label="Mutex<T>", shape=plaintext]
        type3 -> mutex_t [label="<any>"]
        rwlock_t [label="RwLock<T>", shape=plaintext]
        rw1 -> rwlock_t [label="<readers/writer>", fontcolor=red, color=red]
        mutable2 [label=Mutable, color=gold]
        ownership2 -> mutable2 [label="<shared>", fontcolor=brown, color=brown]
        arc_t [label="Arc<T>", shape=plaintext]
        mutable2 -> arc_t [label="<immutable>"]
        rw2 [label="R/W", color=red]
        mutable2 -> rw2 [label="<mut>", fontcolor=gold, color=gold]
        type4 [label=Type, color=blue]
        rw2 -> type4 [label="<reader/writer>"]
        arc_atomic_t [label="Arc<AtomicT>", shape=plaintext]
        type4 -> arc_atomic_t [label="<bool|int>", fontcolor=blue, color=blue]
        arc_mutex_t [label="Arc<Mutex<T>>", shape=plaintext]
        type4 -> arc_mutex_t [label="<any>"]
        arc_rwlock_t [label="Arc<RwLock<T>>", shape=plaintext]
        rw2 -> arc_rwlock_t [label="<readers/writer>", fontcolor=red, color=red]
    }
    dummy2 [label="<&ref|*deref>", shape=plaintext]
    ref_t -> dummy2 [label="<immutable>", style=dashed, dir=back]
    ref_mut_t -> dummy2 [label="<mut>", style=dashed, dir=back]
    dummy2 -> dummy3 [style=dashed]
}
```

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

### Custom Shapes and Icons D2 (embed)

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/d2-test.md

Defines custom shapes ('my-network', 'github', 'a') with specific icons and links, demonstrating how to override default shapes and include external images/URLs, rendered using the embed strategy.

```D2
my-network: {
  icon: https://icons.terrastruct.com/infra/019-network.svg
}
github: {
  shape: image
  icon: https://icons.terrastruct.com/dev/github.svg
}
a {
  link: https://example.com
  label: link
}
b
c
```

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

### Basic Flowchart Mermaid

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/mermaid-test.md

This snippet demonstrates a simple top-to-bottom flowchart using Mermaid syntax, including nodes and a subgraph. It shows basic connections between nodes and how to group nodes within a subgraph.

```mermaid
flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2
```

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

### AWS Infrastructure Diagram D2

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/d2-test.md

Creates a complex AWS infrastructure diagram demonstrating nested containers (VPC, Availability Zone, Subnet), specific AWS icons for different services, and custom styling for containers and elements.

```D2
vpc: VPC 1 10.1.0.0./16 {
  icon: https://icons.terrastruct.com/aws%2F_Group%20Icons%2FVirtual-private-cloud-VPC_light-bg.svg

  style: {
    stroke: green
    font-color: green
    fill: white
  }

  az: Availability Zone A {
    style: {
      stroke: blue
      font-color: blue
      stroke-dash: 3
      fill: white
    }

    firewall: Firewall Subnet A {
      icon: https://icons.terrastruct.com/aws%2FNetworking%20&%20Content%20Delivery%2FAmazon-Route-53_Hosted-Zone_light-bg.svg

      style: {
        stroke: purple
        font-color: purple
        fill: "#e1d5e7"
      }

      ec2: EC2 Instance {
        icon: https://icons.terrastruct.com/aws%2FCompute%2F_Instance%2FAmazon-EC2_C4-Instance_light-bg.svg
      }
    }
  }
}
```

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

### Advanced Sequence Diagram Mermaid

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/mermaid-test.md

This snippet provides a more detailed sequence diagram using Mermaid, demonstrating features like automatic numbering, loops, and notes to enrich the interaction flow between participants.

```mermaid
sequenceDiagram
    autonumber
    Alice->>John: Hello John, how are you?
    loop HealthCheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

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

### Custom Shapes and Icons D2 (iframe)

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/d2-test.md

Defines custom shapes ('my-network', 'github', 'a') with specific icons and links, demonstrating how to override default shapes and include external images/URLs, rendered using the iframe strategy.

```D2
my-network: {
  icon: https://icons.terrastruct.com/infra/019-network.svg
}
github: {
  shape: image
  icon: https://icons.terrastruct.com/dev/github.svg
}
a {
  link: https://example.com
  label: link
}
b
c
```

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

### Requirement Diagram Mermaid

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/mermaid-test.md

This snippet creates a requirement diagram using Mermaid syntax, which models a requirement and an element that satisfies it. It includes details for the requirement such as ID, text, risk, and verification method.

```mermaid
requirementDiagram

    requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    element test_entity {
    type: simulation
    }

    test_entity - satisfies -> test_req
```

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

### Basic Graph D2 (iframe Tag)

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/d2-test.md

Illustrates a simple directed graph with five nodes connected sequentially, specifically using the iframe rendering strategy tag and various styling options like dark scheme disabled, dagre layout, shadow class, and SVGO disabled.

```D2
direction: right
a -> b -> c -> d -> e
```

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

### Pets Adopted Pie Chart Mermaid

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/mermaid-test.md

This snippet creates a pie chart using Mermaid syntax to visualize data distribution. It shows the number of different types of pets adopted by volunteers.

```mermaid
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
```

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

### Visualizing Call Stack Profile with Graphviz DOT

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/vizdom-test.md

This Graphviz DOT snippet represents a call stack or flame graph visualization, likely generated from profiling data. Nodes represent functions or stack frames with performance metrics (execution time, percentage, size), and edges depict call relationships with weights indicating frequency or duration. It includes notes and tooltips for detailed information.

```DOT
digraph "[stackcollapse]" {
    fontname="Helvetica,Arial,sans-serif"
    node [fontname="Helvetica,Arial,sans-serif"]
    edge [fontname="Helvetica,Arial,sans-serif"]
    node [style=filled fillcolor="#f8f8f8"]
    subgraph cluster_L {
        "File: [stackcollapse]" [shape=box fontsize=16 label="File: [stackcollapse]\n\nShowing nodes accounting for 380, 90.48% of 420 total\nDropped 120 nodes (cum <= 2)\nShowing top 20 nodes out of 110\n\nSee https://git.io/JfYMW for how to read the graph\n" tooltip="[stackcollapse]"]
    }
    N1 [label="deflate\n62 (14.76%)\nof 384 (91.43%)" id="node1" fontsize=18 shape=box tooltip="deflate (384)" color="#b20400" fillcolor="#edd6d5"]
    N2 [label="gzip\n0 of 409 (97.38%)" id="node2" fontsize=8 shape=box tooltip="gzip (409)" color="#b20100" fillcolor="#edd5d5"]
    N3 [label="longest_match\n178 (42.38%)" id="node3" fontsize=24 shape=box tooltip="longest_match (178)" color="#b22800" fillcolor="#eddad5"]
    N4 [label="fill_window\n41 (9.76%)\nof 102 (24.29%)" id="node4" fontsize=16 shape=box tooltip="fill_window (102)" color="#b23d00" fillcolor="#edddd5"]
    N5 [label="updcrc\n46 (10.95%)\nof 48 (11.43%)" id="node5" fontsize=17 shape=box tooltip="updcrc (48)" color="#b27d4c" fillcolor="#ede6df"]
    N6 [label="file_read\n0 of 62 (14.76%)" id="node6" fontsize=8 shape=box tooltip="file_read (62)" color="#b2682e" fillcolor="#ede3db"]
    N7 [label="entry_SYSCALL_64_after_hwframe\n0 of 34 (8.10%)" id="node7" fontsize=8 shape=box tooltip="entry_SYSCALL_64_after_hwframe (34)" color="#b2906a" fillcolor="#ede8e3"]
    N8 [label="compress_block\n14 (3.33%)\nof 25 (5.95%)" id="node8" fontsize=13 shape=box tooltip="compress_block (25)" color="#b29b7d" fillcolor="#edeae6"]
    N9 [label="send_bits\n13 (3.10%)\nof 16 (3.81%)" id="node9" fontsize=13 shape=box tooltip="send_bits (16)" color="#b2a590" fillcolor="#edebe8"]
    N10 [label="ct_tally\n13 (3.10%)" id="node10" fontsize=13 shape=box tooltip="ct_tally (13)" color="#b2a896" fillcolor="#edebe9"]
    N11 [label="do_syscall_64\n0 of 33 (7.86%)" id="node11" fontsize=8 shape=box tooltip="do_syscall_64 (33)" color="#b2916c" fillcolor="#ede8e3"]
    N12 [label="_start\n0 of 393 (93.57%)" id="node12" fontsize=8 shape=box tooltip="_start (393)" color="#b20300" fillcolor="#edd5d5"]
    N13 [label="zip\n0 of 386 (91.90%)" id="node13" fontsize=8 shape=box tooltip="zip (386)" color="#b20400" fillcolor="#edd6d5"]
    N14 [label="native_write_msr\n9 (2.14%)" id="node14" fontsize=12 shape=box tooltip="native_write_msr (9)" color="#b2ac9f" fillcolor="#edecea"]
    N15 [label="treat_file\n0 of 389 (92.62%)" id="node15" fontsize=8 shape=box tooltip="treat_file (389)" color="#b20400" fillcolor="#edd5d5"]
    N16 [label="[unknown]\n0 of 10 (2.38%)" id="node16" fontsize=8 shape=box tooltip="[unknown] (10)" color="#b2ab9d" fillcolor="#edecea"]
    N17 [label="page_cache_ra_unbounded\n2 (0.48%)\nof 13 (3.10%)" id="node17" fontsize=10 shape=box tooltip="page_cache_ra_unbounded (13)" color="#b2a896" fillcolor="#edebe9"]
    N18 [label="asm_exc_page_fault\n1 (0.24%)\nof 5 (1.19%)" id="node18" fontsize=10 shape=box tooltip="asm_exc_page_fault (5)" color="#b2afa7" fillcolor="#edeceb"]
    N19 [label="__x64_sys_read\n1 (0.24%)\nof 15 (3.57%)" id="node19" fontsize=10 shape=box tooltip="__x64_sys_read (15)" color="#b2a692" fillcolor="#edebe8"]
    N20 [label="flush_block\n0 of 27 (6.43%)" id="node20" fontsize=8 shape=box tooltip="flush_block (27)" color="#b29979" fillcolor="#ede9e5"]
    N2 -> N12 [label=" 393" weight=94 penwidth=5 color="#b20300" tooltip="gzip -> _start (393)" labeltooltip="gzip -> _start (393)"]
    N12 -> N15 [label=" 389" weight=93 penwidth=5 color="#b20400" tooltip="_start ... treat_file (389)" labeltooltip="_start ... treat_file (389)" style="dotted"]
    N15 -> N13 [label=" 386" weight=92 penwidth=5 color="#b20400" tooltip="treat_file -> zip (386)" labeltooltip="treat_file -> zip (386)"]
    N13 -> N1 [label=" 384" weight=92 penwidth=5 color="#b20400" tooltip="zip -> deflate (384)" labeltooltip="zip -> deflate (384)"]
    N1 -> N3 [label=" 176" weight=42 penwidth=3 color="#b22800" tooltip="deflate -> longest_match (176)" labeltooltip="deflate -> longest_match (176)"]
    N1 -> N4 [label=" 102" weight=25 penwidth=2 color="#b23d00" tooltip="deflate -> fill_window (102)" labeltooltip="deflate -> fill_window (102)"]
    N4 -> N6 [label=" 58" weight=14 color="#b26e37" tooltip="fill_window -> file_read (58)" labeltooltip="fill_window -> file_read (58)"]
    N6 -> N5 [label=" 48" weight=12 color="#b27d4c" tooltip="file_read -> updcrc (48)" labeltooltip="file_read -> updcrc (48)"]
    N7 -> N11 [label=" 33" weight=8 color="#b2916c" tooltip="entry_SYSCALL_64_after_hwframe -> do_syscall_64 (33)" labeltooltip="entry_SYSCALL_64_after_hwframe -> do_syscall_64 (33)"]
    N1 -> N20 [label=" 26" weight=7 color="#b29a7b" tooltip="deflate -> flush_block (26)" labeltooltip="deflate -> flush_block (26)"]
    N20 -> N8 [label=" 23" weight=6 color="#b29e81" tooltip="flush_block -> compress_block (23)" labeltooltip="flush_block -> compress_block (23)"]
    N11 -> N19 [label=" 14" weight=4 color="#b2a794" tooltip="do_syscall_64 -> __x64_sys_read (14)" labeltooltip="do_syscall_64 -> __x64_sys_read (14)"]
    N6 -> N7 [label=" 14" weight=4 color="#b2a794" tooltip="file_read ... entry_SYSCALL_64_after_hwframe (14)" labeltooltip="file_read ... entry_SYSCALL_64_after_hwframe (14)" style="dotted"]
    N19 -> N17 [label=" 13" weight=4 color="#b2a896" tooltip="__x64_sys_read ... page_cache_ra_unbounded (13)" labeltooltip="__x64_sys_read ... page_cache_ra_unbounded (13)" style="dotted"]
    N1 -> N10 [label=" 12" weight=3 color="#b2a999" tooltip="deflate -> ct_tally (12)" labeltooltip="deflate -> ct_tally (12)"]
    N8 -> N9 [label=" 11" weight=3 color="#b2aa9b" tooltip="compress_block -> send_bits (11)" labeltooltip="compress_block -> send_bits (11)"]
    N2 -> N16 [label=" 10" weight=3 color="#b2ab9d" tooltip="gzip -> [unknown] (10)" labeltooltip="gzip -> [unknown] (10)"]
    N11 -> N14 [label=" 9" weight=3 color="#b2ac9f" tooltip="do_syscall_64 ... native_write_msr (9)" labeltooltip="do_syscall_64 ... native_write_msr (9)" style="dotted"]
    N16 -> N9 [label=" 5" weight=2 color="#b2afa7" tooltip="[unknown] -> send_bits (5)" labeltooltip="[unknown] -> send_bits (5)"]
    N2 -> N7 [label=" 4" color="#b2b0aa" tooltip="gzip -> entry_SYSCALL_64_after_hwframe (4)" labeltooltip="gzip -> entry_SYSCALL_64_after_hwframe (4)"]
    N16 -> N8 [label=" 2" color="#b2b1ae" tooltip="[unknown] -> compress_block (2)" labeltooltip="[unknown] -> compress_block (2)"]
    N16 -> N3 [label=" 2" color="#b2b1ae" tooltip="[unknown] -> longest_match (2)" labeltooltip="[unknown] -> longest_match (2)"]
    N2 -> N18 [label=" 2" color="#b2b1ae" tooltip="gzip ... asm_exc_page_fault (2)" labeltooltip="gzip ... asm_exc_page_fault (2)" style="dotted"]
    N9 -> N18 [label=" 2" color="#b2b1ae" tooltip="send_bits -> asm_exc_page_fault (2)" labeltooltip="send_bits -> asm_exc_page_fault (2)"]
    N16 -> N10 [label=" 1" color="#b2b2b0" tooltip="[unknown] -> ct_tally (1)" labeltooltip="[unknown] -> ct_tally (1)"]
    N7 -> N19 [label=" 1" color="#b2b2b0" tooltip="entry_SYSCALL_64_after_hwframe -> __x64_sys_read (1)" labeltooltip="entry_SYSCALL_64_after_hwframe -> __x64_sys_read (1)"]
    N9 -> N7 [label=" 1" color="#b2b2b0" tooltip="send_bits ... entry_SYSCALL_64_after_hwframe (1)" labeltooltip="send_bits ... entry_SYSCALL_64_after_hwframe (1)" style="dotted"]
    N13 -> N20 [label=" 1" color="#b2b2b0" tooltip="zip -> flush_block (1)" labeltooltip="zip -> flush_block (1)"]
}
```

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

### Illustrating Rust Type Relationships in Graphviz DOT

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/vizdom-test.md

This partial Graphviz DOT snippet aims to visualize various Rust types related to ownership, borrowing, and concurrency, such as `Cell`, `RefCell`, `Box`, `Rc`, `AtomicT`, `Mutex`, and `RwLock`. It uses subgraphs and styling to group related types and suggests conceptual relationships like `&T ≈ *const T`.

```DOT
digraph rusty {
    rankdir=LR
    cluster=true
    bgcolor=black
    fillcolor=black
    color=white
    node [style=filled, fillcolor=black, fontcolor=white, shape=box]
    edge [fontcolor=white, color=white]
    subgraph consts {
        style=dashed
        ref_t [label="&T ≈ *const T", shape=plaintext]
        ref_mut_t [label="&mut T ≈ *mut T", shape=plaintext]
    }
    subgraph out {
        style=filled
        dummy3 [style=invis]
        subgraph types {
            style=dashed
            t [label="T or mut", shape=plaintext]
            cell_t [label="Cell<T>", shape=plaintext]
            refcell_t [label="RefCell<T>", shape=plaintext]
            box_t [label="Box<T>", shape=plaintext]
            rc_t [label="Rc<T>", shape=plaintext]
            rc_cell_t [label="Rc<Cell<T>>", shape=plaintext]
            rc_refcell_t [label="Rc<RefCell<T>>", shape=plaintext]
            atomic_t [label="AtomicT", shape=plaintext]
            mutex_t [label="Mutex<T>", shape=plaintext]
            rwlock_t [label="RwLock<T>", shape=plaintext]
}
```

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

### Defining Color Relationships in Graphviz DOT

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/vizdom-test.md

This Graphviz DOT snippet defines a directed graph illustrating relationships between twelve colors. It specifies nodes as circles with specific fill colors and text colors, and edges connecting colors based on the relationships shown (e.g., green -> white, yellow, cyan...). It uses the 'neato' layout algorithm for positioning.

```DOT
digraph Twelve_colors {
    label="Twelve colors. Neato layout"
    labelloc="b"
    layout=neato
    fontname=Arial
    node [shape=circle width=1.5 color="#00000088" style=filled fontname="Helvetica,Arial,sans-serif"]
    edge [len=2 penwidth=1.5 arrowhead=open]
    start=regular
    normalize=0
    green -> { white yellow cyan yellowgreen springgreen } [color=green]
    green [fillcolor=green fontcolor=white]
    white [fillcolor=white]
    blue [fillcolor=blue fontcolor=white]
    red [fillcolor=red fontcolor=white]
    red -> { white yellow magenta orange deeppink } [color=red]
    yellow [fillcolor=yellow]
    yellow -> { orange yellowgreen } [color=yellow]
    blue -> { white cyan magenta deepskyblue purple } [color=blue]
    cyan [fillcolor=cyan]
    magenta [fillcolor=magenta fontcolor=white]
    deepskyblue [fillcolor=deepskyblue]
    cyan -> { springgreen deepskyblue } [color=cyan]
    orange [fillcolor=orange]
    yellowgreen [fillcolor=yellowgreen]
    deeppink [fillcolor=deeppink fontcolor=white]
    magenta -> { deeppink purple } [color=magenta]
    purple [fillcolor=purple fontcolor=white]
    springgreen [fillcolor=springgreen]
    // © 2022 Costa Shulyupin, licensed under EPL
}
```

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

### Creating Simple 2D Trigonometric Plots in Gnuplot

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/gnuplot-test.md

This script sets up detailed key, title, axis range, and colorbox properties before plotting three standard trigonometric functions. It shows how to customize plot appearance and define ranges, using `set` commands extensively.

```gnuplot
set key fixed left top vertical Right noreverse enhanced autotitle box lt black linewidth 1.000 dashtype solid
set title "Simple Plots"
set title  font ",20" textcolor lt -1 norotate
set xrange [ * : * ] noreverse writeback
set x2range [ * : * ] noreverse writeback
set yrange [ * : * ] noreverse writeback
set y2range [ * : * ] noreverse writeback
set zrange [ * : * ] noreverse writeback
set cbrange [ * : * ] noreverse writeback
set rrange [ * : * ] noreverse writeback
set colorbox vertical origin screen 0.9, 0.2 size screen 0.05, 0.6 front  noinvert bdefault
NO_ANIMATION = 1
plot [-10:10] sin(x),atan(x),cos(atan(x))
```

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

### Sales Revenue XY Chart Beta Mermaid

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/mermaid-test.md

This snippet creates an XY chart using the beta syntax in Mermaid to visualize sales revenue data over months. It defines the x and y axes and plots data as both a bar chart and a line chart on the same grid.

```mermaid
xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```

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

### C4 Context Diagram Mermaid

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/mermaid-test.md

This snippet creates a C4 Context diagram using Mermaid syntax to visualize the highest level of abstraction in the C4 model for an Internet Banking System. It shows people and systems interacting with the system boundary.

```mermaid
C4Context
    title System Context diagram for Internet Banking System
    Enterprise_Boundary(b0, "BankBoundary0") {
    Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
    Person(customerB, "Banking Customer B")
    Person_Ext(customerC, "Banking Customer C", "desc")

    Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")

    System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")

    Enterprise_Boundary(b1, "BankBoundary") {

        SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

        System_Boundary(b2, "BankBoundary2") {
        System(SystemA, "Banking System A")
        System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
        }

        System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
        SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")

        Boundary(b3, "BankBoundary3", "boundary") {
        SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
        SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
        }
    }
    }

    BiRel(customerA, SystemAA, "Uses")
    BiRel(SystemAA, SystemE, "Uses")
    Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
    Rel(SystemC, customerA, "Sends e-mails to")

    UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
    UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
    UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
    UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
    UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")

    UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
```

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

### Generating 3D Surface Plots from Functions in Gnuplot

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/gnuplot-test.md

This snippet prepares the plot area with grid and sampling settings for a 3D representation. It sets axis labels and ranges before using the `splot` command to render two distinct surfaces based on given functions of x and y.

```gnuplot
set grid nopolar
set grid xtics nomxtics ytics nomytics noztics nomztics nortics nomrtics \
 nox2tics nomx2tics noy2tics nomy2tics nocbtics nomcbtics
set grid layerdefault   lt 0 linecolor 0 linewidth 0.500,  lt 0 linecolor 0 linewidth 0.500
set samples 21, 21
set isosamples 11, 11
set style data lines
set title "3D surface from a function"
set xlabel "X axis"
set xlabel  offset character -3, -2, 0 font "" textcolor lt -1 norotate
set xrange [ -10.0000 : 10.0000 ] noreverse nowriteback
set x2range [ * : * ] noreverse writeback
set ylabel "Y axis"
set ylabel  offset character 3, -2, 0 font "" textcolor lt -1 rotate
set yrange [ -10.0000 : 10.0000 ] noreverse nowriteback
set y2range [ * : * ] noreverse writeback
set zlabel "Z axis"
set zlabel  offset character -5, 0, 0 font "" textcolor lt -1 norotate
set zrange [ * : * ] noreverse writeback
set cbrange [ * : * ] noreverse writeback
set rrange [ * : * ] noreverse writeback
set colorbox vertical origin screen 0.9, 0.2 size screen 0.05, 0.6 front  noinvert bdefault
NO_ANIMATION = 1
## Last datafile plotted: "$grid"
splot x**2+y**2, x**2-y**2
```

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

### Defining Penrose Diagram - Penrose Language

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/diagrams/penrose.mdx

Illustrates the Penrose language syntax used within a code fence, including definitions for geometric elements like planes, points, segments, angles, and their spatial relationships. Includes local configuration options for style, domain, width, and height. This code snippet is an example input processed by the rehype plugin.

```penrose
style="euclidean.style" domain="euclidean.domain" width=800 height=800
Plane P
Point p, q, r, s
In(p, P)
In(q, P)
In(r, P)
In(s, P)
Let a := Segment(p, q)
Let b := Segment(p, r)
Point m := Midpoint(a)
In(m, P)
Angle theta := InteriorAngle(q, p, r)
Let t := Triangle(p, r, s)
Ray w := Bisector(theta)
Segment h := PerpendicularBisector(a, m)
AutoLabel p, q, r, s, m
Label P $E^2$
```

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

### Basic Expression JavaScript Snippet

Source: https://github.com/stereobooster/beoe/blob/main/packages/remark-code-hook/test/fixtures/a.md

This snippet represents a simple JavaScript expression or statement, likely extracted from a larger file. The accompanying metadata indicates it might correspond to lines 3-4 of a file named 'test' at path '/a/'. It serves as a minimal example of embedding code with file and line information.

```javascript
test
```

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

### Simple JavaScript Test String Snippet

Source: https://github.com/stereobooster/beoe/blob/main/packages/rehype-code-hook/test/fixtures/a.md

This snippet shows basic text content placed within a markdown code block tagged as JavaScript. It serves as a minimal example to demonstrate the structure and metadata (like line highlighting and filename) associated with the code block, rather than illustrating actual JavaScript functionality.

```js
test
```

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

### Using rehype-penrose Plugin - JavaScript

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/diagrams/penrose.mdx

Shows how to integrate the `@beoe/rehype-penrose` plugin into a `unified` processing pipeline. It imports the plugin and adds it to the `.use()` chain after remark parsing and before rehype stringification. Requires dependencies like `unified`, `remark-parse`, `remark-rehype`, and `rehype-stringify`.

```js
import rehypeD2 from "@beoe/rehype-penrose";

const html = await unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeD2, {
    shared: "shared",
    /* options */
  })
  .use(rehypeStringify)
  .process("markdown");
```

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

### Flowchart with Unicode in Label Mermaid

Source: https://github.com/stereobooster/beoe/blob/main/packages/docs/src/content/docs/examples/mermaid-test.md

This snippet demonstrates how to include Unicode characters within node labels in a Mermaid flowchart. It shows a simple left-to-right flow with a node containing a heart symbol.

```mermaid
flowchart LR
    id["This ❤ Unicode"]
```
Tokens:
Raw