Lossless Flavored Markdown
Search/

Demo

Every feature, parsed at build time

Each example is a markdown file in src/content/lfm-demos/. On the right is what parseMarkdown handed back when this page was built — not an illustration of it.

LFM returns an AST, not HTML. Deciding what a reader sees belongs to the render layer, and this splash is one render layer among many — so the payload is the honest thing to show, with a rendering underneath wherever it makes the point better. The same files are the fixtures the test suite runs against.

Eyebrow, heading, subheading

lfm-heading-blocks

Markdown gives you one line where editorial practice has always used three. `$$` and `&&` bind by adjacency to the heading between them — a blank line breaks the binding and the markers revert to ordinary text.

Authored markdown

$$ Portfolio Operations
## Every email from a portco, filed as PDFs
&& Two passes, inventory before export — so you can verify coverage

What the pipeline attached

{
  "hName": "hgroup",
  "hProperties": {
    "class": "heading-block"
  },
  "headingBlock": {
    "subheadings": [
      "Two passes, inventory before export — so you can verify coverage"
    ],
    "eyebrow": "Portfolio Operations"
  }
}

One way a renderer could show it

Portfolio Operations

Every email from a portco, filed as PDFs

Two passes, inventory before export — so you can verify coverage

Table of contents

remark-lfm-heading-ids

Every heading gets a stable, deduped anchor — including the one inside that callout, because a share link into a callout is a link like any other. `inContainer` is what lets a table of contents leave it out without the heading losing its anchor.

Authored markdown

# Filing portco email

$$ Inbox
## Why Care?
### The volume problem

> [!warning] Rate limits
> ### Not a section

## What's New?
#### A deep one

tree.data.headings

[
  {
    "id": "filing-portco-email",
    "text": "Filing portco email",
    "depth": 1
  },
  {
    "id": "why-care",
    "text": "Why Care?",
    "depth": 2,
    "eyebrow": "Inbox"
  },
  {
    "id": "the-volume-problem",
    "text": "The volume problem",
    "depth": 3
  },
  {
    "id": "not-a-section",
    "text": "Not a section",
    "depth": 3,
    "inContainer": "callout"
  },
  {
    "id": "whats-new",
    "text": "What's New?",
    "depth": 2
  },
  {
    "id": "a-deep-one",
    "text": "A deep one",
    "depth": 4
  }
]

One way a renderer could show it

nestHeadings(filterHeadings(outline, 2, 4).filter(h => !h.inContainer))

Callouts

remark-lfm-callouts

An Obsidian callout and a `:::callout{type="warning"}` directive produce the same node, so your component renders one shape regardless of which tool wrote the file.

Authored markdown

> [!warning] The category churns
> Half the tools on this list will be renamed by spring.

What the pipeline attached

{
  "name": "callout",
  "attributes": {
    "type": "warning",
    "title": "The category churns"
  },
  "data": {
    "hName": "div",
    "hProperties": {
      "class": "callout callout-warning"
    }
  }
}

One way a renderer could show it

The category churns

Half the tools on this list will be renamed by spring.

Citations

remark-lfm-citations

Authors write stable, meaningless hex ids so inserting a source mid-document renumbers nothing. The sequential index is assigned at build time by order of first appearance — note the second-defined source is citation 1.

Authored markdown

Adoption stalled in Q2.[^b2d4f8] Spend kept climbing.[^7c1e0a]

