# How to Generate Mermaid Diagrams for Claim Trees Using the Patent Disclosure Skill

> Learn how handsomestWei/patent-disclosure-skill generates Mermaid diagrams for claim trees. Understand the process of converting normalized JSON claim data into visual hierarchical patent dependencies.

- Repository: [handsomestWei/patent-disclosure-skill](https://github.com/handsomestWei/patent-disclosure-skill)
- Tags: how-to-guide
- Published: 2026-09-08

---

**The `handsomestWei/patent-disclosure-skill` repository generates Mermaid diagrams for claim trees by passing normalized JSON claim data through the `claim_tree_to_mermaid` function, which produces markup representing hierarchical patent dependencies as subgraphs and directed edges.**

Patent claim visualization requires transforming complex hierarchical relationships into readable visual formats. The `handsomestWei/patent-disclosure-skill` tool accomplishes this through a pure-Python pipeline that converts structured claim data into **Mermaid diagrams for claim trees** without relying on external APIs. This implementation leverages local JavaScript rendering to produce publication-ready visuals directly from patent text analysis.

## Understanding the Claim Tree Input Structure

The diagram generation process begins with a normalized JSON structure produced by the patent-reader pipeline. This object contains a `nodes` array where each element represents an individual claim with its metadata and relationships.

### Schema Definition

Each claim node in the input JSON must include specific fields that define its identity, content, and hierarchical position. The schema requires integer identifiers for claim numbers, text strings for claim content, and parent references that establish dependency relationships.

- `claim`: Integer identifier corresponding to the claim number
- `text`: String containing the full claim text
- `parent`: Integer referencing the parent claim (or `null` for independent claims)
- `delta`: Optional string indicating new or modified content for highlighting

The following example demonstrates a simplified claim tree structure with both independent and dependent claims:

```python

# Example claim-tree JSON (simplified)

claim_tree = {
    "nodes": [
        {"claim": 1, "text": "A device...", "parent": None, "delta": "new"},
        {"claim": 2, "text": "The device of claim 1...", "parent": 1},
        {"claim": 3, "text": "A method...", "parent": None},
    ],
    "roots": [1, 3],
}

```

## Core Conversion Logic in obsidian.py

The primary transformation logic resides in [`skills/patent-reader/tools/vault/obsidian.py`](https://github.com/handsomestWei/patent-disclosure-skill/blob/main/skills/patent-reader/tools/vault/obsidian.py). The **`claim_tree_to_mermaid`** function defined around line 190 orchestrates the conversion through a systematic node-processing pipeline.

### Extracting Node Metadata

The function iterates over the `nodes` list to extract each claim's identifier, textual label, and associated **delta** values. These elements form the foundational data for generating node definitions and annotation labels in the final Mermaid output.

### Building Sub-graphs for Independent Claims

Independent claims—those with a `null` parent value—are automatically encapsulated as separate **subgraphs** in the Mermaid markup. This architectural decision isolates each claim family visually, allowing independent claims to serve as roots for their respective hierarchical trees.

### Mapping Parent-Child Dependencies

For every claim that references a parent via the `parent` field, the generator creates a directed edge using the syntax `parent --> child`. This step captures the logical dependency relationships between claims, rendering the claim dependency tree as a directed graph.

### Applying Visual Styling

Short delta strings are appended to node labels to highlight new or modified claims. The function also supports optional style directives that apply specific colors or shapes to nodes based on their status, enhancing the visual differentiation between original and modified claim elements.

## Local Rendering Architecture

Once the Mermaid markup is generated, the **`render_mermaid`** function in [`skills/patent-disclosure/tools/mermaid_render.py`](https://github.com/handsomestWei/patent-disclosure-skill/blob/main/skills/patent-disclosure/tools/mermaid_render.py) handles the actual image generation. This module operates as a thin Python wrapper around the bundled **[`mermaid.min.js`](https://github.com/handsomestWei/patent-disclosure-skill/blob/main/mermaid.min.js)** library located in `skills/patent-disclosure/tools/vendor/`.

The rendering process executes entirely within the local environment using the bundled JavaScript runtime. This approach eliminates external API dependencies and ensures the tool functions offline while maintaining data privacy by processing sensitive patent information locally.

## Implementation Example

The following workflow demonstrates the complete process of generating a claim tree diagram from JSON input through final SVG output. This example covers both the markup generation phase and the subsequent rendering step.

First, import the conversion function and generate the Mermaid markup:

```python
from tools.vault.obsidian import claim_tree_to_mermaid

mermaid_code = claim_tree_to_mermaid(claim_tree, pub=False)
print(mermaid_code)

```

Typical output includes subgraph declarations and directed edges:

```

graph TD
  subgraph claim_1
    C1["1: A device… (new)"]
  end
  subgraph claim_2
    C2["2: The device of claim 1…"]
  end
  C1 --> C2
  subgraph claim_3
    C3["3: A method…"]
  end

```

Finally, render the diagram to SVG format:

```python
from tools.mermaid_render import render_mermaid

svg = render_mermaid(mermaid_code)   # Returns an SVG string

# The SVG can be saved or inserted into an Obsidian note.

```

## Summary

- The **`claim_tree_to_mermaid`** function in [`skills/patent-reader/tools/vault/obsidian.py`](https://github.com/handsomestWei/patent-disclosure-skill/blob/main/skills/patent-reader/tools/vault/obsidian.py) converts JSON claim trees into valid Mermaid markup syntax
- Independent claims generate isolated **subgraphs** while dependent claims connect to their parents via directed edges (`-->`)
- The **[`mermaid_render.py`](https://github.com/handsomestWei/patent-disclosure-skill/blob/main/mermaid_render.py)** module uses the bundled [`mermaid.min.js`](https://github.com/handsomestWei/patent-disclosure-skill/blob/main/mermaid.min.js) library for local SVG/PNG generation without network calls
- Delta annotations and optional style directives provide visual highlighting for modified or new claim content

## Frequently Asked Questions

### What input format does the claim tree generator require?

The generator expects a normalized JSON object containing a `nodes` array and a `roots` list. Each node must specify integer `claim` and `parent` fields (with `null` indicating independent claims), a `text` string, and an optional `delta` string for highlighting changes.

### How does the tool distinguish between independent and dependent claims?

Independent claims are identified by `null` parent values and rendered as separate **subgraphs** in the Mermaid output. Dependent claims receive directed edges connecting them to their specified parent claims, creating the hierarchical tree structure that reflects patent claim dependencies.

### Can the generated diagrams be customized with different colors or styles?

Yes, the conversion process supports optional style directives that modify node colors and shapes. The **delta** field automatically appends text labels to nodes, and the function accepts parameters that inject additional Mermaid style configurations for specific claim types or statuses.

### Does the tool require an internet connection to render diagrams?

No, the rendering process is entirely local. The **[`mermaid_render.py`](https://github.com/handsomestWei/patent-disclosure-skill/blob/main/mermaid_render.py)** module utilizes a bundled **[`mermaid.min.js`](https://github.com/handsomestWei/patent-disclosure-skill/blob/main/mermaid.min.js)** JavaScript runtime stored in `skills/patent-disclosure/tools/vendor/` to generate SVG or PNG outputs without external API calls or network access.