# Making JSON-LD visible — the schema graph visualizer I wish Schema App didn't charge for

Every page has a structured-data graph hidden inside its JSON-LD blocks. Schema App charges $29/mo to draw it. This tool parses your JSON-LD, flattens it by @id references, renders the full node/edge graph as interactive SVG. Finds orphans, missing @context, weak connectivity.

Author: J.A. Watte
Published: April 22, 2026
Source: https://jwatte.com/blog/blog-tool-schema-graph-visualizer/

---

_Part of the [AEO / GEO / AI-search audit tool stack](/blog/blog-new-aeo-audit-tools-2026/).  See the pillar post for the full catalog of sibling audits and where this one fits in the lineup._

If your page has a Person schema nested inside an Article schema, pointing at a Review with its own itemReviewed link, that's a four-node graph. You can't see it in raw JSON unless you've mapped graphs in your head for a living. Most people can't.

[The Schema Graph Visualizer](/tools/schema-graph-visualizer/) draws it.

## What the tool does

1. Fetches the URL
2. Parses every `<script type="application/ld+json">` block
3. Recursively walks each object, assigns `@id` to anonymous nodes, tracks edges (which property of which node points to which other node)
4. Renders the flattened graph as SVG — concentric rings, top-tier types at center (Organization, WebSite), deeper types in outer rings
5. Color-codes nodes by `@type` — Organization green, Article amber, Person purple, Product pink, FAQ teal, etc.
6. Labels each edge with the property name ("author", "publisher", "mainEntityOfPage", "reviewedProduct")
7. Reports: disconnected nodes (orphans in the graph), blocks missing `@context`, weak connectivity (too many anonymous nodes)

## Why the graph view catches issues text doesn't

Three common schema problems that are invisible in raw JSON but obvious in the graph:

**1. Orphan nodes.** You emitted a Person block with name + jobTitle + sameAs, but nothing on the page references the Person via `@id`. The Person floats alone. Google doesn't connect it to your Article authorship. Graph view: Person is a red disconnected circle. Text view: looks fine.

**2. @context scatter.** Some blocks declare `@context: "https://schema.org"`, others are inside a `@graph` that declares context once, others don't declare at all. The last category is technically broken — Google may not parse types correctly. Graph view: flags block-level missing context. Text view: you'd have to check each block individually.

**3. Weak connectivity.** If half your nodes are anonymous (no `@id`), the graph has no way to reference them from other blocks. They exist but can't be linked. Graph view: shows the anonymous node count and recommends adding `@id` everywhere. Text view: looks normal.

## How it flattens

The flattener walks each block recursively:

- Object with `@id` → use it as the node ID
- Object without `@id` → generate a stable anonymous ID (`_anon:N:type`)
- Array inside an object → visit each item with the array key as edge label
- Scalar value → skip (it's data on the parent node, not a child)

Edges capture the parent→child path, with the key name as the edge label. This produces a clean DAG in 99% of real-world JSON-LD.

## How the SVG layout works

I don't use a full force-directed graph library (would add 60-100 KB). Instead, a ring-based layout:

- **Center ring (0-1 nodes):** Top-tier types — Organization, WebSite
- **Inner ring (3-4 nodes):** Page-level types — WebPage, Article
- **Middle ring (8-10 nodes):** Content types — BreadcrumbList, FAQPage, Product, Person
- **Outer ring (everything else):** Leaf content — ListItem, Question, Answer, Offer

This gives a clean, readable layout even for dense schema pages. Hover a circle, the browser's native `<title>` tooltip shows the full `@id` and `@type`.

## How to use it

1. Go to [/tools/schema-graph-visualizer/](/tools/schema-graph-visualizer/)
2. Paste your URL
3. Click Run
4. Inspect the graph. Hover any circle for node details. Scroll for the type distribution table + raw parsed blocks.

Typical runtime: ~2-4 seconds per page.

## What it pairs with

- **[Schema JSON-LD Graph Linter](/tools/schema-jsonld-graph-linter/)** — the non-visual linter. Reports the same issues as text, for scripting / CI.
- **[Rich Results Eligibility Audit](/tools/rich-results-eligibility-audit/)** — per-type Google eligibility check.
- **[Schema Validator](/tools/schema-validator/)** — fires schema through schema.org spec validation.
- **[LLM Answer Citation Tracker](/tools/llm-answer-citation-tracker/)** — paired release, checks if AI engines cite you.

## The limits

- **Static HTML only.** If your JSON-LD is injected post-hydration (React / Vue / Svelte with no SSR), the tool can't see it. Use the [Prerender vs Hydration Parity](/tools/prerender-js-hydration-parity/) audit to fix that separately.
- **No spec validation.** The tool shows structure, not whether each `@type` has the right required fields. For that, use the [Rich Results Eligibility Audit](/tools/rich-results-eligibility-audit/).
- **No external-link resolution.** If your schema references an external `@id` (say, a Wikidata Q-number), the tool shows the reference but doesn't follow it.

## Related reading

- [LLM Answer Citation Tracker](/blog/blog-tool-llm-answer-citation-tracker/) — paired tool
- [Scheduled Monitor](/blog/blog-tool-seo-scheduled-monitor/) — longer-term context
- [Mega SEO Analyzer v2](/blog/blog-mega-seo-analyzer-v2-paid-tool-parity/)

## Fact-check notes and sources

- **JSON-LD spec:** [W3C JSON-LD 1.1](https://www.w3.org/TR/json-ld11/).
- **schema.org type hierarchy:** [schema.org vocabulary](https://schema.org/docs/full.html).
- **Google rich results requirements:** [Search Central structured-data guide](https://developers.google.com/search/docs/appearance/structured-data/search-gallery).
- **Schema App reference pricing:** [Schema App pricing](https://www.schemaapp.com/pricing/) as of 2026-04.

_This post is informational, not SEO-consulting advice. Mentions of Schema App, Yoast, Google, schema.org, and similar products are nominative fair use. No affiliation is implied._


---

Canonical HTML: https://jwatte.com/blog/blog-tool-schema-graph-visualizer/
RSS: https://jwatte.com/feed.xml
JSON Feed: https://jwatte.com/feed.json
Hero image: https://jwatte.com/images/blog-tool-schema-graph-visualizer.webp