[^7c1e0a]: [The First Source](https://example.com/first) Published: 2026-01-15
[^b2d4f8]: [The Second Source](https://other.org/second)

tree.data.citations.ordered

[
  {
    "index": 1,
    "identifier": "b2d4f8",
    "title": "The Second Source",
    "source": "other.org"
  },
  {
    "index": 2,
    "identifier": "7c1e0a",
    "title": "The First Source",
    "source": "example.com",
    "publishedDate": "2026-01-15"
  }
]

One way a renderer could show it

Adoption stalled in Q2.1 Spend kept climbing.2

Sources

  1. The Second Source — other.org [^b2d4f8]
  2. The First Source — example.com · 2026-01-15 [^7c1e0a]

Code fences — every shipped handler

The registry ships empty; you pay for the formats you name. What a handler does depends entirely on who draws the diagram — which is why some parse to a tree, some to a URL, and two deliberately parse nothing at all.

HandlerClaimsParses?
mermaid mermaid claims the language only
graphviz graphvizdot claims the language only
jsoncanvas jsoncanvasjson-canvascanvas yes
vega-lite vega-litevegalitevl yes
yang yang yes
json-schema json-schemajsonschema yes
plantuml plantumlpumluml yes

mermaid

draws: mermaid.js, client-side

Recognition only. The handler claims the language and stops — parsing a diagram whose whole value is its layout would be pretending. The renderer reads the format and hands the source to mermaid.

Authored markdown

```mermaid
graph TD;
  Intake[Email arrives] --> Filed{Already filed?};
  Filed -- no --> Store[(Archive)];
  Filed -- yes --> Skip[Skip];
```

code node's data.fence

{
  "format": "mermaid"
}

One way a renderer could show it

Rendering with mermaid.js…

graphviz

draws: @viz-js/viz (WASM), client-side

Also recognition only, and claimed under both `graphviz` and `dot`. Layout is exactly the part a parser cannot do.

Authored markdown

```dot
digraph filings {
  rankdir=LR;
  intake -> triage -> archive;
  triage -> reject [style=dashed];
}
```

code node's data.fence

{
  "format": "graphviz"
}

One way a renderer could show it

Rendering with @viz-js/viz…

jsoncanvas

draws: your canvas renderer

A real Obsidian canvas — a host shell fanning out to six microfrontends, with grouped implementations and shared services beneath it. The source is JSON, so parsing is free: nodes, edges and groups come back normalized, and missing `nodes` / `edges` become empty arrays so renderers can skip the guards. Every node here was a `file` node pointing at an internal document; those references are replaced with plain labels, which is what a `text` node is for.

Authored markdown

```jsoncanvas
{
  "nodes": [
    {
      "id": "7fac4e97ed672ff8",
      "x": -360,
      "y": -120,
      "width": 2400,
      "height": 1320,
      "type": "group",
      "label": "Microfrontends",
      "color": "1"
    },
    {
      "id": "5224f4b69bfd60ee",
      "x": -360,
      "y": 1340,
      "width": 1540,
      "height": 440,
      "type": "group",
      "label": "Shared services",
      "color": "3"
    },
    {
      "id": "d4f248b6d654789a",
      "x": -270,
      "y": 460,
      "width": 730,
      "height": 660,
      "type": "group",
      "label": "Implementations",
      "color": "2"
    },
    {
      "id": "0c61d3b228ab02b1",
      "x": 560,
      "y": -680,
      "width": 600,
      "height": 275,
      "type": "text",
      "text": "Host shell",
      "color": "5"
    },
    {
      "id": "500d137c307ae72d",
      "x": -250,
      "y": 520,
      "width": 320,
      "height": 560,
      "type": "text",
      "text": "Record Collector \u2014 implementation"
    },
    {
      "id": "13b24c973c83e305",
      "x": -860,
      "y": 1360,
      "width": 400,
      "height": 400,
      "type": "text",
      "text": "Module federation with Docker"
    },
    {
      "id": "d01e76d0c7be9a26",
      "x": -340,
      "y": 1360,
      "width": 400,
      "height": 400,
      "type": "text",
      "text": "API services"
    },
    {
      "id": "5f82a67835e2e084",
      "x": 220,
      "y": 1360,
      "width": 400,
      "height": 400,
      "type": "text",
      "text": "Shared UX factory"
    },
    {
      "id": "510b3229a46ed2de",
      "x": 760,
      "y": 1360,
      "width": 400,
      "height": 400,
      "type": "text",
      "text": "DevOps suite"
    },
    {
      "id": "a210c313263cda0b",
      "x": -1000,
      "y": -40,
      "width": 400,
      "height": 1000,
      "type": "text",
      "text": "Data augmentation workflow",
      "color": "4"
    },
    {
      "id": "ac2afdf05e87ca89",
      "x": 860,
      "y": -40,
      "width": 340,
      "height": 400,
      "type": "text",
      "text": "Response Reviewer"
    },
    {
      "id": "1a9c649e46a79f26",
      "x": -240,
      "y": -40,
      "width": 300,
      "height": 400,
      "type": "text",
      "text": "Record Collector"
    },
    {
      "id": "fee2304cdc0ca011",
      "x": 1260,
      "y": -40,
      "width": 340,
      "height": 400,
      "type": "text",
      "text": "Highlight Collector"
    },
    {
      "id": "b8baf610263acd9c",
      "x": 120,
      "y": 520,
      "width": 320,
      "height": 560,
      "type": "text",
      "text": "Prompt Manager \u2014 implementation"
    },
    {
      "id": "78e62b795b9121a8",
      "x": 480,
      "y": -40,
      "width": 340,
      "height": 400,
      "type": "text",
      "text": "Request Reviewer"
    },
    {
      "id": "f40ce181ffbb721e",
      "x": 1660,
      "y": -40,
      "width": 320,
      "height": 400,
      "type": "text",
      "text": "Insight Assembler"
    },
    {
      "id": "e57b4c5d510757d2",
      "x": 120,
      "y": -40,
      "width": 320,
      "height": 400,
      "type": "text",
      "text": "Prompt Template Manager"
    },
    {
      "id": "5b136670aca97362",
      "x": -390,
      "y": -711,
      "width": 670,
      "height": 337,
      "type": "text",
      "text": "Micro-federation explainer",
      "color": "6"
    }
  ],
  "edges": [
    {
      "id": "a574669ce253b12d",
      "fromNode": "0c61d3b228ab02b1",
      "fromSide": "bottom",
      "toNode": "1a9c649e46a79f26",
      "toSide": "top",
      "label": "mounts"
    },
    {
      "id": "ff2d50862a42ec2b",
      "fromNode": "0c61d3b228ab02b1",
      "fromSide": "bottom",
      "toNode": "e57b4c5d510757d2",
      "toSide": "top",
      "label": "mounts"
    },
    {
      "id": "ec128acfd52ef1e5",
      "fromNode": "0c61d3b228ab02b1",
      "fromSide": "bottom",
      "toNode": "78e62b795b9121a8",
      "toSide": "top",
      "label": "mounts"
    },
    {
      "id": "6a2a0a513b447537",
      "fromNode": "0c61d3b228ab02b1",
      "fromSide": "bottom",
      "toNode": "ac2afdf05e87ca89",
      "toSide": "top",
      "label": "mounts"
    },
    {
      "id": "4aecd4257005ade8",
      "fromNode": "0c61d3b228ab02b1",
      "fromSide": "bottom",
      "toNode": "fee2304cdc0ca011",
      "toSide": "top",
      "label": "mounts"
    },
    {
      "id": "4998a6dcb70dee0f",
      "fromNode": "0c61d3b228ab02b1",
      "fromSide": "bottom",
      "toNode": "f40ce181ffbb721e",
      "toSide": "top",
      "label": "mounts"
    },
    {
      "id": "9322a96dc3838473",
      "fromNode": "1a9c649e46a79f26",
      "fromSide": "right",
      "toNode": "e57b4c5d510757d2",
      "toSide": "left"
    },
    {
      "id": "c6884aa0cf24564f",
      "fromNode": "e57b4c5d510757d2",
      "fromSide": "right",
      "toNode": "78e62b795b9121a8",
      "toSide": "left"
    },
    {
      "id": "0a6e74ad751847ec",
      "fromNode": "78e62b795b9121a8",
      "fromSide": "right",
      "toNode": "ac2afdf05e87ca89",
      "toSide": "left"
    },
    {
      "id": "12d2da5b9569f8c9",
      "fromNode": "fee2304cdc0ca011",
      "fromSide": "right",
      "toNode": "f40ce181ffbb721e",
      "toSide": "left"
    },
    {
      "id": "b18446de33f7cf69",
      "fromNode": "ac2afdf05e87ca89",
      "fromSide": "right",
      "toNode": "fee2304cdc0ca011",
      "toSide": "left"
    },
    {
      "id": "78a79d215125d427",
      "fromNode": "1a9c649e46a79f26",
      "fromSide": "bottom",
      "toNode": "500d137c307ae72d",
      "toSide": "top"
    },
    {
      "id": "f8d191800876d03d",
      "fromNode": "e57b4c5d510757d2",
      "fromSide": "bottom",
      "toNode": "b8baf610263acd9c",
      "toSide": "top"
    },
    {
      "id": "37a360be2fa09daf",
      "fromNode": "a210c313263cda0b",
      "fromSide": "right",
      "toNode": "7fac4e97ed672ff8",
      "toSide": "left"
    },
    {
      "id": "ba5559652517e25c",
      "fromNode": "5b136670aca97362",
      "fromSide": "right",
      "toNode": "0c61d3b228ab02b1",
      "toSide": "left"
    }
  ]
}
```

code node's data.fence

{
  "format": "jsoncanvas",
  "parsed": {
    "nodes": [
      {
        "id": "7fac4e97ed672ff8",
        "x": -360,
        "y": -120,
        "width": 2400,
        "height": 1320,
        "type": "group",
        "label": "Microfrontends",
        "color": "1"
      },
      {
        "id": "5224f4b69bfd60ee",
        "x": -360,
        "y": 1340,
        "width": 1540,
        "height": 440,
        "type": "group",
        "label": "Shared services",
        "color": "3"
      },
      {
        "id": "d4f248b6d654789a",
        "x": -270,
        "y": 460,
        "width": 730,
        "height": 660,
        "type": "group",
        "label": "Implementations",
        "color": "2"
      },
      {
        "id": "0c61d3b228ab02b1",
        "x": 560,
        "y": -680,
        "width": 600,
        "height": 275,
        "type": "text",
        "text": "Host shell",
        "color": "5"
      },
      {
        "id": "500d137c307ae72d",
        "x": -250,
        "y": 520,
        "width": 320,
        "height": 560,
        "type": "text",
        "text": "Record Collector — implementation"
      },
      {
        "id": "13b24c973c83e305",
        "x": -860,
        "y": 1360,
        "width": 400,
        "height": 400,
        "type": "text",
        "text": "Module federation with Docker"
      },
      {
        "id": "d01e76d0c7be9a26",
        "x": -340,
        "y": 1360,
        "width": 400,
        "height": 400,
        "type": "text",
        "text": "API services"
      },
      {
        "id": "5f82a67835e2e084",
        "x": 220,
        "y": 1360,
        "width": 400,
        "height": 400,
        "type": "text",
        "text": "Shared UX factory"
      },
      {
        "id": "510b3229a46ed2de",
        "x": 760,
        "y": 1360,
        "width": 400,
        "height": 400,
        "type": "text",
        "text": "DevOps suite"
      },
      {
        "id": "a210c313263cda0b",
        "x": -1000,
        "y": -40,
        "width": 400,
        "height": 1000,
        "type": "text",
        "text": "Data augmentation workflow",
        "color": "4"
      },
      {
        "id": "ac2afdf05e87ca89",
        "x": 860,
        "y": -40,
        "width": 340,
        "height": 400,
        "type": "text",
        "text": "Response Reviewer"
      },
      {
        "id": "1a9c649e46a79f26",
        "x": -240,
        "y": -40,
        "width": 300,
        "height": 400,
        "type": "text",
        "text": "Record Collector"
      },
      {
        "id": "fee2304cdc0ca011",
        "x": 1260,
        "y": -40,
        "width": 340,
        "height": 400,
        "type": "text",
        "text": "Highlight Collector"
      },
      {
        "id": "b8baf610263acd9c",
        "x": 120,
        "y": 520,
        "width": 320,
        "height": 560,
        "type": "text",
        "text": "Prompt Manager — implementation"
      },
      {
        "id": "78e62b795b9121a8",
        "x": 480,
        "y": -40,
        "width": 340,
        "height": 400,
        "type": "text",
        "text": "Request Reviewer"
      },
      {
        "id": "f40ce181ffbb721e",
        "x": 1660,
        "y": -40,
        "width": 320,
        "height": 400,
        "type": "text",
        "text": "Insight Assembler"
      },
      {
        "id": "e57b4c5d510757d2",
        "x": 120,
        "y": -40,
        "width": 320,
        "height": 400,
        "type": "text",
        "text": "Prompt Template Manager"
      },
      {
        "id": "5b136670aca97362",
        "x": -390,
        "y": -711,
        "width": 670,
        "height": 337,
        "type": "text",
        "text": "Micro-federation explainer",
        "color": "6"
      }
    ],
    "edges": [
      {
        "id": "a574669ce253b12d",
        "fromNode": "0c61d3b228ab02b1",
        "fromSide": "bottom",
        "toNode": "1a9c649e46a79f26",
        "toSide": "top",
        "label": "mounts"
      },
      {
        "id": "ff2d50862a42ec2b",
        "fromNode": "0c61d3b228ab02b1",
        "fromSide": "bottom",
        "toNode": "e57b4c5d510757d2",
        "toSide": "top",
        "label": "mounts"
      },
      {
        "id": "ec128acfd52ef1e5",
        "fromNode": "0c61d3b228ab02b1",
        "fromSide": "bottom",
        "toNode": "78e62b795b9121a8",
        "toSide": "top",
        "label": "mounts"
      },
      {
        "id": "6a2a0a513b447537",
        "fromNode": "0c61d3b228ab02b1",
        "fromSide": "bottom",
        "toNode": "ac2afdf05e87ca89",
        "toSide": "top",
        "label": "mounts"
      },
      {
        "id": "4aecd4257005ade8",
        "fromNode": "0c61d3b228ab02b1",
        "fromSide": "bottom",
        "toNode": "fee2304cdc0ca011",
        "toSide": "top",
        "label": "mounts"
      },
      {
        "id": "4998a6dcb70dee0f",
        "fromNode": "0c61d3b228ab02b1",
        "fromSide": "bottom",
        "toNode": "f40ce181ffbb721e",
        "toSide": "top",
        "label": "mounts"
      },
      {
        "id": "9322a96dc3838473",
        "fromNode": "1a9c649e46a79f26",
        "fromSide": "right",
        "toNode": "e57b4c5d510757d2",
        "toSide": "left"
      },
      {
        "id": "c6884aa0cf24564f",
        "fromNode": "e57b4c5d510757d2",
        "fromSide": "right",
        "toNode": "78e62b795b9121a8",
        "toSide": "left"
      },
      {
        "id": "0a6e74ad751847ec",
        "fromNode": "78e62b795b9121a8",
        "fromSide": "right",
        "toNode": "ac2afdf05e87ca89",
        "toSide": "left"
      },
      {
        "id": "12d2da5b9569f8c9",
        "fromNode": "fee2304cdc0ca011",
        "fromSide": "right",
        "toNode": "f40ce181ffbb721e",
        "toSide": "left"
      },
      {
        "id": "b18446de33f7cf69",
        "fromNode": "ac2afdf05e87ca89",
        "fromSide": "right",
        "toNode": "fee2304cdc0ca011",
        "toSide": "left"
      },
      {
        "id": "78a79d215125d427",
        "fromNode": "1a9c649e46a79f26",
        "fromSide": "bottom",
        "toNode": "500d137c307ae72d",
        "toSide": "top"
      },
      {
        "id": "f8d191800876d03d",
        "fromNode": "e57b4c5d510757d2",
        "fromSide": "bottom",
        "toNode": "b8baf610263acd9c",
        "toSide": "top"
      },
      {
        "id": "37a360be2fa09daf",
        "fromNode": "a210c313263cda0b",
        "fromSide": "right",
        "toNode": "7fac4e97ed672ff8",
        "toSide": "left"
      },
      {
        "id": "ba5559652517e25c",
        "fromNode": "5b136670aca97362",
        "fromSide": "right",
        "toNode": "0c61d3b228ab02b1",
        "toSide": "left"
      }
    ]
  }
}

One way a renderer could show it

Microfrontends Shared services Implementations mounts mounts mounts mounts mounts mounts Host shell RecordCollector—implementation Modulefederationwith Docker API services Shared UXfactory DevOps suite Dataaugmentationworkflow ResponseReviewer RecordCollector HighlightCollector PromptManager —implementation RequestReviewer InsightAssembler PromptTemplateManager Micro-federationexplainer

vega-lite

draws: vega-embed, client-side

Parsed to a summary as well as the spec — mark, channels, data source, title. A chart that renders as nothing with JS off should at least be able to say what it was going to draw.

Authored markdown

```vega-lite
{
  "title": "Filings per quarter",
  "data": { "values": [
    { "quarter": "Q1", "filings": 12 },
    { "quarter": "Q2", "filings": 31 },
    { "quarter": "Q3", "filings": 24 }
  ]},
  "mark": "bar",
  "encoding": {
    "x": { "field": "quarter", "type": "ordinal" },
    "y": { "field": "filings", "type": "quantitative" }
  }
}
```

code node's data.fence

{
  "format": "vega-lite",
  "parsed": {
    "spec": {
      "title": "Filings per quarter",
      "data": {
        "values": [
          {
            "quarter": "Q1",
            "filings": 12
          },
          {
            "quarter": "Q2",
            "filings": 31
          },
          {
            "quarter": "Q3",
            "filings": 24
          }
        ]
      },
      "mark": "bar",
      "encoding": {
        "x": {
          "field": "quarter",
          "type": "ordinal"
        },
        "y": {
          "field": "filings",
          "type": "quantitative"
        }
      }
    },
    "mark": "bar",
    "channels": [
      "x",
      "y"
    ],
    "data": "3 inline rows",
    "title": "Filings per quarter"
  }
}

One way a renderer could show it

Rendering with vega-embed…

yang

draws: nobody — the tree is the output

Parsed all the way to an RFC 8340 tree diagram. The marker grammar is real: `mandatory` suppresses `?`, a leaf-list takes `*`, a presence container takes `!`, and `config false` propagates `ro` to its descendants.

Authored markdown

```yang
module acme-system {
  namespace "urn:acme:system";
  prefix acme;
  revision 2026-08-17;

  container system {
    leaf hostname { type string; mandatory true; }
    leaf-list domain-search { type string; }
    container ntp {
      presence "enables ntp";
      leaf enabled { type boolean; }
    }
    list interface {
      key "name";
      leaf name { type string; }
      leaf speed { type uint32; config false; }
    }
  }
}
```

code node's data.fence

{
  "format": "yang",
  "parsed": {
    "module": {
      "kind": "module",
      "name": "acme-system",
      "namespace": "urn:acme:system",
      "prefix": "acme",
      "revision": "2026-08-17",
      "children": [
        {
          "name": "system",
          "kind": "container",
          "flag": "rw",
          "children": [
            {
              "name": "hostname",
              "kind": "leaf",
              "flag": "rw",
              "children": [],
              "type": "string"
            },
            {
              "name": "domain-search",
              "kind": "leaf-list",
              "flag": "rw",
              "children": [],
              "type": "string",
              "marker": "*"
            },
            {
              "name": "ntp",
              "kind": "container",
              "flag": "rw",
              "children": [
                {
                  "name": "enabled",
                  "kind": "leaf",
                  "flag": "rw",
                  "children": [],
                  "type": "boolean",
                  "marker": "?"
                }
              ],
              "marker": "!"
            },
            {
              "name": "interface",
              "kind": "list",
              "flag": "rw",
              "children": [
                {
                  "name": "name",
                  "kind": "leaf",
                  "flag": "rw",
                  "children": [],
                  "type": "string",
                  "marker": "?"
                },
                {
                  "name": "speed",
                  "kind": "leaf",
                  "flag": "ro",
                  "children": [],
                  "type": "uint32",
                  "marker": "?"
                }
              ],
              "marker": "*",
              "keys": "name"
            }
          ]
        }
      ]
    },
    "tree": "module: acme-system\n  +--rw system\n     +--rw hostname         string\n     +--rw domain-search*   string\n     +--rw ntp!\n     |  +--rw enabled?   boolean\n     +--rw interface* [name]\n        +--rw name?    string\n        +--ro speed?   uint32"
  }
}

One way a renderer could show it

module: acme-system
  +--rw system
     +--rw hostname         string
     +--rw domain-search*   string
     +--rw ntp!
     |  +--rw enabled?   boolean
     +--rw interface* [name]
        +--rw name?    string
        +--ro speed?   uint32

json-schema

draws: nobody — the tree is the output

Also parsed to a tree. `$ref` targets are expanded inline rather than left dangling, enums render inline, and unions render as unions.

Authored markdown

```json-schema
{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "title": "Portco Filing",
  "type": "object",
  "required": ["id", "status"],
  "properties": {
    "id": { "type": "string", "description": "Stable identifier" },
    "status": { "enum": ["pending", "filed", "failed"] },
    "attachments": { "type": "array", "items": { "$ref": "#/$defs/attachment" } },
    "reviewer": { "type": ["string", "null"] }
  },
  "$defs": {
    "attachment": {
      "type": "object",
      "properties": { "filename": { "type": "string" }, "bytes": { "type": "integer" } }
    }
  }
}
```

code node's data.fence

{
  "format": "json-schema",
  "parsed": {
    "doc": {
      "title": "Portco Filing",
      "dialect": "https://json-schema.org/draft/2020-12/schema",
      "type": "object",
      "children": [
        {
          "name": "id",
          "type": "string",
          "children": [],
          "description": "Stable identifier"
        },
        {
          "name": "status",
          "type": "enum",
          "children": [],
          "enumValues": "\"pending\", \"filed\", \"failed\""
        },
        {
          "name": "attachments",
          "type": "array<$ref attachment>",
          "children": [
            {
              "name": "filename",
              "type": "string",
              "children": [],
              "marker": "?"
            },
            {
              "name": "bytes",
              "type": "integer",
              "children": [],
              "marker": "?"
            }
          ],
          "marker": "?*"
        },
        {
          "name": "reviewer",
          "type": "string | null",
          "children": [],
          "marker": "?"
        }
      ]
    },
    "tree": "schema: Portco Filing\n  +-- id              string\n  +-- status          enum  {\"pending\", \"filed\", \"failed\"}\n  +-- attachments?*   array<$ref attachment>\n  |   +-- filename?   string\n  |   +-- bytes?      integer\n  +-- reviewer?       string | null"
  }
}

One way a renderer could show it

schema: Portco Filing
  +-- id              string
  +-- status          enum  {"pending", "filed", "failed"}
  +-- attachments?*   array<$ref attachment>
  |   +-- filename?   string
  |   +-- bytes?      integer
  +-- reviewer?       string | null

plantuml

draws: a PlantUML server, via <img>

Deflated and encoded into a server URL — no Java, no local renderer. The `@startuml` wrapper is added when the author omits it. The default server is the public plantuml.com instance, which means your diagram source travels in the URL; `createPlantUml({ server })` points it at a self-hosted one.

Authored markdown

```plantuml
Alice -> Bob: Filing request
Bob --> Alice: Ack
Bob -> Archive: store(pdf)
```

code node's data.fence

{
  "format": "plantuml",
  "parsed": {
    "encoded": "9Sev3e0W50N0dbEyKWikG460mdi8V9N8eYoUtqJRoQZMrzf7Yap7u0XSmXGhi8GOyevAzw3McIaMd4jyIK2xyoS9NTqH7X9elLIQBh_DJ57s8yKN",
    "svg": "https://www.plantuml.com/plantuml/svg/9Sev3e0W50N0dbEyKWikG460mdi8V9N8eYoUtqJRoQZMrzf7Yap7u0XSmXGhi8GOyevAzw3McIaMd4jyIK2xyoS9NTqH7X9elLIQBh_DJ57s8yKN",
    "png": "https://www.plantuml.com/plantuml/png/9Sev3e0W50N0dbEyKWikG460mdi8V9N8eYoUtqJRoQZMrzf7Yap7u0XSmXGhi8GOyevAzw3McIaMd4jyIK2xyoS9NTqH7X9elLIQBh_DJ57s8yKN",
    "editor": "https://www.plantuml.com/plantuml/uml/9Sev3e0W50N0dbEyKWikG460mdi8V9N8eYoUtqJRoQZMrzf7Yap7u0XSmXGhi8GOyevAzw3McIaMd4jyIK2xyoS9NTqH7X9elLIQBh_DJ57s8yKN",
    "wrapped": false,
    "kind": "sequence"
  }
}

One way a renderer could show it

PlantUML sequence diagram, rendered by the PlantUML server

Detected kind sequence; the @startuml wrapper was added for you. The source travels inside that URL — createPlantUml({ server }) points it at a self-hosted instance.