1<!DOCTYPE html><html lang="en" data-mantine-color-scheme="light"><head>
1<script>(function(w,i,g){w[g]=w[g]||[];if(typeof w[g].push=='function')w[g].push(i)}) 2(window,'GTM-K7STZ35W','google_tags_first_party');</script>
2<script>(function(w,d,s,l){w[l]=w[l]||[];(function(){w[l].push(arguments);})('set', 'developer_id.dYzg1YT', true); 3 w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 4 j=d.createElement(s);j.async=true;j.src='/p8ih/'; 5 f.parentNode.insertBefore(j,f); 6 })(window,document,'script','dataLayer');</script>
6<meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/2b5b02fc7e511755-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/4c285fdca692ea22-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/8888a3826f4a3af4-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/eafabf029ad39a43-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/3be83a346553616c-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/9cc5b37ab1350db7-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/e6099e249fd938cc-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" as="image" href="/logos/amazon.svg"/><link rel="preload" as="image" href="/logos/netflix.png"/><link rel="preload" as="image" href="/logos/atlassian.svg"/><link rel="preload" as="image" href="/logos/deloitte.svg"/><link rel="preload" as="image" href="/logos/contentful.svg"/><link rel="preload" as="image" href="/brand-assets/todiagram-logo-icon.svg"/><link rel="preload" as="image" href="https://media.licdn.com/dms/image/v2/C4E0BAQG1DP_mMG7_jg/company-logo_200_200/company-logo_200_200/0/1630615039371/dynamicsource_ab_logo?e=2147483647&v=beta&t=0CN1Hs7wl0jUCnk74SiJ4o0OoyYn2M1DgwrnxzTiT6Y"/><link rel="stylesheet" href="/_next/static/css/ecbc86809d14aaa8.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/84877ca4ed19fcfa.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/3c55bf0507af87d0.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/e35dfb38818993df.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/88cd30ad2762b4a1.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/c917923398ae41e3.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/92ecffe9e9ed1205.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/40f0473b08fe8b66.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/4c3a2fb30b8f69fd.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/7c0113c339b74fed.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-399c41eda7715a19.js" integrity="sha384-JOmBcWvzz2qkKknsQJIakbEPw3L5vD/e1uZeLeLtuNgSY63DjbOTX0zz2EnrxBGZ"/>
6<script src="/_next/static/chunks/28923759-86a9a2425c0030c3.js" async="" integrity="sha384-DA2tFN+hfewz0Rw9MxnbSFmL2roiKd6dhmDPiEntlOejevWl0RCNBE3P79s/MMRb"></script>
6<script src="/_next/static/chunks/3878-d3b7d6f57ee22281.js" async="" integrity="sha384-3lO+0mNhB470utOk5bYI+FXBU6Bw+wqOBlIqGDAgufweKoj3JAbyBEviKDL2y2pg"></script>
6<script src="/_next/static/chunks/main-app-0dfa32ae29606236.js" async="" integrity="sha384-p2iZXcIaR9j4v0rT+s3HwjX+7yht/CkvepgPWjE7+2CZ/j3MU7wqsYVHO6eUO4Ij"></script>
6<script src="/_next/static/chunks/b17a74fd-7f3e2fb9ff9cec1b.js" async=""></script>
6<script src="/_next/static/chunks/622-4a598d9d2ab30471.js" async=""></script>
6<script src="/_next/static/chunks/7968-a7ab5578058b1f61.js" async=""></script>
6<script src="/_next/static/chunks/4138-70c604058c73b9a5.js" async=""></script>
6<script src="/_next/static/chunks/2135-93df2aa8a1f8f9a0.js" async=""></script>
6<script src="/_next/static/chunks/2889-c045f5f7b143a166.js" async=""></script>
6<script src="/_next/static/chunks/3292-816967c124065bbd.js" async=""></script>
6<script src="/_next/static/chunks/app/layout-a0ca639e72f144a8.js" async=""></script>
6<script src="/_next/static/chunks/d02c7a31-e322443e20c627bf.js" async=""></script>
6<script src="/_next/static/chunks/0561d147-3ec64437cf805414.js" async=""></script>
6<script src="/_next/static/chunks/5a050a8f-cd8623a27597e2e1.js" async=""></script>
6<script src="/_next/static/chunks/2054-eb0a1ea943438724.js" async=""></script>
6<script src="/_next/static/chunks/7319-475076051c5d1085.js" async=""></script>
6<script src="/_next/static/chunks/6011-00df3e0291da7b2a.js" async=""></script>
6<script src="/_next/static/chunks/2024-219f8229477e3c4d.js" async=""></script>
6<script src="/_next/static/chunks/6443-87ee0feb216f6e9b.js" async=""></script>
6<script src="/_next/static/chunks/5451-7f0f3b80298deea0.js" async=""></script>
6<script src="/_next/static/chunks/5800-176be018c6af6fcf.js" async=""></script>
6<script src="/_next/static/chunks/814-0429cee7303b5036.js" async=""></script>
6<script src="/_next/static/chunks/app/(landing)/page-3c69e9398f12306d.js" async=""></script>
6<link rel="preload" href="https://www.googletagmanager.com/gtm.js?id=GTM-K7STZ35W" as="script"/><link rel="preload" href="https://cdn.paddle.com/paddle/v2/paddle.js" as="script"/><title>Turn your data into diagrams you can read | ToDiagram</title><meta name="description" content="ToDiagram turns JSON, YAML, XML, CSV and Mermaid into interactive diagrams. Visualize payloads, schemas, and flows â or build custom node/edge diagrams from scratch."/><link rel="manifest" href="/manifest.webmanifest"/><link rel="canonical" href="https://todiagram.com"/><meta property="og:title" content="Turn your data into diagrams you can read"/><meta property="og:description" content="ToDiagram turns JSON, YAML, XML, CSV and Mermaid into interactive diagrams. Visualize payloads, schemas, and flows â or build custom node/edge diagrams from scratch."/><meta property="og:url" content="https://todiagram.com"/><meta property="og:image" content="https://todiagram.com/images/meta/og-image.png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="ToDiagram turns JSON, YAML, XML, CSV and Mermaid into interactive diagrams. Visualize payloads, schemas, and flows â or build custom node/edge diagrams from scratch."/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@todiagram"/><meta name="twitter:creator" content="@todiagram"/><meta name="twitter:title" content="Turn your data into diagrams you can read"/><meta name="twitter:description" content="ToDiagram turns JSON, YAML, XML, CSV and Mermaid into interactive diagrams. Visualize payloads, schemas, and flows â or build custom node/edge diagrams from scratch."/><meta name="twitter:image" content="https://todiagram.com/images/meta/og-image.png"/><meta name="twitter:image:alt" content="ToDiagram turns JSON, YAML, XML, CSV and Mermaid into interactive diagrams. Visualize payloads, schemas, and flows â or build custom node/edge diagrams from scratch."/><meta name="twitter:image:width" content="1200"/><meta name="twitter:image:height" content="630"/><link rel="icon" href="/favicon.ico?dfe7af6b0fb1ccf9" type="image/x-icon" sizes="48x48"/><meta name="next-size-adjust" content=""/><meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1C1C1E"/>
6<script data-mantine-script="true">try { 7 var _colorScheme = window.localStorage.getItem("mantine-color-scheme-value"); 8 var colorScheme = _colorScheme === "light" || _colorScheme === "dark" || _colorScheme === "auto" ? _colorScheme : "light"; 9 var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; 10 document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); 11} catch (e) {} 12</script>
12<script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareApplication","name":"ToDiagram","applicationCategory":"BrowserApplication","operatingSystem":"Browser","keywords":"diagram, data editor, json viewer, data visualization, seo tools","offers":{"@type":"Offer","price":"10","priceCurrency":"USD"}}</script>
12<script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" integrity="sha384-w1OChgUsMz6Qk5chKcfnqibG8VNLM2FcpIoMlpX/PTNfc9SE68eLEzTKv7bV3aY7" noModule=""></script>
12</head><body><div hidden=""><!--$--><!--/$--></div><style data-mantine-styles="true">:root, :host{--mantine-cursor-type: pointer;--mantine-webkit-font-smoothing: unset;--mantine-moz-font-smoothing: unset;--mantine-font-family: 'Poppins', 'Poppins Fallback';--mantine-font-family-monospace: 'Geist Mono', 'Geist Mono Fallback';--mantine-font-family-headings: 'Poppins', 'Poppins Fallback';--mantine-radius-default: calc(0.5rem * var(--mantine-scale));} 13 14 15 16:root[data-mantine-color-scheme="light"], :host([data-mantine-color-scheme="light"]){--mantine-color-anchor: var(--mantine-color-blue-8);--mantine-color-dark-filled: var(--mantine-color-dark-8);--mantine-color-dark-filled-hover: var(--mantine-color-dark-9);--mantine-color-dark-light: rgba(31, 31, 31, 0.1);--mantine-color-dark-light-hover: rgba(31, 31, 31, 0.12);--mantine-color-dark-light-color: var(--mantine-color-dark-8);--mantine-color-dark-outline: var(--mantine-color-dark-8);--mantine-color-dark-outline-hover: rgba(31, 31, 31, 0.05);--mantine-color-gray-filled: var(--mantine-color-gray-8);--mantine-color-gray-filled-hover: var(--mantine-color-gray-9);--mantine-color-gray-light: rgba(52, 58, 64, 0.1);--mantine-color-gray-light-hover: rgba(52, 58, 64, 0.12);--mantine-color-gray-light-color: var(--mantine-color-gray-8);--mantine-color-gray-outline: var(--mantine-color-gray-8);--mantine-color-gray-outline-hover: rgba(52, 58, 64, 0.05);--mantine-color-red-filled: var(--mantine-color-red-8);--mantine-color-red-filled-hover: var(--mantine-color-red-9);--mantine-color-red-light: rgba(224, 49, 49, 0.1);--mantine-color-red-light-hover: rgba(224, 49, 49, 0.12);--mantine-color-red-light-color: var(--mantine-color-red-8);--mantine-color-red-outline: var(--mantine-color-red-8);--mantine-color-red-outline-hover: rgba(224, 49, 49, 0.05);--mantine-color-pink-filled: var(--mantine-color-pink-8);--mantine-color-pink-filled-hover: var(--mantine-color-pink-9);--mantine-color-pink-light: rgba(194, 37, 92, 0.1);--mantine-color-pink-light-hover: rgba(194, 37, 92, 0.12);--mantine-color-pink-light-color: var(--mantine-color-pink-8);--mantine-color-pink-outline: var(--mantine-color-pink-8);--mantine-color-pink-outline-hover: rgba(194, 37, 92, 0.05);--mantine-color-grape-filled: var(--mantine-color-grape-8);--mantine-color-grape-filled-hover: var(--mantine-color-grape-9);--mantine-color-grape-light: rgba(156, 54, 181, 0.1);--mantine-color-grape-light-hover: rgba(156, 54, 181, 0.12);--mantine-color-grape-light-color: var(--mantine-color-grape-8);--mantine-color-grape-outline: var(--mantine-color-grape-8);--mantine-color-grape-outline-hover: rgba(156, 54, 181, 0.05);--mantine-color-violet-filled: var(--mantine-color-violet-8);--mantine-color-violet-filled-hover: var(--mantine-color-violet-9);--mantine-color-violet-light: rgba(103, 65, 217, 0.1);--mantine-color-violet-light-hover: rgba(103, 65, 217, 0.12);--mantine-color-violet-light-color: var(--mantine-color-violet-8);--mantine-color-violet-outline: var(--mantine-color-violet-8);--mantine-color-violet-outline-hover: rgba(103, 65, 217, 0.05);--mantine-color-indigo-filled: var(--mantine-color-indigo-8);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-9);--mantine-color-indigo-light: rgba(59, 91, 219, 0.1);--mantine-color-indigo-light-hover: rgba(59, 91, 219, 0.12);--mantine-color-indigo-light-color: var(--mantine-color-indigo-8);--mantine-color-indigo-outline: var(--mantine-color-indigo-8);--mantine-color-indigo-outline-hover: rgba(59, 91, 219, 0.05);--mantine-color-blue-filled: var(--mantine-color-blue-8);--mantine-color-blue-filled-hover: var(--mantine-color-blue-9);--mantine-color-blue-light: rgba(25, 113, 194, 0.1);--mantine-color-blue-light-hover: rgba(25, 113, 194, 0.12);--mantine-color-blue-light-color: var(--mantine-color-blue-8);--mantine-color-blue-outline: var(--mantine-color-blue-8);--mantine-color-blue-outline-hover: rgba(25, 113, 194, 0.05);--mantine-color-cyan-filled: var(--mantine-color-cyan-8);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-9);--mantine-color-cyan-light: rgba(12, 133, 153, 0.1);--mantine-color-cyan-light-hover: rgba(12, 133, 153, 0.12);--mantine-color-cyan-light-color: var(--mantine-color-cyan-8);--mantine-color-cyan-outline: var(--mantine-color-cyan-8);--mantine-color-cyan-outline-hover: rgba(12, 133, 153, 0.05);--mantine-color-teal-filled: var(--mantine-color-teal-8);--mantine-color-teal-filled-hover: var(--mantine-color-teal-9);--mantine-color-teal-light: rgba(9, 146, 104, 0.1);--mantine-color-teal-light-hover: rgba(9, 146, 104, 0.12);--mantine-color-teal-light-color: var(--mantine-color-teal-8);--mantine-color-teal-outline: var(--mantine-color-teal-8);--mantine-color-teal-outline-hover: rgba(9, 146, 104, 0.05);--mantine-color-green-filled: var(--mantine-color-green-8);--mantine-color-green-filled-hover: var(--mantine-color-green-9);--mantine-color-green-light: rgba(47, 158, 68, 0.1);--mantine-color-green-light-hover: rgba(47, 158, 68, 0.12);--mantine-color-green-light-color: var(--mantine-color-green-8);--mantine-color-green-outline: var(--mantine-color-green-8);--mantine-color-green-outline-hover: rgba(47, 158, 68, 0.05);--mantine-color-lime-filled: var(--mantine-color-lime-8);--mantine-color-lime-filled-hover: var(--mantine-color-lime-9);--mantine-color-lime-light: rgba(102, 168, 15, 0.1);--mantine-color-lime-light-hover: rgba(102, 168, 15, 0.12);--mantine-color-lime-light-color: var(--mantine-color-lime-8);--mantine-color-lime-outline: var(--mantine-color-lime-8);--mantine-color-lime-outline-hover: rgba(102, 168, 15, 0.05);--mantine-color-yellow-filled: var(--mantine-color-yellow-8);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-9);--mantine-color-yellow-light: rgba(240, 140, 0, 0.1);--mantine-color-yellow-light-hover: rgba(240, 140, 0, 0.12);--mantine-color-yellow-light-color: var(--mantine-color-yellow-8);--mantine-color-yellow-outline: var(--mantine-color-yellow-8);--mantine-color-yellow-outline-hover: rgba(240, 140, 0, 0.05);--mantine-color-orange-filled: var(--mantine-color-orange-8);--mantine-color-orange-filled-hover: var(--mantine-color-orange-9);--mantine-color-orange-light: rgba(232, 89, 12, 0.1);--mantine-color-orange-light-hover: rgba(232, 89, 12, 0.12);--mantine-color-orange-light-color: var(--mantine-color-orange-8);--mantine-color-orange-outline: var(--mantine-color-orange-8);--mantine-color-orange-outline-hover: rgba(232, 89, 12, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><div style="z-index:1;min-height:100dvh;position:relative" class=""><div class="navbar navbar_wrapper___2DUG"><nav class="navbar_navbar__xpSDp"><div style="align-items:center" class="m_8bffd616 mantine-Flex-root __m__-_R_5dav5uvb_"><button style="--ai-bg:transparent;--ai-hover:transparent;--ai-color:var(--mantine-color-gray-6);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-right:var(--mantine-spacing-md)" class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root mantine-hidden-from-sm" data-variant="transparent" type="button" aria-label="Open menu"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><line x1="4" x2="20" y1="12" y2="12"></line><line x1="4" x2="20" y1="6" y2="6"></line><line x1="4" x2="20" y1="18" y2="18"></line></svg></span></button><div class="" aria-haspopup="menu" aria-expanded="false" id="mantine-_R_2mldav5uvb_-target"><a class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/" aria-label="ToDiagram"><img style="--image-object-fit:contain;width:auto;height:calc(1.875rem * var(--mantine-scale))" class="Logo_light__Kbllk m_9e117634 mantine-Image-root" alt="ToDiagram Logo" loading="eager" fetchPriority="high"/></a></div><button style="--button-height:var(--button-height-md);--button-padding-x:var(--button-padding-x-md);--button-fz:var(--mantine-font-size-md);--button-radius:var(--mantine-radius-md);--button-bg:transparent;--button-hover:var(--mantine-color-dark-light-hover);--button-color:var(--mantine-color-dark-light-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-left:var(--mantine-spacing-lg);padding-inline:var(--mantine-spacing-sm);font-weight:400" class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root mantine-visible-from-sm" data-variant="subtle" data-size="md" data-with-right-section="true" type="button" aria-haspopup="dialog" aria-expanded="false" id="mantine-_R_bmldav5uvb_-target"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Product</span><span class="m_a74036a mantine-Button-section" data-position="right"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m6 9 6 6 6-6"></path></svg></span></span></button><button style="--button-height:var(--button-height-md);--button-padding-x:var(--button-padding-x-md);--button-fz:var(--mantine-font-size-md);--button-radius:var(--mantine-radius-md);--button-bg:transparent;--button-hover:var(--mantine-color-dark-light-hover);--button-color:var(--mantine-color-dark-light-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;padding-inline:var(--mantine-spacing-sm);font-weight:400" class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root mantine-visible-from-sm" data-variant="subtle" data-size="md" data-with-right-section="true" type="button" aria-haspopup="dialog" aria-expanded="false" id="mantine-_R_cmldav5uvb_-target"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Solutions</span><span class="m_a74036a mantine-Button-section" data-position="right"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m6 9 6 6 6-6"></path></svg></span></span></button><a style="--button-height:var(--button-height-md);--button-padding-x:var(--button-padding-x-md);--button-fz:var(--mantine-font-size-md);--button-radius:var(--mantine-radius-md);--button-bg:transparent;--button-hover:var(--mantine-color-dark-light-hover);--button-color:var(--mantine-color-dark-light-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;padding-inline:var(--mantine-spacing-sm);font-weight:400" class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root mantine-visible-from-sm" data-variant="subtle" data-size="md" href="/pricing"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Pricing</span></span></a><a style="--button-height:var(--button-height-md);--button-padding-x:var(--button-padding-x-md);--button-fz:var(--mantine-font-size-md);--button-radius:var(--mantine-radius-md);--button-bg:transparent;--button-hover:var(--mantine-color-dark-light-hover);--button-color:var(--mantine-color-dark-light-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;padding-inline:var(--mantine-spacing-sm);font-weight:400" class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root mantine-visible-from-sm" data-variant="subtle" data-size="md" href="/blog"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Blog</span></span></a><a style="--button-height:var(--button-height-md);--button-padding-x:var(--button-padding-x-md);--button-fz:var(--mantine-font-size-md);--button-radius:var(--mantine-radius-md);--button-bg:transparent;--button-hover:var(--mantine-color-dark-light-hover);--button-color:var(--mantine-color-dark-light-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;padding-inline:var(--mantine-spacing-sm);font-weight:400" class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root mantine-visible-from-sm" data-variant="subtle" data-size="md" href="/docs"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Docs</span></span></a></div><div style="gap:1rem;align-items:center" class="m_8bffd616 mantine-Flex-root __m__-_R_9dav5uvb_ mantine-visible-from-sm"><a style="--button-height:var(--button-height-md);--button-padding-x:var(--button-padding-x-md);--button-fz:var(--mantine-font-size-md);--button-radius:calc(0.5rem * var(--mantine-scale));--button-bg:#ededed;--button-hover:rgba(213, 213, 213, 1);--button-color:var(--mantine-color-black);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;box-shadow:0px -10.499px 20.924px 0px rgba(0, 0, 0, 0.13) inset, 0px 13.178px 19.621px 0px rgba(255, 255, 255, 0.67) inset;border:1px solid #cbcbcb;font-weight:600" class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root mantine-visible-from-sm" data-size="md" data-with-right-section="true" href="/editor"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Editor</span><span class="m_a74036a mantine-Button-section" data-position="right"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></span></span></a></div></nav></div>
16<main style="padding-bottom:calc(3.75rem * var(--mantine-scale));min-height:calc(100vh - 246px)" class=""><div class="landing"><div class="Hero_hero__Enj0t"><div class="Hero_blob__j6jvG Hero_blobA__6y1d4"></div><div class="Hero_blob__j6jvG Hero_blobB__Dhn4P"></div><div style="--container-size:var(--container-size-xl);z-index:1;position:relative" class="m_7485cace mantine-Container-root" data-size="xl" data-strategy="block"><div class="Hero_grid__A5j65"><div style="--stack-gap:0rem;--stack-align:stretch;--stack-justify:flex-start" class="m_6d731127 mantine-Stack-root"><h1 class="Hero_display__D_Ic3">Turn<!-- --> <span class="Hero_serifSlot__bGlDT" style="font-family:'Instrument Serif', 'Instrument Serif Fallback'"><span class="Hero_rot__9rAxi" data-on="1">JSON</span><span class="Hero_rot__9rAxi">YAML</span><span class="Hero_rot__9rAxi">XML</span><span class="Hero_rot__9rAxi">CSV</span><span class="Hero_rot__9rAxi">Mermaid</span><span class="Hero_rot__9rAxi">anything</span></span><br/>into <span class="Hero_blue__LlPfM">diagrams.</span></h1><p class="Hero_lede__sq4zy">Paste any structured data â or build your own with custom nodes and edges.</p><div class="Hero_ctaRow__J7n6F"><a style="--button-height:var(--button-height-lg);--button-padding-x:var(--button-padding-x-lg);--button-fz:var(--mantine-font-size-lg);--button-radius:var(--mantine-radius-xl);--button-color:var(--mantine-color-white);font-weight:500" class="mantine-focus-auto mantine-active landing_warmPrimary__n6ezP m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-size="lg" data-with-left-section="true" href="/editor"><span class="m_80f1301b mantine-Button-inner"><span class="m_a74036a mantine-Button-section" data-position="left"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 384 512" height="12" width="12" xmlns="http://www.w3.org/2000/svg"><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"></path></svg></span><span class="m_811560b9 mantine-Button-label">Open the editor</span></span></a><a style="--button-height:var(--button-height-lg);--button-padding-x:var(--button-padding-x-lg);--button-fz:var(--mantine-font-size-lg);--button-radius:var(--mantine-radius-xl);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);font-weight:500" class="mantine-focus-auto mantine-active landing_warmGhost__vVs4M m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="lg" href="#how-it-works"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">See how it works</span></span></a></div><div class="Hero_trust__ck5tN"><span class="Hero_label__NYp6c">Used by individuals at</span><div class="Hero_logos__elbVX"><img class="m_9e117634 mantine-Image-root" src="/logos/amazon.svg" alt="Amazon"/><img class="m_9e117634 mantine-Image-root" src="/logos/netflix.png" alt="Netflix"/><img class="m_9e117634 mantine-Image-root" src="/logos/atlassian.svg" alt="Atlassian"/><img class="m_9e117634 mantine-Image-root" src="/logos/deloitte.svg" alt="Deloitte"/><img class="m_9e117634 mantine-Image-root" src="/logos/contentful.svg" alt="Contentful"/></div></div></div><div style="font-family:'Geist Mono', 'Geist Mono Fallback'" class="Hero_canvas__CecPK"><div class="Hero_chrome__jQHXv m_8bffd616 mantine-Flex-root __m__-_R_3ddt3dlav5uvb_"><b></b><b></b><b></b><span class="Hero_path__aiqa2">/ api-response.json</span></div>
16<div class="Hero_nodeLayer__NV3sA"><svg class="Hero_edges__FX_IO" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><path d="M 27 50 C 30.5 50 30.5 25 34 25"></path><path d="M 27 50 C 30.5 50 30.5 70 34 70"></path><path d="M 64 25 L 70 25"></path><path d="M 64 25 C 67 25 67 50 70 50"></path><path d="M 64 70 L 70 70"></path></svg><div class="landing_node__n4OvS landing_n-lav__wpMpx Hero_nodeAbs__2OnGK" style="left:3%;top:45.5%;width:24%"><div class="landing_hd__YJ3jn">fruits</div><div class="landing_row__Pp0NW"><span class="landing_k__HUP7l">fruits:</span><span class="landing_v__jPqOM landing_vr__BQ2Vq">[2 items]</span></div></div><div class="landing_node__n4OvS landing_n-coral__SFuy5 Hero_nodeAbs__2OnGK" style="left:34%;top:13%;width:30%"><div class="landing_hd__YJ3jn">fruits[0]</div><div class="landing_row__Pp0NW"><span class="landing_k__HUP7l">name:</span><span class="landing_v__jPqOM landing_vs__jrwID">"Apple"</span></div><div class="landing_row__Pp0NW"><span class="landing_k__HUP7l">color:</span><span class="landing_v__jPqOM landing_vs__jrwID"><i class="landing_sw__hcWPQ" style="background:#FF3B30"></i>#FF3B30</span></div><div class="landing_row__Pp0NW"><span class="landing_k__HUP7l">details:</span><span class="landing_v__jPqOM landing_vr__BQ2Vq">{2 keys}</span></div><div class="landing_row__Pp0NW"><span class="landing_k__HUP7l">nutrients:</span><span class="landing_v__jPqOM landing_vr__BQ2Vq">{2 keys}</span></div></div><div class="landing_node__n4OvS landing_n-peach__FL7Y0 Hero_nodeAbs__2OnGK" style="left:34%;top:60%;width:30%"><div class="landing_hd__YJ3jn">fruits[1]</div><div class="landing_row__Pp0NW"><span class="landing_k__HUP7l">name:</span><span class="landing_v__jPqOM landing_vs__jrwID">"Banana"</span></div><div class="landing_row__Pp0NW"><span class="landing_k__HUP7l">color:</span><span class="landing_v__jPqOM landing_vs__jrwID"><i class="landing_sw__hcWPQ" style="background:#FFE066"></i>#FFE066</span></div><div class="landing_row__Pp0NW"><span class="landing_k__HUP7l">details:</span><span class="landing_v__jPqOM landing_vr__BQ2Vq">{1 key}</span></div></div><div class="landing_node__n4OvS landing_n-lime__sItIC Hero_nodeAbs__2OnGK" style="left:70%;top:18%;width:22%"><div class="landing_hd__YJ3jn">details</div><div class="landing_row__Pp0NW"><span class="landing_k__HUP7l">type:</span><span class="landing_v__jPqOM landing_vs__jrwID">"Pome"</span></div><div class="landing_row__Pp0NW"><span class="landing_k__HUP7l">season:</span><span class="landing_v__jPqOM landing_vs__jrwID">"Fall"</span></div></div><div class="landing_node__n4OvS landing_n-mint__gz9nG Hero_nodeAbs__2OnGK" style="left:70%;top:43%;width:22%"><div class="landing_hd__YJ3jn">nutrients</div><div class="landing_row__Pp0NW"><span class="landing_k__HUP7l">calories:</span><span class="landing_v__jPqOM landing_vn__t1Ogp">52</span></div><div class="landing_row__Pp0NW"><span class="landing_k__HUP7l">fiber:</span><span class="landing_v__jPqOM landing_vs__jrwID">"2.4g"</span></div></div><div class="landing_node__n4OvS landing_n-blue__vR3wl Hero_nodeAbs__2OnGK" style="left:70%;top:65.5%;width:22%"><div class="landing_hd__YJ3jn">details</div><div class="landing_row__Pp0NW"><span class="landing_k__HUP7l">type:</span><span class="landing_v__jPqOM landing_vs__jrwID">"
16Berry"</span></div></div><div class="Hero_liveBadge__pBxm6"><span></span>live</div></div></div></div></div></div><section class="LogoBar_formats__e7bXH"><div style="--container-size:var(--container-size-xl)" class="m_7485cace mantine-Container-root" data-size="xl" data-strategy="block"><div class="LogoBar_row__t4God"><div class="LogoBar_lbl__3KufH">Paste anything</div><div style="font-family:'Geist Mono', 'Geist Mono Fallback'" class="LogoBar_list__Y2461"><span class="LogoBar_chip__sgPJ5"><span class="LogoBar_sw__rdpxL" style="background:var(--lv-coral)"></span>JSON</span><span class="LogoBar_chip__sgPJ5"><span class="LogoBar_sw__rdpxL" style="background:var(--lv-cobalt)"></span>YAML</span><span class="LogoBar_chip__sgPJ5"><span class="LogoBar_sw__rdpxL" style="background:var(--lv-lavender)"></span>XML</span><span class="LogoBar_chip__sgPJ5"><span class="LogoBar_sw__rdpxL" style="background:var(--lv-lime)"></span>CSV</span><span class="LogoBar_chip__sgPJ5"><span class="LogoBar_sw__rdpxL" style="background:var(--lv-mint)"></span>JSON Schema</span><span class="LogoBar_chip__sgPJ5"><span class="LogoBar_sw__rdpxL" style="background:var(--lv-peach)"></span>Mermaid</span><span class="LogoBar_chip__sgPJ5"><span class="LogoBar_sw__rdpxL" style="background:var(--lv-coral)"></span>Custom nodes & edges</span></div></div></div></section><section class="TransformShowcase_demo__Nw1GA" id="how-it-works"><div style="--container-size:var(--container-size-xl)" class="m_7485cace mantine-Container-root" data-size="xl" data-strategy="block"><div class="landing_sectionHead___rDE4"><div><span class="landing_tag__CRJAH">â 01 / How it works</span><h2>Paste it on the left.<!-- --> <span class="landing_serif__KbBTj" style="font-family:'Instrument Serif', 'Instrument Serif Fallback'">See it on the right.</span></h2></div><p class="mantine-focus-auto landing_side__kXSE8 m_b6d8b162 mantine-Text-root">No setup, no schema ceremony. The editor parses as you type and lays out nodes with ELK. Drag to rearrange, click to inspect, export as PNG, JPEG, or SVG.</p></div><div class="TransformShowcase_surface__iNJOx"><div class="TransformShowcase_input__or9XM"><div class="TransformShowcase_tabs__FRB_T" role="tablist"><button type="button" role="tab" aria-selected="true" class="TransformShowcase_tab__k2eC3 TransformShowcase_on__TflMc">JSON</button><button type="button" role="tab" aria-selected="false" class="TransformShowcase_tab__k2eC3">YAML</button><button type="button" role="tab" aria-selected="false" class="TransformShowcase_tab__k2eC3">CSV</button><button type="button" role="tab" aria-selected="false" class="TransformShowcase_tab__k2eC3">XML</button><button type="button" role="tab" aria-selected="false" class="TransformShowcase_tab__k2eC3">Mermaid</button><button type="button" role="tab" aria-selected="false" class="TransformShowcase_tab__k2eC3">ToDiagram</button></div><pre class="TransformShowcase_code__EdEBE"><span class="TransformShowcase_tkP__Fistq">{</span> 17 <span class="TransformShowcase_tkS__LEk2r">"type"</span><span class="TransformShowcase_tkP__Fistq">: </span><span class="TransformShowcase_tkS__LEk2r">"NetworkGraph"</span><span class="TransformShowcase_tkP__Fistq">,</span> 18 <span class="TransformShowcase_tkS__LEk2r">"version"</span><span class="TransformShowcase_tkP__Fistq">: </span><span class="TransformShowcase_tkN__dybqK">2</span><span class="TransformShowcase_tkP__Fistq">,</span> 19 <span class="TransformShowcase_tkS__LEk2r">"metric"</span><span class="TransformShowcase_tkP__Fistq">: </span><span class="TransformShowcase_tkS__LEk2r">"etx"</span><span class="TransformShowcase_tkP__Fistq">,</span> 20 <span class="TransformShowcase_tkS__LEk2r">"router_id"</span><span class="TransformShowcase_tkP__Fistq">: </span><span class="TransformShowcase_tkS__LEk2r">"172.16.40.24"</span><span class="TransformShowcase_tkP__Fistq">,</span> 21 <span class="TransformShowcase_tkS__LEk2r">"label"</span><span class="TransformShowcase_tkP__Fistq">: </span><span class="TransformShowcase_tkS__LEk2r">"Test Network"</span><span class="TransformShowcase_tkP__Fistq">,</span> 22 <span class="TransformShowcase_tkS__LEk2r">"nodes"</span><span class="TransformShowcase_tkP__Fistq">: [</span> 23 <span class="TransformShowcase_tkP__Fistq">{ </span><span class="TransformShowcase_tkS__LEk2r">"id"</span><span class="TransformShowcase_tkP__Fistq">: </span><span class="TransformShowcase_tkN__dybqK">123</span><span class="TransformShowcase_tkP__Fistq">, </span><span class="TransformShowcase_tkS__LEk2r">"label"</span><span class="TransformShowcase_tkP__Fistq">: </span><span class="TransformShowcase_tkS__LEk2r">"node A"</span><span class="TransformShowcase_tkP__Fistq"> }
23,</span> 24 <span class="TransformShowcase_tkP__Fistq">{ </span><span class="TransformShowcase_tkS__LEk2r">"id"</span><span class="TransformShowcase_tkP__Fistq">: </span><span class="TransformShowcase_tkS__LEk2r">"172.16.40.60"</span><span class="TransformShowcase_tkP__Fistq">, </span><span class="TransformShowcase_tkS__LEk2r">"label"</span><span class="TransformShowcase_tkP__Fistq">: </span><span class="TransformShowcase_tkS__LEk2r">"node B"</span><span class="TransformShowcase_tkP__Fistq"> },</span> 25 <span class="TransformShowcase_tkP__Fistq">{ </span><span class="TransformShowcase_tkS__LEk2r">"id"</span><span class="TransformShowcase_tkP__Fistq">: </span><span class="TransformShowcase_tkS__LEk2r">"172.16.41.1"</span><span class="TransformShowcase_tkP__Fistq">, </span><span class="TransformShowcase_tkS__LEk2r">"label"</span><span class="TransformShowcase_tkP__Fistq">: </span><span class="TransformShowcase_tkS__LEk2r">"node C"
25</span><span class="TransformShowcase_tkP__Fistq"> }</span> 26 <span class="TransformShowcase_tkP__Fistq">]</span> 27<span class="TransformShowcase_tkP__Fistq">}</span></pre></div><div class="TransformShowcase_canvas__2SxRy"><img style="--image-object-fit:contain" class="TransformShowcase_canvasImage__oS6jn m_9e117634 mantine-Image-root" src="/images/landing/network-graph.svg" alt="A network graph diagram generated from the JSON on the left" loading="lazy"/><a class="TransformShowcase_overlay__y2XvR" aria-label="Open at Editor" href="/editor?format=json&example=true"><span class="TransformShowcase_openEditorBtn__Oyvy1">Open at Editor<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="14" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></span></a></div></div></div></section><section class="UseCasesGrid_usecases__o4ZrE" id="use-cases"><div style="--container-size:var(--container-size-xl)" class="m_7485cace mantine-Container-root" data-size="xl" data-strategy="block"><div class="landing_sectionHead___rDE4"><div><span class="landing_tag__CRJAH">â 02 / Who's it for</span><h2>Three kinds of messy data.<br/><span class="landing_serif__KbBTj" style="font-family:'Instrument Serif', 'Instrument Serif Fallback'">One clean view.</span></h2></div><p class="mantine-focus-auto landing_side__kXSE8 m_b6d8b162 mantine-Text-root">Whether you're debugging a webhook at 11pm, mapping a dataset, or dropping a diagram into a deck â ToDiagram gives the same moment of âoh, that's what it looks like.â </p></div><div style="font-family:'Geist Mono', 'Geist Mono Fallback'" class="UseCasesGrid_cases__pLOSa"><div class="UseCasesGrid_case__gr3tb UseCasesGrid_dev__xyr4l"><span class="UseCasesGrid_tag__nysko">â For developers</span><h3 style="font-family:var(--mantine-font-family);font-weight:600">Stop squinting at API responses.</h3><p style="font-family:var(--mantine-font-family)">Paste a payload from Postman, a webhook log, or a prod incident. Get a readable graph with every field, every nested array, every null you forgot to handle.</p><div class="UseCasesGrid_mini__EamsJ"><svg class="UseCasesGrid_miniSvg__QCR5J" viewBox="0 0 260 160" preserveAspectRatio="xMidYMid meet"><path class="UseCasesGrid_edge__yDrfM" d="M 96 38 C 118 38, 118 76, 140 76"></path><path class="UseCasesGrid_edge__yDrfM" d="M 96 38 C 118 38, 118 122, 140 122"></path><path class="UseCasesGrid_edge__yDrfM" d="M 180 76 C 200 76, 205 40, 222 40"></path><path class="UseCasesGrid_edge__yDrfM" d="M 180 76 L 222 76"></path><path class="UseCasesGrid_edge__yDrfM" d="M 180 122 L 222 122"></path><rect class="UseCasesGrid_pill__je6Rg" x="6" y="22" width="90" height="32" rx="16" fill="var(--lv-coral)"></rect><text class="UseCasesGrid_pillLabel__IQ4rG UseCasesGrid_light__17lBq" x="51" y="38">POST /users</text><rect class="UseCasesGrid_pill__je6Rg" x="140" y="60" width="40" height="32" rx="16" fill="#fff"></rect><text class="UseCasesGrid_pillLabel__IQ4rG" x="160" y="76">user</text><rect class="UseCasesGrid_pill__je6Rg" x="140" y="106" width="40" height="32" rx="16" fill="#fff"></rect><text class="UseCasesGrid_pillLabel__IQ4rG" x="160" y="122">meta</text><rect class="UseCasesGrid_pill__je6Rg" x="222" y="24" width="32" height="32" rx="16" fill="#fff"></rect><text class="UseCasesGrid_pillLabel__IQ4rG" x="238" y="40">42</text><rect class="UseCasesGrid_pill__je6Rg" x="222" y="60" width="32" height="32" rx="16" fill="var(--lv-cobalt)"></rect><text class="UseCasesGrid_pillLabel__IQ4rG UseCasesGrid_light__17lBq" x="238" y="76">name</text><rect class="UseCasesGrid_pill__je6Rg" x="222" y="106" width="32" height="32" rx="16" fill="var(--lv-lime)"></rect><text class="UseCasesGrid_pillLabel__IQ4rG" x="238" y="122">null</text></svg></div></div><div class="UseCasesGrid_case__gr3tb UseCasesGrid_data__rLeR8"><span class="UseCasesGrid_tag__nysko">â For data teams</span><h3 style="font-family:var(--mantine-font-family);font-weight:600">See shape before you write a single query.</h3><p style="font-family:var(--mantine-font-family)">Drop in CSV headers, a sample row, or a JSON Schema. ToDiagram infers types, relationships, and cardinality so you know
27what you're working with.</p><div class="UseCasesGrid_mini__EamsJ"><svg class="UseCasesGrid_miniSvg__QCR5J" viewBox="0 0 260 160" preserveAspectRatio="xMidYMid meet"><path class="UseCasesGrid_edge__yDrfM" d="M 78 80 L 110 80"></path><path class="UseCasesGrid_edge__yDrfM" d="M 170 80 C 185 80, 185 40, 200 40"></path><path class="UseCasesGrid_edge__yDrfM" d="M 170 80 C 185 80, 185 120, 200 120"></path><rect class="UseCasesGrid_pill__je6Rg" x="10" y="64" width="68" height="32" rx="16" fill="var(--lv-mint)"></rect><text class="UseCasesGrid_pillLabel__IQ4rG" x="44" y="80">orders.csv</text><rect class="UseCasesGrid_pill__je6Rg" x="110" y="64" width="60" height="32" rx="16" fill="var(--lv-cobalt)"></rect><text class="UseCasesGrid_pillLabel__IQ4rG UseCasesGrid_light__17lBq" x="140" y="80">order_id</text><rect class="UseCasesGrid_pill__je6Rg" x="200" y="24" width="58" height="30" rx="15" fill="#fff"></rect><text class="UseCasesGrid_pillLabel__IQ4rG" x="229" y="40">int · PK</text><rect class="UseCasesGrid_pill__je6Rg" x="200" y="104" width="58" height="30" rx="15" fill="#fff"></rect><text class="UseCasesGrid_pillLabel__IQ4rG" x="229" y="120">user_id</text><rect class="UseCasesGrid_pill__je6Rg" x="10" y="124" width="70" height="26" rx="13" fill="var(--lv-peach)"></rect><text class="UseCasesGrid_pillLabel__IQ4rG" x="45" y="138" style="font-size:9px">2,481 rows</text></svg></div></div><div class="UseCasesGrid_case__gr3tb UseCasesGrid_docs___ZbPe"><span class="UseCasesGrid_tag__nysko">â For sharing & decks</span><h3 style="font-family:var(--mantine-font-family);font-weight:600">From messy payload to shippable asset.</h3><p style="font-family:var(--mantine-font-family)">Export your diagram as PNG, JPEG, or SVG and drop it into tickets, slide decks, or design reviews â pixel-perfect, no manual cleanup.</p><div class="UseCasesGrid_mini__EamsJ"><svg class="UseCasesGrid_miniSvg__QCR5J" viewBox="0 0 260 160" preserveAspectRatio="xMidYMid meet"><path class="UseCasesGrid_edge__yDrfM" d="M 92 80 L 118 80"></path><path class="UseCasesGrid_edge__yDrfM" d="M 174 80 C 195 80, 200 38, 220 38"></path><path class="UseCasesGrid_edge__yDrfM" d="M 174 80 L 220 80"></path><path class="UseCasesGrid_edge__yDrfM" d="M 174 80 C 195 80, 200 122, 220 122"></path><rect class="UseCasesGrid_pill__je6Rg" x="10" y="64" width="82" height="32" rx="16" fill="var(--lv-lavender)"></rect><text class="UseCasesGrid_pillLabel__IQ4rG" x="51" y="80">diagram</text><rect class="UseCasesGrid_pill__je6Rg" x="118" y="64" width="56" height="32" rx="16" fill="var(--lv-ink)"></rect><text class="UseCasesGrid_pillLabel__IQ4rG UseCasesGrid_light__17lBq" x="146" y="80">export</text><rect class="UseCasesGrid_pill__je6Rg" x="220" y="22" width="36" height="32" rx="16" fill="var(--lv-lime)"></rect><text class="UseCasesGrid_pillLabel__IQ4rG" x="238" y="38">PNG</text><rect class="UseCasesGrid_pill__je6Rg" x="220" y="64" width="36" height="32" rx="16" fill="#fff"></rect><text class="UseCasesGrid_pillLabel__IQ4rG" x="238" y="80">JPEG</text><rect class="UseCasesGrid_pill__je6Rg" x="220" y="106" width="36" height="32" rx="16" fill="var(--lv-peach)"></rect><text class="UseCasesGrid_pillLabel__IQ4rG" x="238" y="122">SVG</text></svg></div></div></div></div></section><section class="BentoGrid_features__Aur_K" id="features"><div style="--container-size:var(--container-size-xl)" class="m_7485cace mantine-Container-root" data-size="xl" data-strategy="block"><div class="landing_sectionHead___rDE4"><div><span class="landing_tag__CRJAH">â 03 / What's in the box</span><h2>Small details.<!-- --> <span class="landing_serif__KbBTj" style="font-family:'Instrument Serif', 'Instrument Serif Fallback'">Big difference.</span></h2></div><p class="mantine-focus-auto landing_side__kXSE8 m_b6d8b162 mantine-Text-root">Every feature we add answers one question: does this make the diagram easier to read? If no, we cut it.</p></div><div class="BentoGrid_grid__J6yU9"><div style="background:color-mix(in oklch, var(--lv-peach) 22%, #fff)" class="BentoGrid_feat__W4z5F BentoGrid_big__MR0wP"><span class="BentoGrid_badge__7RsZs"><span style="width:7px;height:7px;background:var(--lv-coral);border-radius:50%"></span> <!-- -->search</span><h3>Find any node in a 10,000-line payload.</h3><p>Fuzzy search scans keys, values, and paths. Matching nodes highlight on the canvas while the rest fades â perfect for hunting down that one nested flag.</p><div class="BentoGrid_visual__eXYZq BentoGrid_visualFilled__uRDwI"><div style="font-family:'Geist Mono', 'Geist Mono Fallback'" class="BentoGrid_searchRow__CgssO"><span style="color:var(--lv-ink-soft)">Search</span><span>user.permissions.<span class="BentoGrid_hl__Ufaia">admin</span></span><span style="margin-left:auto;color:var(--lv-ink-soft);font-size:11px">3 matches</span></div><div style="display:flex;gap:6px;font-family:'Geist Mono', 'Geist Mono Fallback'" class=""><span class="BentoGrid_dimChip__Xp4GJ">$.user.permissions.admin</span></div></div></div><div style="background:color-mix(in oklch, var(--lv-mint) 22%, #fff)" class="BentoGrid_feat__W4z5F BentoGrid_med__7_GzY"><span class="BentoGrid_badge__7RsZs"><span style="width:7px;height:7px;background:oklch(0.55 0.15 165);border-radius:50%"></span> <!-- -->AI</span><h3>Describe it. Let AI draft the diagram.</h3><p>Text-to-diagram turns plain prompts into a structured graph you can edit immediately â great for sketching a flow, a schema, or an architecture map.</p><div style="font-family:'Geist Mono', 'Geist Mono Fallback';font-size:12px" class="BentoGrid_visual__eXYZq BentoGrid_visualFilled__uRDwI"><div style="display:flex;gap:8px;align-items:center" class=""><span style="padding:3px 8px;background:color-mix(in oklch, var(--lv-mint) 60%, white);border:1.5px solid var(--lv-ink);border-radius:6px">prompt</span><span>âA Stripe checkout sequenceâ</span></div><div style="margin-top:10px;font-size:11.5px;color:var(--lv-ink-soft)" class="">drafted <span style="color:var(--lv-ink)">9 nodes</span> · ready to insert</div></div></div><div style="background:color-mix(in oklch, var(--lv-lavender) 22%, #fff)" class="BentoGrid_feat__W4z5F BentoGrid_sm__hgkMv"><span class="BentoGrid_badge__7RsZs"><span style="width:7px;height:7px;background:var(--lv-cobalt);border-radius:50%"></span> <!-- -->themes</span><h3>Make it yours with one tap.</h3><p>Swap the whole palette â nodes, rows, edges â without leaving the canvas. Hover a swatch to preview, click to commit.</p><div style="font-family:'Geist Mono', 'Geist Mono Fallback'" class="BentoGrid_swatchRow__MEAcX" role="radiogroup" aria-label="Theme palette"><button type="button" role="radio" aria-checked="false" aria-label="Sunset theme" class="BentoGrid_swatch__a_rxi" style="--a:var(--lv-coral);--b:var(--lv-peach);--c:var(--lv-paper)"></button><button type="button" role="radio" aria-checked="true" aria-label="Cobalt theme" class="BentoGrid_swatch__a_rxi BentoGrid_swatchOn__03x8V" style="--a:var(--lv-cobalt);--b:var(--lv-lavender);--c:var(--lv-paper)"></button><button type="button" role="radio" aria-checked="false" aria-label="Mint theme" class="BentoGrid_swatch__a_rxi" style="--a:oklch(0.55 0.15 165);--b:var(--lv-mint);--c:var(--lv-paper)"></button><button type="button" role="radio" aria-checked="false" aria-label="Graphite theme" class="BentoGrid_swatch__a_rxi" style="--a:var(--lv-ink);--b:var(--lv-ink-soft);--c:var(--lv-paper)"></button><button type="button" role="radio" aria-checked="false" aria-label="Orchid theme" class="BentoGrid_swatch__a_rxi" style="--a:oklch(0.65 0.22 330);--b:var(--lv-lavender);--c:var(--lv-paper)"></button></div></div><div style="background:#fff" class="BentoGrid_feat__W4z5F BentoGrid_sm__hgkMv"><span class="BentoGrid_badge__7RsZs"><span style="width:7px;height:7px;background:var(--lv-cobalt);border-radius:50%"></span> <!-- -->share</span><h3>One-click public links.</h3><p>Publish a read-only link, share it with your team, or invite teammates to edit the same diagram alongside you.</p></div><div style="background:color-mix(in oklch, var(--lv-peach) 14%, #fff)" class="BentoGrid_feat__W4z5F BentoGrid_sm__hgkMv"><span class="BentoGrid_badge__7RsZs"><span style="width:7px;height:7px;background:var(--lv-coral);border-radius:50%"></span> <!-- -->privacy</span><h3>Your data stays in your browser.</h3><p>Parsing and rendering happen entirely on your machine. Diagrams are only synced to the cloud when you choose to save or share â sensitive payloads stay sensitive.</p></div></div></div></section><section class="TwoWay_twoway__PfmwK"><div style="--container-size:var(--container-size-xl)" class="m_7485cace mantine-Container-root" data-size="xl" data-strategy="block"><div class="landing_sectionHead___rDE4"><div><span class="landing_tag__CRJAH">â Visual editing</span><h2>Edit your<!-- --> <span class="landing_serif__KbBTj" style="font-family:'Instrument Serif', 'Instrument Serif Fallback'">data</span> <!-- -->or your<!-- --> <span class="landing_serif__KbBTj" style="font-family:'Instrument Serif', 'Instrument Serif Fallback'">diagram.</span><br/>Both stay in sync.</h2></div><p class="mantine-focus-auto landing_side__kXSE8 m_b6d8b162 mantine-Text-root">Change a node in the diagram â the source updates. Edit a value in the structured view â the diagram redraws. It'
27s the same truth, two ways.</p></div><div style="font-family:'Geist Mono', 'Geist Mono Fallback'" class="TwoWay_grid__7a2wr"><div class="TwoWay_panel__0NBpD"><div class="TwoWay_ttl__U6slA"><b>Diagram view</b><span>drag · edit · connect</span></div><div class="TwoWay_diagramWrap__JcaCE"><div class="landing_node__n4OvS landing_n-coral__SFuy5" style="flex:0 0 44%"><div class="landing_hd__YJ3jn">Network Graph</div><div class="landing_row__Pp0NW"><span class="landing_k__HUP7l">type:</span><span class="landing_v__jPqOM landing_vs__jrwID">"NetworkGraph"</span></div><div class="landing_row__Pp0NW" style="background:color-mix(in oklch, var(--lv-lime) 30%, transparent)"><span class="landing_k__HUP7l">version:</span><span class="landing_v__jPqOM landing_vs__jrwID">"<!-- -->2.0.1<span class="TwoWay_caret__iqa_O"></span>"</span></div><div class="landing_row__Pp0NW"><span class="landing_k__HUP7l">metric:</span><span class="landing_v__jPqOM landing_vs__jrwID">"etx"</span></div></div><div class="TwoWay_diagramConnector__c0TdG"></div><div class="landing_node__n4OvS landing_n-lav__wpMpx" style="flex:0 0 28%"><div class="landing_hd__YJ3jn">nodes[0]</div><div class="landing_row__Pp0NW"><span class="landing_k__HUP7l">id:</span><span class="landing_v__jPqOM landing_vn__t1Ogp">123</span></div><div class="landing_row__Pp0NW"><span class="landing_k__HUP7l">label:</span><span class="landing_v__jPqOM landing_vs__jrwID">"node A"</span></div></div></div></div><div class="TwoWay_swap__u2AP5"><div class="TwoWay_arrow__GlWtk">â</div><div class="TwoWay_label__alA4L">live sync</div><div class="TwoWay_arrow__GlWtk TwoWay_down__xWjOh">â</div></div><div class="TwoWay_panel__0NBpD"><div class="TwoWay_ttl__U6slA"><b>Structured view</b><span style="color:oklch(0.5 0.15 160)">saved â</span></div><div class="TwoWay_structRow__6gqKi"><span class="TwoWay_tt__gUrMC TwoWay_s__39Y8N">Aa</span><span class="TwoWay_kk__QgPsn">type</span><span class="TwoWay_vv__99i11">NetworkGraph</span></div><div class="TwoWay_structRow__6gqKi TwoWay_editing__5j__u"><span class="TwoWay_tt__gUrMC TwoWay_s__39Y8N">Aa</span><span class="TwoWay_kk__QgPsn">version</span><span class="TwoWay_vv__99i11" style="color:var(--lv-str)">2.0.1<span class="TwoWay_caret__iqa_O"></span></span></div><div class="TwoWay_structRow__6gqKi"><span class="TwoWay_tt__gUrMC TwoWay_s__39Y8N">Aa</span><span class="TwoWay_kk__QgPsn">metric</span><span class="TwoWay_vv__99i11">etx</span></div><div class="TwoWay_structRow__6gqKi"><span class="TwoWay_tt__gUrMC TwoWay_s__39Y8N">Aa</span><span class="TwoWay_kk__QgPsn">label</span><span class="TwoWay_vv__99i11">Test Network</span></div><div class="TwoWay_structRow__6gqKi"><span class="TwoWay_tt__gUrMC TwoWay_a__kXmtJ">[ ]</span><span class="TwoWay_kk__QgPsn">nodes</span><span class="TwoWay_vv__99i11" style="color:var(--lv-ink-soft)">[3 items]</span></div><div class="TwoWay_structRow__6gqKi"><span class="TwoWay_tt__gUrMC TwoWay_a__kXmtJ">[ ]</span><span class="TwoWay_kk__QgPsn">links</span><span class="TwoWay_vv__99i11" style="color:var(--lv-ink-soft)">[3 items]</span></div></div></div></div></section><section class="Validation_validate__bDFFN"><div style="--container-size:var(--container-size-xl)" class="m_7485cace mantine-Container-root" data-size="xl" data-strategy="block"><div class="Validation_grid__KAiKl"><div style="font-family:'Geist Mono', 'Geist Mono Fallback';position:relative" class=""><span class="Validation_tag__sOUGI">â JSON Schema</span><h2 class="Validation_title__173sE" style="font-family:var(--mantine-font-family)">Catch bad data<!-- --> <span class="landing_serif__KbBTj" style="font-family:'Instrument Serif', 'Instrument Serif Fallback';color:var(--lv-coral)">before</span> <!-- -->it ships.</h2><p class="Validation_desc__l4mn2" style="font-family:var(--mantine-font-family)">Attach a JSON Schema and ToDiagram validates as you type. Failing paths light up on the diagram, and every error tells you exactly which node and which field.</p><div class="Validation_errors__VzwQA"><div style="font-family:var(--mantine-font-family)" class="Validation_hdr__W_IyG">
27Schema Errors · 2</div><div class="Validation_err__8oYvg"><span>"Network Graph" requires property <b>"protocol"</b></span></div><div class="Validation_err__8oYvg"><span>"version" is not of type(s) <b>string</b></span></div></div></div><div style="font-family:'Geist Mono', 'Geist Mono Fallback'" class="Validation_visual__egFOW"><div class="landing_node__n4OvS landing_n-coral__SFuy5 Validation_errPulse__XrVUI" style="flex:0 0 42%;border-color:oklch(0.65 0.2 25)"><div class="landing_hd__YJ3jn">Network Graph</div><div class="landing_row__Pp0NW" style="background:color-mix(in oklch, var(--lv-coral) 15%, #fff)"><span class="landing_k__HUP7l">version:</span><span class="landing_v__jPqOM landing_vn__t1Ogp">2</span></div><div class="landing_row__Pp0NW"><span class="landing_k__HUP7l">metric:</span><span class="landing_v__jPqOM landing_vs__jrwID">"etx"</span></div><div class="landing_row__Pp0NW"><span class="landing_k__HUP7l">label:</span><span class="landing_v__jPqOM landing_vs__jrwID">"Test Network"</span></div></div><div class="Validation_connector__QImTv"><div class="Validation_connectorBranch__hwibW Validation_branchTop__4tWpg"></div><div class="Validation_connectorBranch__hwibW Validation_branchBottom__tmpIO"></div></div><div class="Validation_children__ZoCZW"><div class="landing_node__n4OvS landing_n-coral__SFuy5"><div class="landing_hd__YJ3jn">nodes[0]</div><div class="landing_row__Pp0NW" style="background:color-mix(in oklch, var(--lv-coral) 15%, #fff)"><span class="landing_k__HUP7l">id:</span><span class="landing_v__jPqOM landing_vn__t1Ogp">123</span></div><div class="landing_row__Pp0NW"><span class="landing_k__HUP7l">label:</span><span class="landing_v__jPqOM landing_vs__jrwID">"node A"</span></div></div><div class="landing_node__n4OvS landing_n-lav__wpMpx"><div class="landing_hd__YJ3jn">nodes[1]</div><div class="landing_row__Pp0NW"><span class="landing_k__HUP7l">id:</span><span class="landing_v__jPqOM landing_vs__jrwID">"172.16.40.60"</span></div><div class="landing_row__Pp0NW"><span class="landing_k__HUP7l">label:</span><span class="landing_v__jPqOM landing_vs__jrwID">"node B"</span></div></div></div></div></div></div></section><section class="Mcp_mcp__8allc"><div style="--container-size:var(--container-size-xl)" class="m_7485cace mantine-Container-root" data-size="xl" data-strategy="block"><div class="landing_sectionHead___rDE4"><div><span class="landing_tag__CRJAH">â MCP integration</span><h2>Give your agent<!-- --> <span class="landing_serif__KbBTj" style="font-family:'Instrument Serif', 'Instrument Serif Fallback'">eyes</span> <!-- -->for data.</h2></div><p class="mantine-focus-auto landing_side__kXSE8 m_b6d8b162 mantine-Text-root">One MCP server works with every coding agent you already use. Diagrams become something your AI can produce on demand â in-chat, in-IDE, in the flow.</p></div><div class="Mcp_card__FFhWT"><div style="font-family:'Geist Mono', 'Geist Mono Fallback'" class="Mcp_copy__HN6vw"><span class="Mcp_tag__39xmw">/ mcp · model context protocol</span><h3 class="Mcp_title__ZDLsW" style="font-family:var(--mantine-font-family)">Connect once.<br/><span class="landing_serif__KbBTj" style="font-family:'Instrument Serif', 'Instrument Serif Fallback';color:var(--lv-peach)">Diagram anywhere.</span></h3><p class="Mcp_desc__AHNFv" style="font-family:var(--mantine-font-family)">Install <code>@todiagram/todiagram-mcp</code> in Claude, Cursor, Zed, VS Code or any MCP-compatible agent. Your AI can inspect a payload, read a fixture, or render a schema as a diagram â without leaving the chat.</p><div style="display:flex;gap:10px;margin-top:36px;flex-wrap:wrap;font-family:var(--mantine-font-family)" class=""><a style="--button-height:var(--button-height-md);--button-padding-x:var(--button-padding-x-md);--button-fz:var(--mantine-font-size-md);--button-radius:var(--mantine-radius-xl);--button-color:var(--mantine-color-white);background:var(--lv-paper);color:var(--lv-ink);border:1px solid var(--lv-paper);font-weight:500" class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-size="md" href="/mcp"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Install MCP server â</span></span></a><a style="--button-height:var(--button-height-md);--button-padding-x:var(--button-padding-x-md);--button-fz:var(--mantine-font-size-md);--button-radius:var(--mantine-radius-xl);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);background:transparent;color:var(--lv-paper);border:1px solid color-mix(in oklch, var(--lv-paper) 30%, transparent);font-weight:500" class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="md" href="/docs/mcp"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">See setup docs</span></span></a></div></div><div class="Mcp_viz__l3ZhN"><svg class="Mcp_lines__HdOKZ" viewBox="0 0 100 100" preserveAspectRatio="none" style="width:100%;height:100%">
27<path d="M 50 36 L 50 18"></path><path d="M 62.2 43.05 L 79.8 32.97"></path><path d="M 37.8 43.05 L 20.2 32.97"></path><path d="M 62.2 56.95 L 79.8 67.03"></path><path d="M 37.8 56.95 L 20.2 67.03"></path><path d="M 50 64 L 50 82"></path></svg><div class="Mcp_node__Z_ScQ Mcp_n1__rFH7d"><span class="Mcp_dot__fzBSF" style="background:var(--lv-coral)"></span>Claude</div><div class="Mcp_node__Z_ScQ Mcp_n2__cn1wK"><span class="Mcp_dot__fzBSF" style="background:var(--lv-cobalt)"></span>Cursor</div><div class="Mcp_node__Z_ScQ Mcp_n3__tntpI"><span class="Mcp_dot__fzBSF" style="background:var(--lv-lime)"></span>Zed</div><div class="Mcp_node__Z_ScQ Mcp_n4__AsRf0"><span class="Mcp_dot__fzBSF" style="background:var(--lv-lavender)"></span>VS Code</div><div class="Mcp_node__Z_ScQ Mcp_n5__KojPp"><span class="Mcp_dot__fzBSF" style="background:var(--lv-peach)"></span>Windsurf</div><div class="Mcp_node__Z_ScQ Mcp_n6__iXFJK"><span class="Mcp_dot__fzBSF" style="background:var(--lv-mint)"></span>Continue</div><div class="Mcp_hub__R6Jos"><img class="m_9e117634 mantine-Image-root" src="/brand-assets/todiagram-logo-icon.svg" alt="ToDiagram" width="56" height="56"/></div></div></div><div class="Mcp_benefits__JD8LI"><div class="Mcp_benefit__7mnPz"><div class="Mcp_num__0yAih">01 · in the flow</div><h4>Never leave the editor.</h4><p>Ask your agent for a diagram mid-debug. It opens in a pane next to your code.</p></div><div class="Mcp_benefit__7mnPz"><div class="Mcp_num__0yAih">02 · context-aware</div><h4>Knows your repo.</h4><p>The server reads files the agent already has access to â diagram any fixture, schema, or config on demand.</p></div><div class="Mcp_benefit__7mnPz"><div class="Mcp_num__0yAih">03 · shareable</div><h4>Link & embed output.</h4><p>Every generated diagram comes back as a live URL â drop it in a PR, doc, or Slack.</p></div></div></div></section><section class="SmallUses_moreUses__kcHgn"><div style="--container-size:var(--container-size-xl)" class="m_7485cace mantine-Container-root" data-size="xl" data-strategy="block"><div class="landing_sectionHead___rDE4"><div><span class="landing_tag__CRJAH">â And plenty more</span><h2>One tool.<!-- --> <span class="landing_serif__KbBTj" style="font-family:'Instrument Serif', 'Instrument Serif Fallback'">Many shapes of data.</span></h2></div></div><div class="SmallUses_grid__yqUwt"><a class="SmallUses_chip__TvW0Q" href="/use-cases/cicd-diagrams"><div style="background:color-mix(in oklch, var(--lv-coral) 35%, #fff);font-family:'Geist Mono', 'Geist Mono Fallback'" class="SmallUses_ico__Q1yMN">â</div><h3>CI/CD diagrams</h3><p>Map pipelines, jobs, and dependencies from a single config file.</p><span class="SmallUses_tag__zw7Hx" style="font-family:'Geist Mono', 'Geist Mono Fallback'">for platform teams</span></a>
27<a class="SmallUses_chip__TvW0Q" href="/use-cases/network-diagrams"><div style="background:color-mix(in oklch, var(--lv-lavender) 45%, #fff);font-family:'Geist Mono', 'Geist Mono Fallback'" class="SmallUses_ico__Q1yMN">â</div><h3>Network diagrams</h3><p>Visualize routers, hosts, and links from structured topology data.</p><span class="SmallUses_tag__zw7Hx" style="font-family:'Geist Mono', 'Geist Mono Fallback'">for infra</span></a><a class="SmallUses_chip__TvW0Q" href="/use-cases/api-design-and-documentation"><div style="background:color-mix(in oklch, var(--lv-mint) 50%, #fff);font-family:'Geist Mono', 'Geist Mono Fallback'" class="SmallUses_ico__Q1yMN">â</div><h3>API design & docs</h3><p>Turn OpenAPI or raw responses into a navigable type graph.</p><span class="SmallUses_tag__zw7Hx" style="font-family:'Geist Mono', 'Geist Mono Fallback'">for API teams</span></a><a class="SmallUses_chip__TvW0Q" href="/use-cases/json-schema-validation"><div style="background:color-mix(in oklch, var(--lv-lime) 55%, #fff);font-family:'Geist Mono', 'Geist Mono Fallback'" class="SmallUses_ico__Q1yMN">â³</div><h3>JSON Schema</h3><p>See every required, every type, every $ref â all in one view.</p><span class="SmallUses_tag__zw7Hx" style="font-family:'Geist Mono', 'Geist Mono Fallback'">for backend devs</span></a><a class="SmallUses_chip__TvW0Q" href="/use-cases/design-systems-and-tokens"><div style="background:color-mix(in oklch, var(--lv-peach) 55%, #fff);font-family:'Geist Mono', 'Geist Mono Fallback'" class="SmallUses_ico__Q1yMN">â</div><h3>Design systems & tokens</h3><p>Explore design tokens and theme objects as a structured map.</p><span class="SmallUses_tag__zw7Hx" style="font-family:'Geist Mono', 'Geist Mono Fallback'">for designers</span></a><a class="SmallUses_chip__TvW0Q" href="/use-cases/jsonld-schema-visualization"><div style="background:color-mix(in oklch, var(--lv-cobalt) 30%, #fff);font-family:'Geist Mono', 'Geist Mono Fallback'" class="SmallUses_ico__Q1yMN">â¡</div><h3>JSON-LD</h3><p>Render linked data documents so context and types are easy to read.</p><span class="SmallUses_tag__zw7Hx" style="font-family:'Geist Mono', 'Geist Mono Fallback'">for data teams</span></a><a class="SmallUses_chip__TvW0Q" href="/mermaid-editor-visualization"><div style="background:color-mix(in oklch, var(--lv-coral) 30%, #fff);font-family:'Geist Mono', 'Geist Mono Fallback'" class="SmallUses_ico__Q1yMN">â¶</div><h3>Mermaid diagrams</h3><p>Paste flowcharts, sequence, and state â render them cleanly.</p><span class="SmallUses_tag__zw7Hx" style="font-family:'Geist Mono', 'Geist Mono Fallback'">for everyone</span></a><a class="SmallUses_chip__TvW0Q" href="/custom-diagrams"><div style="background:color-mix(in oklch, var(--lv-lavender) 35%, #fff);font-family:'Geist Mono', 'Geist Mono Fallback'" class="SmallUses_ico__Q1yMN">â±</div><h3>Custom nodes & edges</h3><p>Define your own nodes and edges for anything data-shaped.</p><span class="SmallUses_tag__zw7Hx" style="font-family:'Geist Mono', 'Geist Mono Fallback'">power users</span></a></div></div></section><section class="Testimonials_testimonials__V_w6_"><div style="--container-size:var(--container-size-xl)" class="m_7485cace mantine-Container-root" data-size="xl" data-strategy="block"><div class="landing_sectionHead___rDE4"><div><span class="landing_tag__CRJAH">â In the wild</span><h2>âFinally, my JSON<!-- --> <span class="landing_serif__KbBTj" style="font-family:'Instrument Serif', 'Instrument Serif Fallback'">makes sense.</span>â</h2></div><p class="mantine-focus-auto landing_side__kXSE8 m_b6d8b162 mantine-Text-root">A few words from teams who paste weird data for a living.</p></div><div style="font-family:var(--mantine-font-family)" class="Testimonials_grid__Cy2hR"><div class="Testimonials_quote__v1iu2 Testimonials_featured__Ln3BV"><div style="font-family:'Instrument Serif', 'Instrument Serif Fallback'" class="Testimonials_mark__AlBT_">â</div><blockquote>At DynamicSource, we work with complex JSON files to define calculation algorithms for our performance applications. ToDiagram has been extremely helpful for visualizing complex logic and navigating deeply nested structures. Of all the tools we tried, ToDiagram is by far the most intuitive and powerful, making it much easier to work with our data.</blockquote><div class="Testimonials_who__HpsLO"><div class="Testimonials_avaImg__B2yom"><img style="--image-object-fit:cover;width:calc(2.5rem * var(--mantine-scale));height:calc(2.5rem * var(--mantine-scale))" class="m_9e117634 mantine-Image-root" src="https://media.licdn.com/dms/image/v2/C4E0BAQG1DP_mMG7_jg/company-logo_200_200/company-logo_200_200/0/1630615039371/dynamicsource_ab_logo?e=2147483647&v=beta&t=0CN1Hs7wl0jUCnk74SiJ4o0OoyYn2M1DgwrnxzTiT6Y" alt="DynamicSource"/></div><div class="Testimonials_meta__Ct2Ua"><b>Performance Engineering Lead</b><span>DynamicSource</span></div></div></div><div class="Testimonials_quote__v1iu2"><div style="font-family:'Instrument Serif', 'Instrument Serif Fallback'" class="Testimonials_mark__AlBT_">â</div><blockquote>Paste in a payload, see the shape, share the link. It's the workflow I always wished browsers had built in.</blockquote><div class="Testimonials_who__HpsLO"><div class="Testimonials_ava__gyTb8"></div><div class="Testimonials_meta__Ct2Ua"><b>
27Backend developer</b><span>via GitHub reviews</span></div></div></div><div class="Testimonials_quote__v1iu2"><div style="font-family:'Instrument Serif', 'Instrument Serif Fallback'" class="Testimonials_mark__AlBT_">â</div><blockquote>Our team uses ToDiagram to document the shape of every new API. The diagrams update with the data â onboarding engineers has gotten noticeably faster.</blockquote><div class="Testimonials_who__HpsLO"><div style="background:conic-gradient(from 270deg, var(--lv-cobalt), var(--lv-mint), var(--lv-lavender))" class="Testimonials_ava__gyTb8"></div><div class="Testimonials_meta__Ct2Ua"><b>Platform engineer</b><span>shared anonymously</span></div></div></div></div></div></section><section class="FinalCTA_cta__DFaez"><div style="--container-size:var(--container-size-xl)" class="m_7485cace mantine-Container-root" data-size="xl" data-strategy="block"><div class="FinalCTA_box__jg6rI"><div class=""><h2>Some data<br/>wants to be<!-- --> <span style="font-family:'Instrument Serif', 'Instrument Serif Fallback';color:var(--lv-peach);font-weight:400;font-style:italic">seen.</span></h2><p>Paste a payload in seconds. Free to try, with Pro plans for teams that share a lot.</p><div style="display:flex;gap:10px;flex-wrap:wrap" class=""><a style="--button-height:var(--button-height-lg);--button-padding-x:var(--button-padding-x-lg);--button-fz:var(--mantine-font-size-lg);--button-radius:var(--mantine-radius-xl);--button-color:var(--mantine-color-white);background:var(--lv-paper);color:var(--lv-ink);border:1px solid var(--lv-paper);font-weight:500" class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-size="lg" href="/editor"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Open the editor â</span></span></a><a style="--button-height:var(--button-height-lg);--button-padding-x:var(--button-padding-x-lg);--button-fz:var(--mantine-font-size-lg);--button-radius:var(--mantine-radius-xl);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);background:transparent;color:var(--lv-paper);border:1px solid color-mix(in oklch, var(--lv-paper) 30%, transparent);font-weight:500" class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="lg" href="/pricing"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">See pricing</span></span></a></div></div><div class="FinalCTA_visual__y1LPz"><svg viewBox="0 0 260 260" style="width:100%;height:100%"><defs><pattern id="lvgrid" width="22" height="22" patternUnits="userSpaceOnUse"><path d="M22 0 L0 0 0 22" fill="none" stroke="rgba(253,251,245,0.08)" stroke-width="1"></path></pattern></defs><rect width="260" height="260" fill="url(#lvgrid)" rx="16"></rect><path d="M 50 50 C 100 50, 100 130, 150 130" fill="none" stroke="var(--lv-paper)" stroke-width="1.3" stroke-dasharray="4 4" class="FinalCTA_animDash__oXFf6"></path><path d="M 150 130 C 200 130, 200 200, 220 200" fill="none" stroke="var(--lv-paper)" stroke-width="1.3" stroke-dasharray="4 4" class="FinalCTA_animDash__oXFf6"></path><path d="M 150 130 C 200 130, 200 60, 220 60" fill="none" stroke="var(--lv-paper)" stroke-width="1.3" stroke-dasharray="4 4" class="FinalCTA_animDash__oXFf6"></path><rect x="22" y="34" width="58" height="34" rx="7" fill="var(--lv-coral)"></rect><rect x="122" y="114" width="58" height="34" rx="7" fill="var(--lv-lime)"></rect><rect x="192" y="44" width="54" height="32" rx="7" fill="var(--lv-lavender)"></rect><rect x="192" y="184" width="54" height="32" rx="7" fill="var(--lv-peach)"></rect></svg></div></div></div></section><section class="Reads_blog__Zsmc4"><div style="--container-size:var(--container-size-xl)" class="m_7485cace mantine-Container-root" data-size="xl" data-strategy="block"><div class="Reads_head__FwuPJ"><div><span class="landing_tag__CRJAH">â From the blog</span><style data-mantine-styles="inline">.__m__-_R_jbdpdlav5uvb_{font-size:calc(1.75rem * var(--mantine-scale));}@media(min-width: 36em){.__m__-_R_jbdpdlav5uvb_{font-size:calc(2rem * var(--mantine-scale));}}@media(min-width: 48em){.__m__-_R_jbdpdlav5uvb_{font-size:calc(2.625rem * var(--mantine-scale));}}</style><h2 style="letter-spacing:-0.028em;margin:0rem;color:var(--lv-ink);font-weight:600;line-height:1.05" class="mantine-focus-auto m_b6d8b162 mantine-Text-root __m__-_R_jbdpdlav5uvb_">Guides, tips & news<br/><span class="landing_serif__KbBTj" style="font-family:'Instrument Serif', 'Instrument Serif Fallback'">from ToDiagram.</span></h2></div><a style="--button-height:var(--button-height-md);--button-padding-x:var(--button-padding-x-md);--button-fz:var(--mantine-font-size-md);--button-radius:var(--mantine-radius-xl);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);font-weight:500" class="mantine-focus-auto mantine-active landing_warmGhost__vVs4M m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="md" href="/blog"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Read more from ToDiagram â</span></span></a></div><div class="Reads_grid__Hkd3N"><a class="Reads_post__NyFAH" href="/blog/introducing-new-shapes-in-todiagram"><div style="background:linear-gradient(135deg, color-mix(in oklch, var(--lv-coral) 25%, var(--lv-paper)), color-mix(in oklch, var(--lv-peach) 30%, var(--lv-paper)))" class="Reads_thumb__BS5F8"><img style="--image-object-fit:cover;width:100%;height:100%" class="m_9e117634 mantine-Image-root" src="/images/new-shapes-banner.webp" alt="Introducing New Shapes in ToDiagram" loading="lazy"/></div><div class="Reads_body__3ezq9"><h3>Introducing New Shapes in ToDiagram</h3><p>ToDiagram now supports more node shapes for Mermaid and custom diagrams, including diamonds, cylinders, circles, hexagons, parallelograms, trapezoids, and more.</p></div></a><a class="Reads_post__NyFAH" href="/blog/visualize-pull-requests-as-diagrams"><div style="background:linear-gradient(135deg, color-mix(in oklch, var(--lv-ink) 85%, var(--lv-paper)) 40%, c
27olor-mix(in oklch, var(--lv-lavender) 35%, var(--lv-paper)))" class="Reads_thumb__BS5F8"><img style="--image-object-fit:cover;width:100%;height:100%" class="m_9e117634 mantine-Image-root" src="/images/visualizing-pr.jpeg" alt="Visualize Pull Requests as Diagrams" loading="lazy"/></div><div class="Reads_body__3ezq9"><h3>Visualize Pull Requests as Diagrams</h3><p>Large pull requests hide structural changes across scattered diffs. Instead of mentally reconstructing the system, let an LLM explain the PR as a diagram and review the shape of the change before reading the code.</p></div></a><a class="Reads_post__NyFAH" href="/blog/introducing-todiagram-skills-for-coding-agents"><div style="background:linear-gradient(135deg, color-mix(in oklch, var(--lv-mint) 35%, var(--lv-paper)), color-mix(in oklch, var(--lv-lime) 30%, var(--lv-paper)))" class="Reads_thumb__BS5F8"><img style="--image-object-fit:cover;width:100%;height:100%" class="m_9e117634 mantine-Image-root" src="/images/blog/todiagram-agent-skills-banner.webp" alt="Introducing ToDiagram Skills for Coding Agents" loading="lazy"/></div><div class="Reads_body__3ezq9"><h3>Introducing ToDiagram Skills for Coding Agents</h3><p>ToDiagram Skills is a public repository of installable agent skills. The first published `diagram` skill helps coding agents create clearer diagrams for architecture, flows, and AI-generated diffs.</p></div></a></div></div></section><section class="FAQSection_faq__nYYsw" id="faq">
27<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What is ToDiagram?","acceptedAnswer":{"@type":"Answer","text":"ToDiagram is an intuitive data editor that transforms JSON, CSV, YAML, and other structured data formats into interactive, easy-to-navigate diagrams. It helps users work with complex datasets visually, making it easier to understand, modify, and explore data relationships.\n\nInstead of getting stuck in raw code, you can quickly transform your data into diagrams and focus on understanding the information."}},{"@type":"Question","name":"Is my data secure?","acceptedAnswer":{"@type":"Answer","text":"Yes. ToDiagram processes diagrams locally in your browser by default. If you explicitly choose server processing from the editor prompt for large diagrams, data is used only to compute layout and is not stored. Documents are stored only when you explicitly save them."}},{"@type":"Question","name":"What data formats does ToDiagram support?","acceptedA
27nswer":{"@type":"Answer","text":"ToDiagram currently supports JSON, CSV, YAML, and XML data formats."}},{"@type":"Question","name":"What data size does ToDiagram support?","acceptedAnswer":{"@type":"Answer","text":"ToDiagram can handle datasets of any size. It splits large datasets into chunks to ensure smooth performance."}},{"@type":"Question","name":"How do I save my diagrams?","acceptedAnswer":{"@type":"Answer","text":"You can save your diagrams by creating an account and logging in. Your diagrams will be saved in your account and can be accessed from any device."}},{"@type":"Question","name":"Can I download ToDiagram to my computer?","acceptedAnswer":{"@type":"Answer","text":"Yes, you can download the app from the Editor > Download App menu. This will download the Progressive Web App (PWA) version of ToDiagram to your computer, online access is still required."}},{"@type":"Question","name":"It doesn't support my data size. Can I get a refund?","acceptedAnswer":{"@type":"Answer","text":"We're sorry to hear that you're experiencing issues with your data size. Please contact us at [email protected] and we'll do our best to help you."}},{"@type":"Question","name":"What features are on the product roadmap?","acceptedA
27nswer":{"@type":"Answer","text":"If you have any suggestions, we'd love to hear! Please send us an email at [email protected]"}}]}</script>
27<div style="--container-size:var(--container-size-xl)" class="m_7485cace mantine-Container-root" data-size="xl" data-strategy="block"><div class="FAQSection_card__6OIUb"><div class="FAQSection_head__dFkX9"><h2>Frequently asked questions</h2><p>Answers about pricing, formats, data handling, and the editor.</p></div><div style="--accordion-chevron-size:auto" class="FAQSection_list__wKgoU m_9bdbb667 mantine-Accordion-root" data-variant="separated" id="mantine-_R_5dlrdlav5uvb_" data-accordion="true"><div class="m_9f59b069 FAQSection_item__nCb0q m_9bd7b098 mantine-Accordion-item"><button class="mantine-focus-auto FAQSection_control__OvHYD m_4ba585b8 mantine-Accordion-control m_87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-chevron-position="right" type="button" aria-expanded="false" aria-controls="mantine-_R_5dlrdlav5uvb_-panel-What is ToDiagram?" id="mantine-_R_5dlrdlav5uvb_-control-What is ToDiagram?"><span class="m_3f35ae96 mantine-Accordion-chevron" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="m_df3ffa0f mantine-Accordion-label">What is ToDiagram?</span></button><div style="box-sizing:border-box;opacity:0;transition:opacity 200ms ease;white-space:pre-wrap;height:0;overflow:hidden;display:none" class="FAQSection_panel__aePid m_df78851f mantine-Accordion-panel" aria-hidden="true" role="region" id="mantine-_R_5dlrdlav5uvb_-panel-What is ToDiagram?" aria-labelledby="mantine-_R_5dlrdlav5uvb_-control-What is ToDiagram?" inert=""><div class="m_4ba554d4 mantine-Accordion-content">ToDiagram is an intuitive data editor that transforms JSON, CSV, YAML, and other structured data formats into interactive, easy-to-navigate diagrams. It helps users work with complex datasets visually, making it easier to understand, modify, and explore data relationships. 28 29Instead of getting stuck in raw code, you can quickly transform your data into diagrams and focus on understanding the information.</div></div></div><div class="m_9f59b069 FAQSection_item__nCb0q m_9bd7b098 mantine-Accordion-item"><button class="mantine-focus-auto FAQSection_control__OvHYD m_4ba585b8 mantine-Accordion-control m_87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-chevron-position="right" type="button" aria-expanded="false" aria-controls="mantine-_R_5dlrdlav5uvb_-panel-Is my data secure?" id="mantine-_R_5dlrdlav5uvb_-control-Is my data secure?"><span class="m_3f35ae96 mantine-Accordion-chevron" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="m_df3ffa0f mantine-Accordion-label">Is my data secure?</span></button><div style="box-sizing:border-box;opacity:0;transition:opacity 200ms ease;white-space:pre-wrap;height:0;overflow:hidden;display:none" class="FAQSection_panel__aePid m_df78851f mantine-Accordion-panel" aria-hidden="true" role="region" id="mantine-_R_5dlrdlav5uvb_-panel-Is my data secure?" aria-labelledby="mantine-_R_5dlrdlav5uvb_-control-Is my data secure?" inert=""><div class="m_4ba554d4 mantine-Accordion-content">Yes. ToDiagram processes diagrams locally in your browser by default. If you explicitly choose server processing from the editor prompt for large diagrams, data is used only to compute layout and is not stored. Documents are stored only when you explicitly save them.</div></div></div><div class="m_9f59b069 FAQSection_item__nCb0q m_9bd7b098 mantine-Accordion-item"><button class="mantine-focus-auto FAQSection_control__OvHYD m_4ba585b8 mantine-Accordion-control m_87cf2631 mantine-UnstyledButton-root" data-accordion-control
29="true" data-chevron-position="right" type="button" aria-expanded="false" aria-controls="mantine-_R_5dlrdlav5uvb_-panel-What data formats does ToDiagram support?" id="mantine-_R_5dlrdlav5uvb_-control-What data formats does ToDiagram support?"><span class="m_3f35ae96 mantine-Accordion-chevron" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="m_df3ffa0f mantine-Accordion-label">What data formats does ToDiagram support?</span></button><div style="box-sizing:border-box;opacity:0;transition:opacity 200ms ease;white-space:pre-wrap;height:0;overflow:hidden;display:none" class="FAQSection_panel__aePid m_df78851f mantine-Accordion-panel" aria-hidden="true" role="region" id="mantine-_R_5dlrdlav5uvb_-panel-What data formats does ToDiagram support?" aria-labelledby="mantine-_R_5dlrdlav5uvb_-control-What data formats does ToDiagram support?" inert=""><div class="m_4ba554d4 mantine-Accordion-content">ToDiagram currently supports JSON, CSV, YAML, and XML data formats.</div></div></div><div class="m_9f59b069 FAQSection_item__nCb0q m_9bd7b098 mantine-Accordion-item"><button class="mantine-focus-auto FAQSection_control__OvHYD m_4ba585b8 mantine-Accordion-control m_87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-chevron-position="right" type="button" aria-expanded="false" aria-controls="mantine-_R_5dlrdlav5uvb_-panel-What data size does ToDiagram support?" id="mantine-_R_5dlrdlav5uvb_-control-What data size does ToDiagram support?"><span class="m_3f35ae96 mantine-Accordion-chevron" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="m_df3ffa0f mantine-Accordion-label">What data size does ToDiagram support?</span></button><div style="box-sizing:border-box;opacity:0;transition:opacity 200ms ease;white-space:pre-wrap;height:0;overflow:hidden;display:none" class="FAQSection_panel__aePid m_df78851f mantine-Accordion-panel" aria-hidden="true" role="region" id="mantine-_R_5dlrdlav5uvb_-panel-What data size does ToDiagram support?" aria-labelledby="mantine-_R_5dlrdlav5uvb_-control-What data size does ToDiagram support?" inert=""><div class="m_4ba554d4 mantine-Accordion-content">ToDiagram can handle datasets of any size. It splits large datasets into chunks to ensure smooth performance.</div></div></div><div class="m_9f59b069 FAQSection_item__nCb0q m_9bd7b098 mantine-Accordion-item"><button class="mantine-focus-auto FAQSection_control__OvHYD m_4ba585b8 mantine-Accordion-control m_87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-chevron-position="right" type="button" aria-expanded="false" aria-controls="mantine-_R_5dlrdlav5uvb_-panel-How do I save my diagrams?" id="mantine-_R_5dlrdlav5uvb_-control-How do I save my diagrams?"><span class="m_3f35ae96 mantine-Accordion-chevron" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.564
2964L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="m_df3ffa0f mantine-Accordion-label">How do I save my diagrams?</span></button><div style="box-sizing:border-box;opacity:0;transition:opacity 200ms ease;white-space:pre-wrap;height:0;overflow:hidden;display:none" class="FAQSection_panel__aePid m_df78851f mantine-Accordion-panel" aria-hidden="true" role="region" id="mantine-_R_5dlrdlav5uvb_-panel-How do I save my diagrams?" aria-labelledby="mantine-_R_5dlrdlav5uvb_-control-How do I save my diagrams?" inert=""><div class="m_4ba554d4 mantine-Accordion-content">You can save your diagrams by creating an account and logging in. Your diagrams will be saved in your account and can be accessed from any device.</div></div></div><div class="m_9f59b069 FAQSection_item__nCb0q m_9bd7b098 mantine-Accordion-item"><button class="mantine-focus-auto FAQSection_control__OvHYD m_4ba585b8 mantine-Accordion-control m_87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-chevron-position="right" type="button" aria-expanded="false" aria-controls="mantine-_R_5dlrdlav5uvb_-panel-Can I download ToDiagram to my computer?" id="mantine-_R_5dlrdlav5uvb_-control-Can I download ToDiagram to my computer?"><span class="m_3f35ae96 mantine-Accordion-chevron" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="m_df3ffa0f mantine-Accordion-label">Can I download ToDiagram to my computer?</span></button><div style="box-sizing:border-box;opacity:0;transition:opacity 200ms ease;white-space:pre-wrap;height:0;overflow:hidden;display:none" class="FAQSection_panel__aePid m_df78851f mantine-Accordion-panel" aria-hidden="true" role="region" id="mantine-_R_5dlrdlav5uvb_-panel-Can I download ToDiagram to my computer?" aria-labelledby="mantine-_R_5dlrdlav5uvb_-control-Can I download ToDiagram to my computer?" inert=""><div class="m_4ba554d4 mantine-Accordion-content">Yes, you can download the app from the Editor > Download App menu. This will download the Progressive Web App (PWA) version of ToDiagram to your computer, online access is still required.</div></div></div><div class="m_9f59b069 FAQSection_item__nCb0q m_9bd7b098 mantine-Accordion-item"><button class="mantine-focus-auto FAQSection_control__OvHYD m_4ba585b8 mantine-Accordion-control m_87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-chevron-position="right" type="button" aria-expanded="false" aria-controls="mantine-_R_5dlrdlav5uvb_-panel-It doesn't support my data size. Can I get a refund?" id="mantine-_R_5dlrdlav5uvb_-control-It doesn't support my data size. Can I get a refund?"><span class="m_3f35ae96 mantine-Accordion-chevron" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="m_df3ffa0f mantine-Accordion-label">It doesn't support my data size. Can I get a refund?</span></button><div style="box-sizing:border-box;opacity:0;transition:opacity 200ms ease;white-space:pre-wrap;height:0;overflow:hidden;display:none" class="FAQSection_panel__aePid m_df78851f mantine-Accordion-panel" aria-hidden="true" role="region" id="mantine-_R_5dlrdlav5uvb_-panel-It doesn't support my data size. Can I get a refund?" aria-labelledby="mantine-_R_5dlrdlav5uvb_-control-It doesn't support my data size. Can I get a refund?" inert=""><div class="m_4ba554d4 mantine-Accordion-content">We're sorry to hear that you're experiencing issues with your data size. Please contact us at <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ceada1a0baafadba8ebaa1aaa7afa9bcafa3e0ada1a3">[email protected]</a> and we'll do our best to help you.</div></div></div><div class="m_9f59b069 FAQSection_item__nCb0q m_9bd7b098 mantine-Accordion-item"><button class="mantine-focus-auto FAQSection_control__OvHYD m_4ba585b8 mantine-Accordion-control m_87cf2631 mantine-UnstyledButton-root" data-accordion-control
29="true" data-chevron-position="right" type="button" aria-expanded="false" aria-controls="mantine-_R_5dlrdlav5uvb_-panel-What features are on the product roadmap?" id="mantine-_R_5dlrdlav5uvb_-control-What features are on the product roadmap?"><span class="m_3f35ae96 mantine-Accordion-chevron" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="m_df3ffa0f mantine-Accordion-label">What features are on the product roadmap?</span></button><div style="box-sizing:border-box;opacity:0;transition:opacity 200ms ease;white-space:pre-wrap;height:0;overflow:hidden;display:none" class="FAQSection_panel__aePid m_df78851f mantine-Accordion-panel" aria-hidden="true" role="region" id="mantine-_R_5dlrdlav5uvb_-panel-What features are on the product roadmap?" aria-labelledby="mantine-_R_5dlrdlav5uvb_-control-What features are on the product roadmap?" inert=""><div class="m_4ba554d4 mantine-Accordion-content">If you have any suggestions, we'd love to hear! Please send us an email at <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdaea2a3b9acaeb98db9a2a9a4acaabfaca0e3aea2a0">[email protected]</a></div></div></div></div><div class="FAQSection_footnote__q_cdg">More questions?<!-- --> <a class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-inherit="true" data-underline="hover" href="/cdn-cgi/l/email-protection#0a6965647e6b697e4a7e656e636b6d786b6724696567">Send us a message</a>.</div></div></div></section></div></main><div style="background:linear-gradient(180deg, #282828 0%, #1d1d1d 100%);border-top-right-radius:1.5em;border-top-left-radius:1.5em" class="m_7485cace mantine-Container-root" data-fluid="true" data-strategy="block"><div style="--container-size:var(--container-size-xl);padding-block:calc(5rem * var(--mantine-scale))" class="m_7485cace mantine-Container-root" data-size="xl" data-strategy="block"><div style="--stack-gap:var(--mantine-spacing-xl);--stack-align:center;--stack-justify:center;background:rgba(133, 133, 133, 0.1);background-image:linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);border-radius:1em;border:2px hsla(0,0%,100%,.102);box-shadow:0 0 #0000,0 0 #0000,inset -1px -1px #98989855,inset 1px 1px #98989855;padding-inline:var(--mantine-spacing-lg);padding-block:calc(5rem * var(--mantine-scale));position:relative" class="m_6d731127 mantine-Stack-root"><style data-mantine-styles="inline">.__m__-_R_3dltav5uvb_{font-size:calc(1.75rem * var(--mantine-scale));}@media(min-width: 36em){.__m__-_R_3dltav5uvb_{font-size:calc(2.25rem * var(--mantine-scale));}}@media(min-width: 48em){.__m__-_R_3dltav5uvb_{font-size:calc(2.625rem * var(--mantine-scale));}}</style><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size);text-align:center" class="m_8a5d1357 mantine-Title-root __m__-_R_3dltav5uvb_" data-order="2"><span style="color:var(--mantine-color-gray-3);font-weight:800" class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-inherit="true">Get started with<!-- --> </span><span style="--text-gradient:linear-gradient(45deg, #FF75B7 0%, #FED761 100%);font-family:'Mulish', 'Mulish Fallback';font-weight:800" class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-variant="gradient" data-inherit="true">ToDiagram</span></h2><style data-mantine-styles="inline">.__m__-_R_5dltav5uvb_{font-size:var(--mantine-font-size-sm);}@media(min-width: 36em){.__m__-_R_5dltav5uvb_{font-size:var(--mantine-font-size-xl);}}</style><p style="color:var(--mantine-color-gray-5);font-weight:300;text-align:center;max-width:calc(37.5rem * var(--mantine-scale))" class="mantine-focus-auto m_b6d8b162 mantine-Text-root __m__-_R_5dltav5uvb_">Experience the power of visualizing your data with ToDiagram. Start creating stunning diagrams today.</p><a style="--button-height:var(--button-height-xl);--button-padding-x:var(--button-padding-x-xl);--button-fz:var(--mantine-font-size-xl);--button-radius:var(--mantine-radius-lg);--button-bg:linear-gradient(45deg, #FF75B7 0%, #FED761 100%);--button-hover:linear-gradient(45deg, #FF75B7 0%, #FED761 100%);--button-color:var(--mantine-color-white);--button-bd:none;box-shadow:rgba(0, 0, 0, 0.12) 0px -3px 0px 0px inset;border:none;margin-bottom:var(--mantine-spacing-md);color:var(--mantine-color-black);font-weight:500;
29width:fit-content" class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-variant="gradient" data-size="xl" data-with-left-section="true" href="/editor"><span class="m_80f1301b mantine-Button-inner"><span class="m_a74036a mantine-Button-section" data-position="left"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 384 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"></path></svg></span><span class="m_811560b9 mantine-Button-label">Start diagramming</span></span></a></div></div></div><div style="border-top:1px solid #ffffff1a;background:#1D1D1D" class="m_7485cace mantine-Container-root" data-fluid="true" data-strategy="block"><div style="--container-size:var(--container-size-xl);padding-block:calc(5rem * var(--mantine-scale))" class="m_7485cace mantine-Container-root" data-size="xl" data-strategy="block"><style data-mantine-styles="inline">.__m__-_R_dmtav5uvb_{flex-direction:column;}@media(min-width: 36em){.__m__-_R_dmtav5uvb_{flex-direction:row;}}</style><div style="gap:var(--mantine-spacing-xl);justify-content:space-between" class="m_8bffd616 mantine-Flex-root __m__-_R_dmtav5uvb_"><div style="--stack-gap:calc(0.25rem * var(--mantine-scale));--stack-align:stretch;--stack-justify:flex-start" class="m_6d731127 mantine-Stack-root"><a class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/" aria-label="ToDiagram"><img style="--image-object-fit:contain;width:auto;height:calc(2.25rem * var(--mantine-scale))" class="Logo_dark__bEf5x m_9e117634 mantine-Image-root" alt="ToDiagram Logo" loading="eager" fetchPriority="high"/></a><a style="color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/cdn-cgi/l/email-protection#13707c7d6772706753677c777a727461727e3d707c7e"><span class="__cf_email__" data-cfemail="ea8985849e8b899eaa9e858e838b8d988b87c4898587">[email protected]</span></a><div style="gap:var(--mantine-spacing-xs);margin-top:var(--mantine-spacing-md)" class="m_8bffd616 mantine-Flex-root __m__-_R_7bddmtav5uvb_"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" aria-label="LinkedIn" href="https://www.linkedin.com/company/todiagram" target="_blank" rel="noopener"><div style="--ti-bg:transparent;--ti-color:var(--mantine-color-gray-6);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" color="gray.6"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path></svg></div></a><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" aria-label="X" href="https://x.com/todiagram" target="_blank" rel="noopener"><div style="--ti-bg:transparent;--ti-color:var(--mantine-color-gray-6);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" color="gray.6"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path></svg></div></a><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" aria-label="GitHub" href="https://github.com/AykutSarac/jsoncrack.com" target="_blank" rel="noopener"><div style="--ti-bg:transparent;--ti-color:var(--mantine-color-gray-6);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" color="gray.6"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></div></a></div></div><style data-mantine-styles="inline">
29.__m__-_R_5ddmtav5uvb_{--sg-spacing-x:calc(3.75rem * var(--mantine-scale));--sg-spacing-y:calc(3.75rem * var(--mantine-scale));--sg-cols:2;}@media(min-width: 48em){.__m__-_R_5ddmtav5uvb_{--sg-cols:4;}}</style><div class="m_2415a157 mantine-SimpleGrid-root __m__-_R_5ddmtav5uvb_"><div style="--stack-gap:var(--mantine-spacing-xs);--stack-align:stretch;--stack-justify:flex-start" class="m_6d731127 mantine-Stack-root"><p style="color:var(--mantine-color-gray-4);font-size:var(--mantine-font-size-sm);font-weight:600" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Product</p><a style="color:var(--mantine-color-gray-6);font-size:var(--mantine-font-size-sm);font-weight:400" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/features">Features</a><a style="color:var(--mantine-color-gray-6);font-size:var(--mantine-font-size-sm);font-weight:400" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/pricing">Pricing</a><a style="color:var(--mantine-color-gray-6);font-size:var(--mantine-font-size-sm);font-weight:400" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/teams">Teams</a><a style="color:var(--mantine-color-gray-6);font-size:var(--mantine-font-size-sm);font-weight:400" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/chrome-extension">Chrome Extension</a><a style="color:var(--mantine-color-gray-6);font-size:var(--mantine-font-size-sm);font-weight:400" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/ai-diagram-generator">AI Diagram Generator</a><a style="color:var(--mantine-color-gray-6);font-size:var(--mantine-font-size-sm);font-weight:400" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/mcp">MCP Server</a></div><div style="--stack-gap:var(--mantine-spacing-xs);--stack-align:stretch;--stack-justify:flex-start" class="m_6d731127 mantine-Stack-root"><p style="color:var(--mantine-color-gray-4);font-size:var(--mantine-font-size-sm);font-weight:600" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Data Formats</p><a style="color:var(--mantine-color-gray-6);font-size:var(--mantine-font-size-sm);font-weight:400" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/json-editor-visualization">JSON Visualization</a><a style="color:var(--mantine-color-gray-6);font-size:var(--mantine-font-size-sm);font-weight:400" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/xml-editor-visualization">XML Visualization</a><a style="color:var(--mantine-color-gray-6);font-size:var(--mantine-font-size-sm);font-weight:400" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/csv-editor-visualization">CSV Visualization</a><a style="color:var(--mantine-color-gray-6);font-size:var(--mantine-font-size-sm);font-weight:400" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/yaml-editor-visualization">YAML Visualization</a><a style="color:var(--mantine-color-gray-6);font-size:var(--mantine-font-size-sm);font-weight:400" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/mermaid-editor-visualization">Mermaid Editor</a><a style="color:var(--mantine-color-gray-6);font-size:var(--mantine-font-size-sm);font-weight:400" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/custom-diagrams">Custom Diagrams</a></div><div style="--stack-gap:var(--mantine-spacing-xs);--stack-align:stretch;--stack-justify:flex-start" class="m_6d731127 mantine-Stack-root"><p style="color:var(--mantine-color-gray-4);font-size:var(--mantine-font-size-sm);font-weight:600" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Use Cases</p><a style="color:var(--mantine-color-gray-6);font-size:var(--mantine-font-size-sm);font-weight:400" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/use-cases/api-design-and-documentation">API Documentation</a><a style="color:var(--mantine-color-gray-6);font-size:var(--mantine-font-size-sm);font-weight:400" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/use-cases/json-schema-validation">JSON Schema</a><a style="color:var(--mantine-color-gray-6);font-size:var(--mantine-font-size-sm);font-weight:400" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/use-cases/net
29work-diagrams">Network Diagrams</a><a style="color:var(--mantine-color-gray-6);font-size:var(--mantine-font-size-sm);font-weight:400" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/use-cases/cicd-diagrams">CI/CD Diagrams</a><a style="color:var(--mantine-color-gray-6);font-size:var(--mantine-font-size-sm);font-weight:400" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/use-cases/design-systems-and-tokens">Design Systems & Tokens</a><a style="color:var(--mantine-color-gray-6);font-size:var(--mantine-font-size-sm);font-weight:400" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/use-cases/jsonld-schema-visualization">JSONâLD Visualization</a></div><div style="--stack-gap:var(--mantine-spacing-xs);--stack-align:stretch;--stack-justify:flex-start" class="m_6d731127 mantine-Stack-root"><p style="color:var(--mantine-color-gray-4);font-size:var(--mantine-font-size-sm);font-weight:600" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Resources</p><a style="color:var(--mantine-color-gray-6);font-size:var(--mantine-font-size-sm);font-weight:400" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/blog">Blog</a><a style="color:var(--mantine-color-gray-6);font-size:var(--mantine-font-size-sm);font-weight:400" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/brand-assets">Brand Assets</a><a style="color:var(--mantine-color-gray-6);font-size:var(--mantine-font-size-sm);font-weight:400" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/education">Education</a></div></div></div><div style="gap:var(--mantine-spacing-xl);flex-wrap:wrap;margin-top:var(--mantine-spacing-xl)" class="m_8bffd616 mantine-Flex-root __m__-_R_lmtav5uvb_"><p style="color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">© <!-- -->2026<!-- --> todiagram.com</p><a style="color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/legal/terms"><p style="color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Terms</p></a><a style="color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/legal/privacy"><p style="color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Privacy</p></a></div></div></div></div><!--$--><!--/$-->
vendor: 108 bytes, line 29
29<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
29<script src="/_next/static/chunks/webpack-399c41eda7715a19.js" integrity="sha384-JOmBcWvzz2qkKknsQJIakbEPw3L5vD/e1uZeLeLtuNgSY63DjbOTX0zz2EnrxBGZ" id="_R_" async=""></script>
29<script>(self.__next_f=self.__next_f||[]).push([0])</script>
29<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[44756,[\"9587\",\"static/chunks/b17a74fd-7f3e2fb9ff9cec1b.js\",\"622\",\"static/chunks/622-4a598d9d2ab30471.js\",\"7968\",\"static/chunks/7968-a7ab5578058b1f61.js\",\"4138\",\"static/chunks/4138-70c604058c73b9a5.js\",\"2135\",\"static/chunks/2135-93df2aa8a1f8f9a0.js\",\"2889\",\"static/chunks/2889-c045f5f7b143a166.js\",\"3292\",\"static/chunks/3292-816967c124065bbd.js\",\"7177\",\"static/chunks/app/layout-a0ca639e72f144a8.js\"],\"GoogleTagManager\"]\n3:I[79767,[\"9587\",\"static/chunks/b17a74fd-7f3e2fb9ff9cec1b.js\",\"622\",\"static/chunks/622-4a598d9d2ab30471.js\",\"7968\",\"static/chunks/7968-a7ab5578058b1f61.js\",\"4138\",\"static/chunks/4138-70c604058c73b9a5.js\",\"2135\",\"static/chunks/2135-93df2aa8a1f8f9a0.js\",\"2889\",\"static/chunks/2889-c045f5f7b143a166.js\",\"3292\",\"static/chunks/3292-816967c124065bbd.js\",\"7177\",\"static/chunks/app/layout-a0ca639e72f144a8.js\"],\"ColorSchemeScript\"]\n4:I[83292,[\"9587\",\"static/chunks/b17a74fd-7f3e2fb9ff9cec1b.js\",\"622\",\"static/chunks/622-4a598d9d2ab30471.js\",\"7968\",\"static/chunks/7968-a7ab5578058b1f61.js\",\"4138\",\"static/chunks/4138-70c604058c73b9a5.js\",\"2135\",\"static/chunks/2135-93df2aa8a1f8f9a0.js\",\"2889\",\"static/chunks/2889-c045f5f7b143a166.js\",\"3292\",\"static/chunks/3292-816967c124065bbd.js\",\"7177\",\"static/chunks/app/layout-a0ca639e72f144a8.js\"],\"default\"]\n5:I[90342,[],\"\"]\n6:I[14860,[],\"\"]\n8:I[26863,[],\"OutletBoundary\"]\nc:I[93534,[],\"default\",1]\n:HL[\"/_next/static/media/2b5b02fc7e511755-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/4c285fdca692ea22-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/8888a3826f4a3af4-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/eafabf029ad39a43-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/ecbc86809d14aaa8.css\",\"style\"]\n:HL[\"/_next/static/css/84877ca4ed19fcfa.css\",\"style\"]\n:HL[\"/_next/static/css/3c55bf0507af87d0.css\",\"style\"]\n:HL[\"/_next/static/css/e35dfb38818993df.css\",\"style\"]\n:HL[\"/_next/static/media/3be83a346553616c-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/9cc5b37ab1350db7-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/e6099e249fd938cc-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/88cd30ad2762b4a1.css\",\"style\"]\n:HL[\"/_next/static/css/c917923398ae41e3.css\",\"style\"]\n:HL[\"/_next/static/css/92ecffe9e9ed1205.css\",\"style\"]\n:HL[\"/_next/static/css/40f0473b08fe8b66.css\",\"style\"]\n:HL[\"/_next/static/css/4c3a2fb30b8f69fd.css\",\"style\"]\n:HL[\"/_next/static/css/7c0113c339b74fed.css\",\"style\"]\na:X\n0:{\"P\":null,\"c\":[\"\",\"\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"(landing)\",{\"children\":[\"__PAGE__\",{},\"$undefined\",\"$undefined\",4608]},\"$undefined\",\"$undefined\",4608]},\"$undefined\",\"$undefined\",4624],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/ecbc86809d14aaa8.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/84877ca4ed19fcfa.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/3c55bf0507af87d0.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/e35dfb38818993df.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"suppressHydrationWarning\":true,\"data-mantine-color-scheme\":\"light\",\"children\":[[\"$\",\"$L2\",null,{\"gtmId\":\"GTM-K7STZ35W\"}],[\"$\",\"head\",null,{\"children\":[[\"$\",\"$L3\",null,{\"defaultColorScheme\":\"light\"}],[\"$\",\"meta\",null,{\"name\":\"theme-color\",\"media\":\"(prefers-color-scheme: dark)\",\"content\":\"#1C1C1E\"}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"SoftwareApplication\\\",\\\"name\\\":\\\"ToDiagram\\\",\\\"applicationCategory\\\":\\\"BrowserApplication\\\",\\\"o
29peratingSystem\\\":\\\"Browser\\\",\\\"keywords\\\":\\\"diagram, data editor, json viewer, data visualization, seo tools\\\",\\\"offers\\\":{\\\"@type\\\":\\\"Offer\\\",\\\"price\\\":\\\"10\\\",\\\"priceCurrency\\\":\\\"USD\\\"}}\"}}]]}],[\"$\",\"body\",null,{\"children\":[\"$\",\"$L4\",null,{\"children\":[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:0:props:children:1:props:children:2:props:children:props:children:props:notFound:0:1:props:style\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":\"$0:f:0:1:0:props:children:1:props:children:2:props:children:props:children:props:notFound:0:1:props:children:props:children:1:props:style\",\"children\":404}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:0:props:children:1:props:children:2:props:children:props:children:props:notFound:0:1:props:children:props:children:2:props:style\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$0:f:0:1:0:props:children:1:props:children:2:props:children:props:children:props:notFound:0:1:props:children:props:children:2:props:children:props:style\",\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$L7\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/88cd30ad2762b4a1.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/c917923398ae41e3.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/92ecffe9e9ed1205.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/40f0473b08fe8b66.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"4\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/4c3a2fb30b8f69fd.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"5\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/7c0113c339b74fed.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"$L8\",null,{\"children\":\"$L9\"}]]}],{}
29,null,false,null]},null,false,\"$a\"]},null,false,null],\"$Lb\",false]],\"m\":\"$undefined\",\"G\":[\"$c\",[]],\"S\":true,\"h\":null,\"r\":\"$undefined\",\"s\":\"$undefined\",\"a\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"Ck14Rra_U2B4B3CMLBPQ3\"}\nd:\"$Sreact.suspense\"\nf:I[26863,[],\"ViewportBoundary\"]\n11:I[26863,[],\"MetadataBoundary\"]\n9:[\"$\",\"$d\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@e\"}]\nb:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$Lf\",null,{\"children\":\"$L10\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L11\",null,{\"children\":[\"$\",\"$d\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L12\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\na:C\n10:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n13:I[81006,[],\"IconMark\"]\ne:null\n12:[[\"$\",\"title\",\"0\",{\"children\":\"Turn your data into diagrams you can read | ToDiagram\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"ToDiagram turns JSON, YAML, XML, CSV and Mermaid into interactive diagrams. Visualize payloads, schemas, and flows â or build custom node/edge diagrams from scratch.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"manifest\",\"href\":\"/manifest.webmanifest\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"canonical\",\"href\":\"https://todiagram.com\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:title\",\"content\":\"Turn your data into diagrams you can read\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:description\",\"content\":\"ToDiagram turns JSON, YAML, XML, CSV and Mermaid into interactive diagrams. Visualize payloads, schemas, and flows â or build custom node/edge diagrams from scratch.\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:url\",\"content\":\"https://todiagram.com\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:image\",\"content\":\"https://todiagram.com/images/meta/og-image.png\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:image:alt\",\"content\":\"ToDiagram turns JSON, YAML, XML, CSV and Mermaid into interactive diagrams. Visualize payloads, schemas, and flows â or build custom node/edge diagrams from scratch.\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:site\",\"content\":\"@todiagram\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:creator\",\"content\":\"@todiagram\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:title\",\"content\":\"Turn your data into diagrams you can read\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:description\",\"content\":\"ToDiagram turns JSON, YAML, XML, CSV and Mermaid into interactive diagrams. Visualize payloads, schemas, and flows â or build custom node/edge diagrams from scratch.\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:image\",\"content\":\"https://todiagram.com/images/meta/og-image.png\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:image:alt\",\"content\":\"ToDiagram turns JSON, YAML, XML, CSV and Mermaid into interactive diagrams. Visualize payloads, schemas, and flows â or build custom node/edge diagrams from scratch.\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:image:height\",\"content\":\"630\"}],[\"$\",\"link\",\"20\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?dfe7af6b0fb1ccf9\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}],[\"$\",\"$L13\",\"21\",{}]]\n"])</script>
29<script>self.__next_f.push([1,"14:I[8806,[\"494\",\"static/chunks/d02c7a31-e322443e20c627bf.js\",\"8767\",\"static/chunks/0561d147-3ec64437cf805414.js\",\"7251\",\"static/chunks/5a050a8f-cd8623a27597e2e1.js\",\"622\",\"static/chunks/622-4a598d9d2ab30471.js\",\"2054\",\"static/chunks/2054-eb0a1ea943438724.js\",\"7319\",\"static/chunks/7319-475076051c5d1085.js\",\"6011\",\"static/chunks/6011-00df3e0291da7b2a.js\",\"2024\",\"static/chunks/2024-219f8229477e3c4d.js\",\"6443\",\"static/chunks/6443-87ee0feb216f6e9b.js\",\"5451\",\"static/chunks/5451-7f0f3b80298deea0.js\",\"5800\",\"static/chunks/5800-176be018c6af6fcf.js\",\"814\",\"static/chunks/814-0429cee7303b5036.js\",\"5859\",\"static/chunks/app/(landing)/page-3c69e9398f12306d.js\"],\"Box\"]\n15:I[60958,[\"494\",\"static/chunks/d02c7a31-e322443e20c627bf.js\",\"8767\",\"static/chunks/0561d147-3ec64437cf805414.js\",\"7251\",\"static/chunks/5a050a8f-cd8623a27597e2e1.js\",\"622\",\"static/chunks/622-4a598d9d2ab30471.js\",\"2054\",\"static/chunks/2054-eb0a1ea943438724.js\",\"7319\",\"static/chunks/7319-475076051c5d1085.js\",\"6011\",\"static/chunks/6011-00df3e0291da7b2a.js\",\"2024\",\"static/chunks/2024-219f8229477e3c4d.js\",\"6443\",\"static/chunks/6443-87ee0feb216f6e9b.js\",\"5451\",\"static/chunks/5451-7f0f3b80298deea0.js\",\"5800\",\"static/chunks/5800-176be018c6af6fcf.js\",\"814\",\"static/chunks/814-0429cee7303b5036.js\",\"5859\",\"static/chunks/app/(landing)/page-3c69e9398f12306d.js\"],\"Navbar\"]\n16:I[87823,[\"494\",\"static/chunks/d02c7a31-e322443e20c627bf.js\",\"8767\",\"static/chunks/0561d147-3ec64437cf805414.js\",\"7251\",\"static/chunks/5a050a8f-cd8623a27597e2e1.js\",\"622\",\"static/chunks/622-4a598d9d2ab30471.js\",\"2054\",\"static/chunks/2054-eb0a1ea943438724.js\",\"7319\",\"static/chunks/7319-475076051c5d1085.js\",\"6011\",\"static/chunks/6011-00df3e0291da7b2a.js\",\"2024\",\"static/chunks/2024-219f8229477e3c4d.js\",\"6443\",\"static/chunks/6443-87ee0feb216f6e9b.js\",\"5451\",\"static/chunks/5451-7f0f3b80298deea0.js\",\"5800\",\"static/chunks/5800-176be018c6af6fcf.js\",\"814\",\"static/chunks/814-0429cee7303b5036.js\",\"5859\",\"static/chunks/app/(landing)/page-3c69e9398f12306d.js\"],\"Hero\"]\n17:I[45364,[\"494\",\"static/chunks/d02c7a31-e322443e20c627bf.js\",\"8767\",\"static/chunks/0561d147-3ec64437cf805414.js\",\"7251\",\"static/chunks/5a050a8f-cd8623a27597e2e1.js\",\"622\",\"static/chunks/622-4a598d9d2ab30471.js\",\"2054\",\"static/chunks/2054-eb0a1ea943438724.js\",\"7319\",\"static/chunks/7319-475076051c5d1085.js\",\"6011\",\"static/chunks/6011-00df3e0291da7b2a.js\",\"2024\",\"static/chunks/2024-219f8229477e3c4d.js\",\"6443\",\"static/chunks/6443-87ee0feb216f6e9b.js\",\"5451\",\"static/chunks/5451-7f0f3b80298deea0.js\",\"5800\",\"static/chunks/5800-176be018c6af6fcf.js\",\"814\",\"static/chunks/814-0429cee7303b5036.js\",\"5859\",\"static/chunks/app/(landing)/page-3c69e9398f12306d.js\"],\"Container\"]\n18:I[39468,[\"494\",\"static/chunks/d02c7a31-e322443e20c627bf.js\",\"8767\",\"static/chunks/0561d147-3ec64437cf805414.js\",\"7251\",\"static/chunks/5a050a8f-cd8623a27597e2e1.js\",\"622\",\"static/chunks/622-4a598d9d2ab30471.js\",\"2054\",\"static/chunks/2054-eb0a1ea943438724.js\",\"7319\",\"static/chunks/7319-475076051c5d1085.js\",\"6011\",\"static/chunks/6011-00df3e0291da7b2a.js\",\"2024\",\"static/chunks/2024-219f8229477e3c4d.js\",\"6443\",\"static/chunks/6443-87ee0feb216f6e9b.js\",\"5451\",\"static/chunks/5451-7f0f3b80298deea0.js\",\"5800\",\"static/chunks/5800-176be018c6af6fcf.js\",\"814\",\"static/chunks/814-0429cee7303b5036.js\",\"5859\",\"static/chunks/app/(landing)/page-3c69e9398f12306d.js\"],\"TransformShowcase\"]\n19:I[11078,[\"494\",\"static/chunks/d02c7a31-e322443e20c627bf.js\",\"8767\",\"static/chunks/0561d147-3ec64437cf805414.js\",\"7251\",\"static/chunks/5a050a8f-cd8623a27597e2e1.js\",\"622\",\"static/chunks/622-4a598d9d2ab30471.js\",\"2054\",\"static/chunks/2054-eb0a1ea943438724.js\",\"7319\",\"static/chunks/7319-475076051c5d1085.js\",\"6011\",\"static/chunks/6011-00df3e0291da7b2a.js\",\"2024\",\"static/chunks/2024-219f8229477e3c4d.js\",\"6443\",\"static/chunks/6443-87ee0feb216f6e9b.js\",\"5451\",\"static/chunks/5451-7f0f3b80298deea0.js\",\"5800\",\"static/chunks/5800-176be018c6af6fcf.js\",\"814\",\"static/chunks/814-0429cee7303b5036.js\",\"5859\",\"static/chunks/app/(landing)/page-3c69e9398f12306d.js\"],\"Text\"]\n7:[\"$\",\"$L14\",null,{\"pos\":\"relative\",\"mih\":\"100dvh\",\"style\":{\"zIndex\":1},\"children\":[[\"$\",\"$L15\",null,{}],[\"$\",\"$L14\",null,{\"component\":\"main\",\"mih\":\"calc(100vh - 246px)\",\"pb\":\"60px\",\"children\":[\"$\",\"$L14\",null,{\"className\":\"landing\",\"children\":[[\"$\",\"$L16\",null,{}],[\"$\",\"$L14\",null,{\"component\":\"section\",\"className\":\"LogoBar_formats__e7bXH\",\"children\":[\"$\",\"$L17\",null,{\"size\":\"xl\",\"children\":[\"$\",\"$L14\",null,{\"className\":\"LogoBar_row__t4God\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"LogoBar_lbl__3KufH\",\"children\":\"Paste anything\"}],[\"$\",\"$L14\",null,{\"className\":\"LogoBar_list__Y2461\",\"style\":{\"fontFamily\":\"'Geist Mono', 'Geist Mono Fallback'\"},\"children\":[[\"$\",\"span\",\"JSON\",{\"className\":\"LogoBar_chip__sgPJ5\",\"children\":[[\"$\",\"span\",null,{\"className\":\"LogoBar_sw__rdpxL\",\"style\":{\"background\":\"var(--lv-coral)\"}}],\"JSON\"]}],[\"$\",\"span\",\"YAML\",{\"className\":\"LogoBar_chip__sgPJ5\",\"children\":[[\"$\",\"span\",null,{\"className\":\"LogoBar_sw__rdpxL\",\"style\":{\"background\":\"var(--lv-cobalt)\"}}],\"YAML\"]}],[\"$\",\"span\",\"XML\",{\"className\":\"LogoBar_chip__sgPJ5\",\"children\":[[\"$\",\"span\",null,{\"className\":\"LogoBar_sw__rdpxL\",\"style\":{\"background\":\"var(--lv-lavender)\"}}],\"XML\"]}],[\"$\",\"span\",\"CSV\",{\"className\":\"LogoBar_chip__sgPJ5\",\"children\":[[\"$\",\"span\",null,{\"className\":\"LogoBar_sw__rdpxL\",\"style\":{\"background\":\"var(--lv-lime)\"}}],\"CSV\"]}],[\"$\",\"span\",\"JSON Schema\",{\"className\":\"LogoBar_chip__sgPJ5\",\"children\":[[\"$\",\"span\",null,{\"className\":\"LogoBar_sw__rdpxL\",\"style\":{\"background\":\"var(--lv-mint)\"}}],\"JSON Schema\"]}],[\"$\",\"span\",\"Mermaid\",{\"className\":\"LogoBar_chip__sgPJ5\",\"children\":[[\"$\",\"span\",null,{\"className\":\"LogoBar_sw__rdpxL\",\"style\":{\"background\":\"var(--lv-peach)\"}}],\"Mermaid\"]}],[\"$\",\"span\",\"Custom nodes \u0026 edges\",{\"className\":\"LogoBar_chip__sgPJ5\",\"children\":[[\"$\",\"span\",null,{\"className\":\"LogoBar_sw__rdpxL\",\"style\":{\"background\":\"var(--lv-coral)\"}}],\"Custom nodes \u0026 edges\"]}]]}]]}]}]}],[\"$\",\"$L18\",null,{}],[\"$\",\"$L14\",null,{\"component\":\"section\",\"id\":\"use-cases\",\"className\":\"UseCasesGrid_usecases__o4ZrE\",\"children\":[\"$\",\"$L17\",null,{\"size\":\"xl\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"landing_sectionHead___rDE4\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"landing_tag__CRJAH\",\"children\":\"â 02 / Who's it for\"}],[\"$\",\"h2\",null,{\"children\":[\"Three kinds of messy data.\",[\"$\",\"br\",null,{}],[\"$\",\"span\",null,{\"className\":\"landing_serif__KbBTj\",\"style\":{\"fontFamily\":\"'Instrument Serif', 'Instrument Serif Fallback'\"},\"children\":\"One clean view.\"}]]}]]}],[\"$\",\"$L19\",null,{\"className\":\"landing_side__kXSE8\",\"children\":\"Whether you're debugging a webhook at 11pm, mapping a dataset, or dropping a diagram into a deck â ToDiagram gives the same moment of âoh, that's what it looks like.â \"}]]}],[\"$\",\"$L14\",null,{\"className\":\"UseCasesGrid_cases__pLOSa\",\"style\":{\"fontFamily\":\"'Geist Mono', 'Geist Mono Fallback'\"},\"children\":[[\"$\",\"$L14\",null,{\"className\":\"UseCasesGrid_case__gr3tb UseCasesGrid_dev__xyr4l\",\"children\":[[\"$\",\"span\",null,{\"className\":\"UseCasesGrid_tag__nysko\",\"children\":\"â For developers\"}],[\"$\",\"h3\",null,{\"style\":{\"fontFamily\":\"var(--mantine-font-family)\",\"fontWeight\":600},\"children\":\"Stop squinting at API responses.\"}],[\"$\",\"p\",null,{\"style\":{\"fontFamily\":\"var(--mantine-font-family)\"},\"children\":\"Paste a payload from Postman, a webhook log, or a prod incident. Get a readable graph with every field, every nested array, every null you forgot to handle.\"}],[\"$\",\"$L14\",null,{\"className\":\"UseCasesGrid_mini__EamsJ\",\"children\":[\"$\",\"svg\",null,{\"className\":\"UseCasesGrid_miniSvg__QCR5J\",\"viewBox\":\"0 0 260 160\",\"preserveAspectRatio\":\"xMidYMid meet\",\"children\":[[\"$\",\"path\",null,{\"className\":\"UseCasesGrid_edge__yDrfM\",\"d\":\"M 96 38 C 118 38, 118 76, 140 76\"}],[\"$\",\"path\",null,{\"className\":\"UseCasesGrid_edge__yDrfM\",\"d\":\"M 96 38 C 118 38, 118 122, 140 122\"}],[\"$\",\"path\",null,{\"className\":\"UseCasesGrid_edge__yDrfM\",\"d\":\"M 180 76 C 200 76, 205 40, 222 40\"}],[\"$\",\"path\",null,{\"className\":\"UseCasesGrid_edge__yDrfM\",\"d\":\"M 180 76 L 222 76\"}],[\"$\",\"path\",null,{\"className\":\"UseCasesGrid_edge__yDrfM\",\"d\":\"M 180 122 L 222 122\"}],[\"$\",\"rect\",null,{\"className\":\"UseCasesGrid_pill__je6Rg\",\"x\":\"6\",\"y\":\"22\",\"width\":\"90\",\"height\"
29:\"32\",\"rx\":\"16\",\"fill\":\"var(--lv-coral)\"}],[\"$\",\"text\",null,{\"className\":\"UseCasesGrid_pillLabel__IQ4rG UseCasesGrid_light__17lBq\",\"x\":\"51\",\"y\":\"38\",\"children\":\"POST /users\"}],[\"$\",\"rect\",null,{\"className\":\"UseCasesGrid_pill__je6Rg\",\"x\":\"140\",\"y\":\"60\",\"width\":\"40\",\"height\":\"32\",\"rx\":\"16\",\"fill\":\"#fff\"}],[\"$\",\"text\",null,{\"className\":\"UseCasesGrid_pillLabel__IQ4rG\",\"x\":\"160\",\"y\":\"76\",\"children\":\"user\"}],\"$L1a\",\"$L1b\",\"$L1c\",\"$L1d\",\"$L1e\",\"$L1f\",\"$L20\",\"$L21\"]}]}]]}],\"$L22\",\"$L23\"]}]]}]}],\"$L24\",\"$L25\",\"$L26\",\"$L27\",\"$L28\",\"$L29\",\"$L2a\",\"$L2b\",\"$L2c\"]}]}],\"$L2d\"]}]\n"])</script>
29<script>self.__next_f.push([1,"2e:I[89276,[\"494\",\"static/chunks/d02c7a31-e322443e20c627bf.js\",\"8767\",\"static/chunks/0561d147-3ec64437cf805414.js\",\"7251\",\"static/chunks/5a050a8f-cd8623a27597e2e1.js\",\"622\",\"static/chunks/622-4a598d9d2ab30471.js\",\"2054\",\"static/chunks/2054-eb0a1ea943438724.js\",\"7319\",\"static/chunks/7319-475076051c5d1085.js\",\"6011\",\"static/chunks/6011-00df3e0291da7b2a.js\",\"2024\",\"static/chunks/2024-219f8229477e3c4d.js\",\"6443\",\"static/chunks/6443-87ee0feb216f6e9b.js\",\"5451\",\"static/chunks/5451-7f0f3b80298deea0.js\",\"5800\",\"static/chunks/5800-176be018c6af6fcf.js\",\"814\",\"static/chunks/814-0429cee7303b5036.js\",\"5859\",\"static/chunks/app/(landing)/page-3c69e9398f12306d.js\"],\"ThemeSwatches\"]\n30:I[1290,[\"494\",\"static/chunks/d02c7a31-e322443e20c627bf.js\",\"8767\",\"static/chunks/0561d147-3ec64437cf805414.js\",\"7251\",\"static/chunks/5a050a8f-cd8623a27597e2e1.js\",\"622\",\"static/chunks/622-4a598d9d2ab30471.js\",\"2054\",\"static/chunks/2054-eb0a1ea943438724.js\",\"7319\",\"static/chunks/7319-475076051c5d1085.js\",\"6011\",\"static/chunks/6011-00df3e0291da7b2a.js\",\"2024\",\"static/chunks/2024-219f8229477e3c4d.js\",\"6443\",\"static/chunks/6443-87ee0feb216f6e9b.js\",\"5451\",\"static/chunks/5451-7f0f3b80298deea0.js\",\"5800\",\"static/chunks/5800-176be018c6af6fcf.js\",\"814\",\"static/chunks/814-0429cee7303b5036.js\",\"5859\",\"static/chunks/app/(landing)/page-3c69e9398f12306d.js\"],\"TwoWayEditing\"]\n31:I[31898,[\"494\",\"static/chunks/d02c7a31-e322443e20c627bf.js\",\"8767\",\"static/chunks/0561d147-3ec64437cf805414.js\",\"7251\",\"static/chunks/5a050a8f-cd8623a27597e2e1.js\",\"622\",\"static/chunks/622-4a598d9d2ab30471.js\",\"2054\",\"static/chunks/2054-eb0a1ea943438724.js\",\"7319\",\"static/chunks/7319-475076051c5d1085.js\",\"6011\",\"static/chunks/6011-00df3e0291da7b2a.js\",\"2024\",\"static/chunks/2024-219f8229477e3c4d.js\",\"6443\",\"static/chunks/6443-87ee0feb216f6e9b.js\",\"5451\",\"static/chunks/5451-7f0f3b80298deea0.js\",\"5800\",\"static/chunks/5800-176be018c6af6fcf.js\",\"814\",\"static/chunks/814-0429cee7303b5036.js\",\"5859\",\"static/chunks/app/(landing)/page-3c69e9398f12306d.js\"],\"ButtonLink\"]\n32:I[14570,[\"494\",\"static/chunks/d02c7a31-e322443e20c627bf.js\",\"8767\",\"static/chunks/0561d147-3ec64437cf805414.js\",\"7251\",\"static/chunks/5a050a8f-cd8623a27597e2e1.js\",\"622\",\"static/chunks/622-4a598d9d2ab30471.js\",\"2054\",\"static/chunks/2054-eb0a1ea943438724.js\",\"7319\",\"static/chunks/7319-475076051c5d1085.js\",\"6011\",\"static/chunks/6011-00df3e0291da7b2a.js\",\"2024\",\"static/chunks/2024-219f8229477e3c4d.js\",\"6443\",\"static/chunks/6443-87ee0feb216f6e9b.js\",\"5451\",\"static/chunks/5451-7f0f3b80298deea0.js\",\"5800\",\"static/chunks/5800-176be018c6af6fcf.js\",\"814\",\"static/chunks/814-0429cee7303b5036.js\",\"5859\",\"static/chunks/app/(landing)/page-3c69e9398f12306d.js\"],\"Image\"]\n36:I[26443,[\"494\",\"static/chunks/d02c7a31-e322443e20c627bf.js\",\"8767\",\"static/chunks/0561d147-3ec64437cf805414.js\",\"7251\",\"static/chunks/5a050a8f-cd8623a27597e2e1.js\",\"622\",\"static/chunks/622-4a598d9d2ab30471.js\",\"2054\",\"static/chunks/2054-eb0a1ea943438724.js\",\"7319\",\"static/chunks/7319-475076051c5d1085.js\",\"6011\",\"static/chunks/6011-00df3e0291da7b2a.js\",\"2024\",\"static/chunks/2024-219f8229477e3c4d.js\",\"6443\",\"static/chunks/6443-87ee0feb216f6e9b.js\",\"5451\",\"static/chunks/5451-7f0f3b80298deea0.js\",\"5800\",\"static/chunks/5800-176be018c6af6fcf.js\",\"814\",\"static/chunks/814-0429cee7303b5036.js\",\"5859\",\"static/chunks/app/(landing)/page-3c69e9398f12306d.js\"],\"\"]\n3d:I[9982,[\"494\",\"static/chunks/d02c7a31-e322443e20c627bf.js\",\"8767\",\"static/chunks/0561d147-3ec64437cf805414.js\",\"7251\",\"static/chunks/5a050a8f-cd8623a27597e2e1.js\",\"622\",\"static/chunks/622-4a598d9d2ab30471.js\",\"2054\",\"static/chunks/2054-eb0a1ea943438724.js\",\"7319\",\"static/chunks/7319-475076051c5d1085.js\",\"6011\",\"static/chunks/6011-00df3e0291da7b2a.js\",\"2024\",\"static/chunks/2024-219f8229477e3c4d.js\",\"6443\",\"static/chunks/6443-87ee0feb216f6e9b.js\",\"5451\",\"static/chunks/5451-7f0f3b80298deea0.js\",\"5800\",\"static/chunks/5800-176be018c6af6fcf.js\",\"814\",\"static/chunks/814-0429cee7303b5036.js\",\"5859\",\"static/chunks/app/(landing)/page-3c69e9398f12306d.js\"],\"Accordion\"]\n3e:I[86165,[\"494\",\"static/chunks/d02c7a31-e322443e20c627bf.js\",\"8767\",\"static/chunks/0561d147-3ec64437cf805414.js\",\"7251\",\"static/chunks/5a050a8f-cd8623a27597e2e1.js\",\"622\",\"static/chunks/622-4a598d9d2ab30471.js\",\"2054\",\"static/chunks/2054-eb0a1ea943438724.js\",\"7319\",\"static/chunks/7319-475076051c5d1085.js\",\"6011\",\"static/chunks/6011-00df3e0291da7b2a.js\",\"2024\",\"static/chunks/2024-219f8229477e3c4d.js\",\"6443\",\"static/chunks/6443-87ee0feb216f6e9b.js\",\"5451\",\"static/chunks/5451-7f0f3b80298deea0.js\",\"5800\",\"static/chunks/5800-176be018c6af6fcf.js\",\"814\",\"static/chunks/814-0429cee7303b5036.js\",\"5859\",\"static/chunks/app/(landing)/page-3c69e9398f12306d.js\"],\"AccordionItem\"]\n3f:I[88557,[\"494\",\"static/chunks/d02c7a31-e322443e20c627bf.js\",\"8767\",\"static/chunks/0561d147-3ec64437cf805414.js\",\"7251\",\"static/chunks/5a050a8f-cd8623a27597e2e1.js\",\"622\",\"static/chunks/622-4a598d9d2ab30471.js\",\"2054\",\"static/chunks/2054-eb0a1ea943438724.js\",\"7319\",\"static/chunks/7319-475076051c5d1085.js\",\"6011\",\"static/chunks/6011-00df3e0291da7b2a.js\",\"2024\",\"static/chunks/2024-219f8229477e3c4d.js\",\"6443\",\"static/chunks/6443-87ee0feb216f6e9b.js\",\"5451\",\"static/chunks/5451-7f0f3b80298deea0.js\",\"5800\",\"static/chunks/5800-176be018c6af6fcf.js\",\"814\",\"static/chunks/814-0429cee7303b5036.js\",\"5859\",\"static/chunks/app/(landing)/page-3c69e9398f12306d.js\"],\"AccordionControl\"]\n40:I[22863,[\"494\",\"static/chunks/d02c7a31-e322443e20c627bf.js\",\"8767\",\"static/chunks/0561d147-3ec64437cf805414.js\",\"7251\",\"static/chunks/5a050a8f-cd8623a27597e2e1.js\",\"622\",\"static/chunks/622-4a598d9d2ab30471.js\",\"2054\",\"static/chunks/2054-eb0a1ea943438724.js\",\"7319\",\"static/chunks/7319-475076051c5d1085.js\",\"6011\",\"static/chunks/6011-00df3e0291da7b2a.js\",\"2024\",\"static/chunks/2024-219f8229477e3c4d.js\",\"6443\",\"static/chunks/6443-87ee0feb216f6e9b.js\",\"5451\",\"static/chunks/5451-7f0f3b80298deea0.js\",\"5800\",\"static/chunks/5800-176be018c6af6fcf.js\",\"814\",\"static/chunks/814-0429cee7303b5036.js\",\"5859\",\"static/chunks/app/(landing)/page-3c69e9398f12306d.js\"],\"AccordionPanel\"]\n49:I[78804,[\"494\",\"static/chunks/d02c7a31-e322443e20c627bf.js\",\"8767\",\"static/chunks/0561d147-3ec64437cf805414.js\",\"7251\",\"static/chunks/5a050a8f-cd8623a27597e2e1.js\",\"622\",\"static/chunks/622-4a598d9d2ab30471.js\",\"2054\",\"static/chunks/2054-eb0a1ea943438724.js\",\"7319\",\"static/chunks/7319-475076051c5d1085.js\",\"6011\",\"static/chunks/6011-00df3e0291da7b2a.js\",\"2024\",\"static/chunks/2024-219f8229477e3c4d.js\",\"6443\",\"static/chunks/6443-87ee0feb216f6e9b.js\",\"5451\",\"static/chunks/5451-7f0f3b80298deea0.js\",\"5800\",\"static/chunks/5800-176be018c6af6fcf.js\",\"814\",\"static/chunks/814-0429cee7303b5036.js\",\"5859\",\"static/chunks/app/(landing)/page-3c69e9398f12306d.js\"],\"Stack\"]\n4a:I[115,[\"494\",\"static/chunks/d02c7a31-e322443e20c627bf.js\",\"8767\",\"static/chunks/0561d147-3ec64437cf805414.js\",\"7251\",\"static/chunks/5a050a8f-cd8623a27597e2e1.js\",\"622\",\"static/chunks/622-4a598d9d2ab30471.js\",\"2054\",\"static/chunks/2054-eb0a1ea943438724.js\",\"7319\",\"static/chunks/7319-475076051c5d1085.js\",\"6011\",\"static/chunks/6011-00df3e0291da7b2a.js\",\"2024\",\"static/chunks/2024-219f8229477e3c4d.js\",\"6443\",\"static/chunks/6443-87ee0feb216f6e9b.js\",\"5451\",\"static/chunks/5451-7f0f3b80298deea0.js\",\"5800\",\"static/chunks/5800-176be018c6af6fcf.js\",\"814\",\"static/chunks/814-0429cee7303b5036.js\",\"5859\",\"static/chunks/app/(landing)/page-3c69e9398f12306d.js\"],\"Title\"]\n4b:I[88906,[\"494\",\"static/chunks/d02c7a31-e322443e20c627bf.js\",\"8767\",\"static/chunks/0561d147-3ec64437cf805414.js\",\"7251\",\"static/chunks/5a050a8f-cd8623a27597e2e1.js\",\"622\",\"static/chunks/622-4a598d9d2ab30471.js\",\"2054\",\"static/chunks/2054-eb0a1ea943438724.js\",\"7319\",\"static/chunks/7319-475076051c5d1085.js\",\"6011\",\"static/chunks/6011-00df3e0291da7b2a.js\",\"2024\",\"static/chunks/2024-219f8229477e3c4d.js\",\"6443\",\"static/chunks/6443-87ee0feb216f6e9b.js\",\"5451\",\"static/chunks/5451-7f0f3b80298deea0.js\",\"5800\",\"static/chunks/5800-176be018c6af6fcf.js\",\"814\",\"static/chunks/814-0429cee7303b5036.js\",\"5859\",\"static/chunks/app/(landing)/page-3c69e9398f12306d.js\"],\"Flex\"]\n4c:I[94628,[\"494\",\"static/chunks/d02c7a31-e322443e20c627bf.js\",\"8767\",\"static/chunks/0561d147-3ec64437cf805414.js\",\"7251\",\"static/chunks/5a050a8f-cd8623a27597e2e1.js\",\"622\",\"static/chunks/622-4a598d9d2ab30471.js\",\"2054\",\"static/chunks/2054-eb0a1ea943438724.js\",\"7319\",\"static/chunks/7319-475076051c5d1085.js\",\"6011\",\"static/chunks/6011-00df3e0291da7b2a.js\",\"2024\",\"static/chunks/2024-219f8229477e3c4d.js\",\"6443\",\"static/chunks/6443-87ee0feb216f6e9b.js\",\"5451\",\"static/chunks/5451-7f0f3b80298deea0.js\",\"5800\",\"static/chunks/5800-176be018c6af6fcf.js\",\"814\",\"static/chunks/814-0429cee7303b5036.js\",\"5859\",\"static/chunks/app/(landing)/page-3c69e9398f12306d.js\"],\"Anchor\"]\n4d:I[91982,[\"494\",\"static/chunks/d02c7a31-e322443e20c627bf.js\",\"8767\",\"static/chunks/0561d147-3ec64437cf805414.js\",\"7251\",\"static/chunks/5a050a8f-cd8623a27597e2e1.js\",\"622\",\"static/chunks/622-4a598d9d2ab30471.js\",\"2054\",\"static/chunks/2054-eb0a1ea943438724.js\",\"7319\",\"static/chunks/7319-475076051c5d1085.js\",\"6011\",\"static/chunks/6011-00df3e0291da7b2a.js\",\"2024\",\"static/chunks/2024-219f8229477e3c4d.js\",\"6443\",\"static/chunks/6443-87ee0feb216f6e9b.js\",\"5451\",\"static/chunks/5451-7f0f3b80298deea0.js\",\"5800\",\"static/chunks/5800-176be018c6af6fcf.js\",\"814\",\"static/chunks/814-0429cee7303b5036.js\",\"5859\",\"static/chunks/app/(landing)/page-3c69e9398f12306d.js\"],\"ThemeIcon\"]\n1a:[\"$\",\"rect\",null,{\"className\":\"UseCasesGrid_pill__je6Rg\",\"x\":\"140\",\"y\":\"106\",\"width\":\"40\",\"height\"
29:\"32\",\"rx\":\"16\",\"fill\":\"#fff\"}]\n1b:[\"$\",\"text\",null,{\"className\":\"UseCasesGrid_pillLabel__IQ4rG\",\"x\":\"160\",\"y\":\"122\",\"children\":\"meta\"}]\n1c:[\"$\",\"rect\",null,{\"className\":\"UseCasesGrid_pill__je6Rg\",\"x\":\"222\",\"y\":\"24\",\"width\":\"32\",\"height\":\"32\",\"rx\":\"16\",\"fill\":\"#fff\"}]\n1d:[\"$\",\"text\",null,{\"className\":\"UseCasesGrid_pillLabel__IQ4rG\",\"x\":\"238\",\"y\":\"40\",\"children\":\"42\"}]\n1e:[\"$\",\"rect\",null,{\"className\":\"UseCasesGrid_pill__je6Rg\",\"x\":\"222\",\"y\":\"60\",\"width\":\"32\",\"height\":\"32\",\"rx\":\"16\",\"fill\":\"var(--lv-cobalt)\"}]\n1f:[\"$\",\"text\",null,{\"className\":\"UseCasesGrid_pillLabel__IQ4rG UseCasesGrid_light__17lBq\",\"x\":\"238\",\"y\":\"76\",\"children\":\"name\"}]\n20:[\"$\",\"rect\",null,{\"className\":\"UseCasesGrid_pill__je6Rg\",\"x\":\"222\",\"y\":\"106\",\"width\":\"32\",\"height\":\"32\",\"rx\":\"16\",\"fill\":\"var(--lv-lime)\"}]\n21:[\"$\",\"text\",null,{\"className\":\"UseCasesGrid_pillLabel__IQ4rG\",\"x\":\"238\",\"y\":\"122\",\"children\":\"null\"}]\n22:[\"$\",\"$L14\",null,{\"className\":\"UseCasesGrid_case__gr3tb UseCasesGrid_data__rLeR8\",\"children\":[[\"$\",\"span\",null,{\"className\":\"UseCasesGrid_tag__nysko\",\"children\":\"â For data teams\"}],[\"$\",\"h3\",null,{\"style\":{\"fontFamily\":\"var(--mantine-font-family)\",\"fontWeight\":600},\"children\":\"See shape before you write a single query.\"}],[\"$\",\"p\",null,{\"style\":{\"fontFamily\":\"var(--mantine-font-family)\"},\"children\":\"Drop in CSV headers, a sample row, or a JSON Schema. ToDiagram infers types, relationships, and cardinality so you know what you're working with.\"}],[\"$\",\"$L14\",null,{\"className\":\"UseCasesGrid_mini__EamsJ\",\"children\":[\"$\",\"svg\",null,{\"className\":\"UseCasesGrid_miniSvg__QCR5J\",\"viewBox\":\"0 0 260 160\",\"preserveAspectRatio\":\"xMidYMid meet\",\"children\":[[\"$\",\"path\",null,{\"className\":\"UseCasesGrid_edge__yDrfM\",\"d\":\"M 78 80 L 110 80\"}],[\"$\",\"path\",null,{\"className\":\"UseCasesGrid_edge__yDrfM\",\"d\":\"M 170 80 C 185 80, 185 40, 200 40\"}],[\"$\",\"path\",null,{\"className\":\"UseCasesGrid_edge__yDrfM\",\"d\":\"M 170 80 C 185 80, 185 120, 200 120\"}],[\"$\",\"rect\",null,{\"className\":\"UseCasesGrid_pill__je6Rg\",\"x\":\"10\",\"y\":\"64\",\"width\":\"68\",\"height\":\"32\",\"rx\":\"16\",\"fill\":\"var(--lv-mint)\"}],[\"$\",\"text\",null,{\"className\":\"UseCasesGrid_pillLabel__IQ4rG\",\"x\":\"44\",\"y\":\"80\",\"children\":\"orders.csv\"}],[\"$\",\"rect\",null,{\"className\":\"UseCasesGrid_pill__je6Rg\",\"x\":\"110\",\"y\":\"64\",\"width\":\"60\",\"height\":\"32\",\"rx\":\"16\",\"fill\":\"var(--lv-cobalt)\"}],[\"$\",\"text\",null,{\"className\":\"UseCasesGrid_pillLabel__IQ4rG UseCasesGrid_light__17lBq\",\"x\":\"140\",\"y\":\"80\",\"children\":\"order_id\"}],[\"$\",\"rect\",null,{\"className\":\"UseCasesGrid_pill__je6Rg\",\"x\":\"200\",\"y\":\"24\",\"width\":\"58\",\"height\":\"30\",\"rx\":\"15\",\"fill\":\"#fff\"}],[\"$\",\"text\",null,{\"className\":\"UseCasesGrid_pillLabel__IQ4rG\",\"x\":\"229\",\"y\":\"40\",\"children\":\"int · PK\"}],[\"$\",\"rect\",null,{\"className\":\"UseCasesGrid_pill__je6Rg\",\"x\":\"200\",\"y\":\"104\",\"width\":\"58\",\"height\":\"30\",\"rx\":\"15\",\"fill\":\"#fff\"}],[\"$\",\"text\",null,{\"className\":\"UseCasesGrid_pillLabel__IQ4rG\",\"x\":\"229\",\"y\":\"120\",\"children\":\"user_id\"}],[\"$\",\"rect\",null,{\"className\":\"UseCasesGrid_pill__je6Rg\",\"x\":\"10\",\"y\":\"124\",\"width\":\"70\",\"height\":\"26\",\"rx\":\"13\",\"fill\":\"var(--lv-peach)\"}],[\"$\",\"text\",null,{\"className\":\"UseCasesGrid_pillLabel__IQ4rG\",\"x\":\"45\",\"y\":\"138\",\"style\":{\"fontSize\":9},\"children\":\"2,481 rows\"}]]}]}]]}]\n23:[\"$\",\"$L14\",null,{\"className\":\"UseCasesGrid_case__gr3tb UseCasesGrid_docs___ZbPe\",\"children\":[[\"$\",\"span\",null,{\"className\":\"UseCasesGrid_tag__nysko\",\"children\":\"â For sharing \u0026 decks\"}],[\"$\",\"h3\",null,{\"style\":{\"fontFamily\":\"var(--mantine-font-family)\",\"fontWeight\":600},\"children\":\"From messy payload to shippable asset.\"}],[\"$\",\"p\",null,{\"style\":{\"fontFamily\":\"var(--mantine-font-family)\"},\"children\":\"Export your diagram as PNG, JPEG, or SVG and drop it into tickets, slide decks, or design reviews â pixel-perfect, no manual cleanup.\"}],[\"$\",\"$L14\",null,{\"className\":\"UseCasesGrid_mini__EamsJ\",\"children\":[\"$\",\"svg\",null,{\"className\":\"UseCasesGrid_miniSvg__QCR5J\",\"viewBox\":\"0 0 260 160\",\"preserveAspectRatio\":\"xMidYMid meet\",\"children\":[[\"$\",\"path\",null,{\"className\":\"UseCasesGrid_edge__yDrfM\",\"d\":\"M 92 80 L 118 80\"}],[\"$\",\"path\",null,{\"className\":\"UseCasesGrid_edge__yDrfM\",\"d\":\"M 174 80 C 195 80, 200 38, 220 38\"}],[\"$\",\"path\",null,{\"className\":\"UseCasesGrid_edge__yDrfM\",\"d\":\"M 174 80 L 220 80\"}],[\"$\",\"path\",null,{\"className\":\"UseCasesGrid_edge__yDrfM\",\"d\":\"M 174 80 C 195 80, 200 122, 220 122\"}],[\"$\",\"rect\",null,{\"className\":\"UseCasesGrid_pill__je6Rg\",\"x\":\"10\",\"y\":\"64\",\"width\":\"82\",\"height\"
29:\"32\",\"rx\":\"16\",\"fill\":\"var(--lv-lavender)\"}],[\"$\",\"text\",null,{\"className\":\"UseCasesGrid_pillLabel__IQ4rG\",\"x\":\"51\",\"y\":\"80\",\"children\":\"diagram\"}],[\"$\",\"rect\",null,{\"className\":\"UseCasesGrid_pill__je6Rg\",\"x\":\"118\",\"y\":\"64\",\"width\":\"56\",\"height\":\"32\",\"rx\":\"16\",\"fill\":\"var(--lv-ink)\"}],[\"$\",\"text\",null,{\"className\":\"UseCasesGrid_pillLabel__IQ4rG UseCasesGrid_light__17lBq\",\"x\":\"146\",\"y\":\"80\",\"children\":\"export\"}],[\"$\",\"rect\",null,{\"className\":\"UseCasesGrid_pill__je6Rg\",\"x\":\"220\",\"y\":\"22\",\"width\":\"36\",\"height\":\"32\",\"rx\":\"16\",\"fill\":\"var(--lv-lime)\"}],[\"$\",\"text\",null,{\"className\":\"UseCasesGrid_pillLabel__IQ4rG\",\"x\":\"238\",\"y\":\"38\",\"children\":\"PNG\"}],[\"$\",\"rect\",null,{\"className\":\"UseCasesGrid_pill__je6Rg\",\"x\":\"220\",\"y\":\"64\",\"width\":\"36\",\"height\":\"32\",\"rx\":\"16\",\"fill\":\"#fff\"}],[\"$\",\"text\",null,{\"className\":\"UseCasesGrid_pillLabel__IQ4rG\",\"x\":\"238\",\"y\":\"80\",\"children\":\"JPEG\"}],[\"$\",\"rect\",null,{\"className\":\"UseCasesGrid_pill__je6Rg\",\"x\":\"220\",\"y\":\"106\",\"width\":\"36\",\"height\":\"32\",\"rx\":\"16\",\"fill\":\"var(--lv-peach)\"}],[\"$\",\"text\",null,{\"className\":\"UseCasesGrid_pillLabel__IQ4rG\",\"x\":\"238\",\"y\":\"122\",\"children\":\"SVG\"}]]}]}]]}]\n24:[\"$\",\"$L14\",null,{\"component\":\"section\",\"id\":\"features\",\"className\":\"BentoGrid_features__Aur_K\",\"children\":[\"$\",\"$L17\",null,{\"size\":\"xl\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"landing_sectionHead___rDE4\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"landing_tag__CRJAH\",\"children\":\"â 03 / What's in the box\"}],[\"$\",\"h2\",null,{\"children\":[\"Small details.\",\" \",[\"$\",\"span\",null,{\"className\":\"landing_serif__KbBTj\",\"style\":{\"fontFamily\":\"'Instrument Serif', 'Instrument Serif Fallback'\"},\"children\":\"Big difference.\"}]]}]]}],[\"$\",\"$L19\",null,{\"className\":\"landing_side__kXSE8\",\"children\":\"Every feature we add answers one question: does this make the diagram easier to read? If no, we cut it.\"}]]}],[\"$\",\"$L14\",null,{\"className\":\"BentoGrid_grid__J6yU9\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"BentoGrid_feat__W4z5F BentoGrid_big__MR0wP\",\"style\":{\"background\":\"color-mix(in oklch, var(--lv-peach) 22%, #fff)\"},\"children\":[[\"$\",\"span\",null,{\"className\":\"BentoGrid_badge__7RsZs\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"width\":7,\"height\":7,\"background\":\"var(--lv-coral)\",\"borderRadius\":\"50%\"}}],\" \",\"search\"]}],[\"$\",\"h3\",null,{\"children\":\"Find any node in a 10,000-line payload.\"}],[\"$\",\"p\",null,{\"children\":\"Fuzzy search scans keys, values, and paths. Matching nodes highlight on the canvas while the rest fades â perfect for hunting down that one nested flag.\"}],[\"$\",\"$L14\",null,{\"className\":\"BentoGrid_visual__eXYZq BentoGrid_visualFilled__uRDwI\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"BentoGrid_searchRow__CgssO\",\"style\":{\"fontFamily\":\"'Geist Mono', 'Geist Mono Fallback'\"},\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--lv-ink-soft)\"},\"children\":\"Search\"}],[\"$\",\"span\",null,{\"children\":[\"user.permissions.\",[\"$\",\"span\",null,{\"className\":\"BentoGrid_hl__Ufaia\",\"children\":\"admin\"}]]}],[\"$\",\"span\",null,{\"style\":{\"marginLeft\":\"auto\",\"color\":\"var(--lv-ink-soft)\",\"fontSize\":11},\"children\":\"3 matches\"}]]}],[\"$\",\"$L14\",null,{\"style\":{\"display\":\"flex\",\"gap\":6,\"fontFamily\":\"'Geist Mono', 'Geist Mono Fallback'\"},\"children\":[\"$\",\"span\",null,{\"className\":\"BentoGrid_dimChip__Xp4GJ\",\"children\":\"$$.user.permissions.admin\"}]}]]}]]}],[\"$\",\"$L14\",null,{\"className\":\"BentoGrid_feat__W4z5F BentoGrid_med__7_GzY\",\"style\":{\"background\":\"color-mix(in oklch, var(--lv-mint) 22%, #fff)\"},\"children\":[[\"$\",\"span\",null,{\"className\":\"BentoGrid_badge__7RsZs\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"width\":7,\"height\"
29:7,\"background\":\"oklch(0.55 0.15 165)\",\"borderRadius\":\"50%\"}}],\" \",\"AI\"]}],[\"$\",\"h3\",null,{\"children\":\"Describe it. Let AI draft the diagram.\"}],[\"$\",\"p\",null,{\"children\":\"Text-to-diagram turns plain prompts into a structured graph you can edit immediately â great for sketching a flow, a schema, or an architecture map.\"}],[\"$\",\"$L14\",null,{\"className\":\"BentoGrid_visual__eXYZq BentoGrid_visualFilled__uRDwI\",\"style\":{\"fontFamily\":\"'Geist Mono', 'Geist Mono Fallback'\",\"fontSize\":12},\"children\":[[\"$\",\"$L14\",null,{\"style\":{\"display\":\"flex\",\"gap\":8,\"alignItems\":\"center\"},\"children\":[[\"$\",\"span\",null,{\"style\":{\"padding\":\"3px 8px\",\"background\":\"color-mix(in oklch, var(--lv-mint) 60%, white)\",\"border\":\"1.5px solid var(--lv-ink)\",\"borderRadius\":6},\"children\":\"prompt\"}],[\"$\",\"span\",null,{\"children\":\"âA Stripe checkout sequenceâ\"}]]}],[\"$\",\"$L14\",null,{\"style\":{\"marginTop\":10,\"fontSize\":11.5,\"color\":\"var(--lv-ink-soft)\"},\"children\":[\"drafted \",[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--lv-ink)\"},\"children\":\"9 nodes\"}],\" · ready to insert\"]}]]}]]}],[\"$\",\"$L14\",null,{\"className\":\"BentoGrid_feat__W4z5F BentoGrid_sm__hgkMv\",\"style\":{\"background\":\"color-mix(in oklch, var(--lv-lavender) 22%, #fff)\"},\"children\":[[\"$\",\"span\",null,{\"className\":\"BentoGrid_badge__7RsZs\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"width\":7,\"height\":7,\"background\":\"var(--lv-cobalt)\",\"borderRadius\":\"50%\"}}],\" \",\"themes\"]}],[\"$\",\"h3\",null,{\"children\":\"Make it yours with one tap.\"}],[\"$\",\"p\",null,{\"children\":\"Swap the whole palette â nodes, rows, edges â without leaving the canvas. Hover a swatch to preview, click to commit.\"}],[\"$\",\"$L2e\",null,{}]]}],[\"$\",\"$L14\",null,{\"className\":\"BentoGrid_feat__W4z5F BentoGrid_sm__hgkMv\",\"style\":{\"background\":\"#fff\"},\"children\":[[\"$\",\"span\",null,{\"className\":\"BentoGrid_badge__7RsZs\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"width\":7,\"height\":7,\"background\":\"var(--lv-cobalt)\",\"borderRadius\":\"50%\"}}],\" \",\"share\"]}],[\"$\",\"h3\",null,{\"children\":\"One-click public links.\"}],[\"$\",\"p\",null,{\"children\":\"Publish a read-only link, share it with your team, or invite teammates to edit the same diagram alongside you.\"}]]}],\"$L2f\"]}]]}]}]\n25:[\"$\",\"$L30\",null,{}]\n26:[\"$\",\"$L14\",null,{\"component\":\"section\",\"className\":\"Validation_validate__bDFFN\",\"children\":[\"$\",\"$L17\",null,{\"size\":\"xl\",\"children\":[\"$\",\"$L14\",null,{\"className\":\"Validation_grid__KAiKl\",\"children\":[[\"$\",\"$L14\",null,{\"style\":{\"fontFamily\":\"'Geist Mono', 'Geist Mono Fallback'\",\"position\":\"relative\"},\"children\":[[\"$\",\"span\",null,{\"className\":\"Validation_tag__sOUGI\",\"children\":\"â JSON Schema\"}],[\"$\",\"h2\",null,{\"className\":\"Validation_title__173sE\",\"style\":{\"fontFamily\":\"var(--mantine-font-family)\"},\"children\":[\"Catch bad data\",\" \",[\"$\",\"span\",null,{\"className\":\"landing_serif__KbBTj\",\"style\":{\"fontFamily\":\"'Instrument Serif', 'Instrument Serif Fallback'\",\"color\":\"var(--lv-coral)\"},\"children\":\"before\"}],\" \",\"it ships.\"]}],[\"$\",\"p\",null,{\"className\":\"Validation_desc__l4mn2\",\"style\":{\"fontFamily\":\"var(--mantine-font-family)\"},\"children\":\"Attach a JSON Schema and ToDiagram validates as you type. Failing paths light up on the diagram, and every error tells you exactly which node and which field.\"}],[\"$\",\"$L14\",null,{\"className\":\"Validation_errors__VzwQA\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"Validation_hdr__W_IyG\",\"style\":{\"fontFamily\":\"var(--mantine-font-family)\"},\"children\":\"Schema Errors · 2\"}],[\"$\",\"$L14\",null,{\"className\":\"Validation_err__8oYvg\",\"children\":[\"$\",\"span\",null,{\"children\":[\"\\\"Network Graph\\\" requires property \",[\"$\",\"b\",null,{\"children\":\"\\\"protocol\\\"\"}]]}]}],[\"$\",\"$L14\",null,{\"className\":\"Validation_err__8oYvg\",\"children\":[\"$\",\"span\",null,{\"children\":[\"\\\"ver
29sion\\\" is not of type(s) \",[\"$\",\"b\",null,{\"children\":\"string\"}]]}]}]]}]]}],[\"$\",\"$L14\",null,{\"className\":\"Validation_visual__egFOW\",\"style\":{\"fontFamily\":\"'Geist Mono', 'Geist Mono Fallback'\"},\"children\":[[\"$\",\"div\",null,{\"className\":\"landing_node__n4OvS landing_n-coral__SFuy5 Validation_errPulse__XrVUI\",\"style\":{\"flex\":\"0 0 42%\",\"borderColor\":\"oklch(0.65 0.2 25)\"},\"children\":[[\"$\",\"div\",null,{\"className\":\"landing_hd__YJ3jn\",\"children\":\"Network Graph\"}],[\"$\",\"div\",null,{\"className\":\"landing_row__Pp0NW\",\"style\":{\"background\":\"color-mix(in oklch, var(--lv-coral) 15%, #fff)\"},\"children\":[[\"$\",\"span\",null,{\"className\":\"landing_k__HUP7l\",\"children\":\"version:\"}],[\"$\",\"span\",null,{\"className\":\"landing_v__jPqOM landing_vn__t1Ogp\",\"children\":\"2\"}]]}],[\"$\",\"div\",null,{\"className\":\"landing_row__Pp0NW\",\"children\":[[\"$\",\"span\",null,{\"className\":\"landing_k__HUP7l\",\"children\":\"metric:\"}],[\"$\",\"span\",null,{\"className\":\"landing_v__jPqOM landing_vs__jrwID\",\"children\":\"\\\"etx\\\"\"}]]}],[\"$\",\"div\",null,{\"className\":\"landing_row__Pp0NW\",\"children\":[[\"$\",\"span\",null,{\"className\":\"landing_k__HUP7l\",\"children\":\"label:\"}],[\"$\",\"span\",null,{\"className\":\"landing_v__jPqOM landing_vs__jrwID\",\"children\":\"\\\"Test Network\\\"\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"Validation_connector__QImTv\",\"children\":[[\"$\",\"div\",null,{\"className\":\"Validation_connectorBranch__hwibW Validation_branchTop__4tWpg\"}],[\"$\",\"div\",null,{\"className\":\"Validation_connectorBranch__hwibW Validation_branchBottom__tmpIO\"}]]}],[\"$\",\"$L14\",null,{\"className\":\"Validation_children__ZoCZW\",\"children\":[[\"$\",\"div\",null,{\"className\":\"landing_node__n4OvS landing_n-coral__SFuy5\",\"children\":[[\"$\",\"div\",null,{\"className\":\"landing_hd__YJ3jn\",\"children\":\"nodes[0]\"}],[\"$\",\"div\",null,{\"className\":\"landing_row__Pp0NW\",\"style\":{\"background\":\"color-mix(in oklch, var(--lv-coral) 15%, #fff)\"},\"children\":[[\"$\",\"span\",null,{\"className\":\"landing_k__HUP7l\",\"children\":\"id:\"}],[\"$\",\"span\",null,{\"className\":\"landing_v__jPqOM landing_vn__t1Ogp\",\"children\":\"123\"}]]}],[\"$\",\"div\",null,{\"className\":\"landing_row__Pp0NW\",\"children\":[[\"$\",\"span\",null,{\"className\":\"landing_k__HUP7l\",\"children\":\"label:\"}],[\"$\",\"span\",null,{\"className\":\"landing_v__jPqOM landing_vs__jrwID\",\"children\":\"\\\"node A\\\"\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"landing_node__n4OvS landing_n-lav__wpMpx\",\"children\":[[\"$\",\"div\",null,{\"className\":\"landing_hd__YJ3jn\",\"children\":\"nodes[1]\"}],[\"$\",\"div\",null,{\"className\":\"landing_row__Pp0NW\",\"children\":[[\"$\",\"span\",null,{\"className\":\"landing_k__HUP7l\",\"children\":\"id:\"}],[\"$\",\"span\",null,{\"className\":\"landing_v__jPqOM landing_vs__jrwID\",\"children\":\"\\\"172.16.40.60\\\"\"}]]}],[\"$\",\"div\",null,{\"className\":\"landing_row__Pp0NW\",\"children\":[[\"$\",\"span\",null,{\"className\":\"landing_k__HUP7l\",\"children\":\"label:\"}],[\"$\",\"span\",null,{\"className\":\"landing_v__jPqOM landing_vs__jrwID\",\"children\":\"\\\"node B\\\"\"}]]}]]}]]}]]}]]}]}]}]\n27:[\"$\",\"$L14\",null,{\"component\":\"section\",\"className\":\"Mcp_mcp__8allc\",\"children\":[\"$\",\"$L17\",null,{\"size\":\"xl\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"landing_sectionHead___rDE4\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"landing_tag__CRJAH\",\"children\":\"â MCP integration\"}],[\"$\",\"h2\",null,{\"children\":[\"Give your agent\",\" \",[\"$\",\"span\",null,{\"className\":\"landing_serif__KbBTj\",\"style\":{\"fontFamily\":\"'Instrument Serif', 'Instrument Serif Fallback'\"},\"children\":\"eyes\"}],\" \",\"for data.\"]}]]}],[\"$\",\"$L19\",null,{\"className\":\"landing_side__kXSE8\",\"children\":\"One MCP server works with every coding agent you already use. Diagrams become something your AI can produce on demand â in-chat, in-IDE, in the flow.\"}]]}],[\"$\",\"$L14\",null,{\"className\":\"Mcp_card__FFhWT\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"Mcp_copy__HN6vw\",\"style\":{\"fontFamily\":\"'Geist Mono', 'Geist Mono Fallback'\"},\"children\":[[\"$\",\"span\",null,{\"className\":\"Mcp_tag__39xmw\",\"children\":\"/ mcp · model context protocol\"}],[\"$\",\"h3\",null,{\"className\":\"Mcp_title__ZDLsW\",\"style\":{\"fontFamily\":\"var(--mantine-font-family)\"},\"children\":[\"Connect once.\",[\"$\",\"br\",null,{}],[\"$\",\"span\",null,{\"className\":\"landing_serif__KbBTj\",\"style\":{\"fontFamily\":\"'Instrument Serif', 'Instrument Serif Fallback'\",\"color\":\"var(--lv-peach)\"},\"children\":\"Diagram anywhere.\"}]]}],[\"$\",\"p\",null,{\"className\":\"Mcp_desc__AHNFv\",\"style\":{\"fontFamily\":\"var(--mantine-font-family)\"},\"children\":[\"Install \",[\"$\",\"code\",null,{\"children\":\"@todiagram/todiagram-mcp\"}],\" in Claude, Cursor, Zed, VS Code or any MCP-compatible agent. Your AI can inspect a payload, read a fixture, or render a schema as a diagram â without leaving the chat.\"]}],[\"$\",\"$L14\",null,{\"style\":{\"display\":\"flex\",\"gap\":10,\"marginTop\":36,\"flexWrap\":\"wrap\",\"fontFamily\":\"var(--mantine-font-family)\"},\"children\":[[\"$\",\"$L31\",null,{\"href\":\"/mcp\",\"size\":\"md\",\"radius\":\"xl\",\"style\":{\"background\":\"var(--lv-paper)\",\"color\":\"var(--lv-ink)\",\"border\":\"1px solid var(--lv-paper)\"},\"children\":\"Install MCP server â\"}],[\"$\",\"$L31\",null,{\"href\":\"/docs/mcp\",\"size\":\"md\",\"radius\":\"xl\",\"variant\":\"default\",\"style\":{\"background\":\"transparent\",\"color\":\"var(--lv-paper)\",\"border\":\"1px solid color-mix(in oklch, var(--lv-paper) 30%, transparent)\"},\"children\":\"See setup docs\"}]]}]]}],[\"$\",\"$L14\",null,{\"className\":\"Mcp_viz__l3ZhN\",\"children\":[[\"$\",\"svg\",null,{\"className\":\"Mcp_lines__HdOKZ\",\"viewBox\":\"0 0 100 100\",\"preserveAspectRatio\":\"none\",\"style\":{\"width\":\"100%\",\"height\"
29:\"100%\"},\"children\":[[\"$\",\"path\",null,{\"d\":\"M 50 36 L 50 18\"}],[\"$\",\"path\",null,{\"d\":\"M 62.2 43.05 L 79.8 32.97\"}],[\"$\",\"path\",null,{\"d\":\"M 37.8 43.05 L 20.2 32.97\"}],[\"$\",\"path\",null,{\"d\":\"M 62.2 56.95 L 79.8 67.03\"}],[\"$\",\"path\",null,{\"d\":\"M 37.8 56.95 L 20.2 67.03\"}],[\"$\",\"path\",null,{\"d\":\"M 50 64 L 50 82\"}]]}],[\"$\",\"$L14\",null,{\"className\":\"Mcp_node__Z_ScQ Mcp_n1__rFH7d\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Mcp_dot__fzBSF\",\"style\":{\"background\":\"var(--lv-coral)\"}}],\"Claude\"]}],[\"$\",\"$L14\",null,{\"className\":\"Mcp_node__Z_ScQ Mcp_n2__cn1wK\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Mcp_dot__fzBSF\",\"style\":{\"background\":\"var(--lv-cobalt)\"}}],\"Cursor\"]}],[\"$\",\"$L14\",null,{\"className\":\"Mcp_node__Z_ScQ Mcp_n3__tntpI\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Mcp_dot__fzBSF\",\"style\":{\"background\":\"var(--lv-lime)\"}}],\"Zed\"]}],[\"$\",\"$L14\",null,{\"className\":\"Mcp_node__Z_ScQ Mcp_n4__AsRf0\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Mcp_dot__fzBSF\",\"style\":{\"background\":\"var(--lv-lavender)\"}}],\"VS Code\"]}],[\"$\",\"$L14\",null,{\"className\":\"Mcp_node__Z_ScQ Mcp_n5__KojPp\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Mcp_dot__fzBSF\",\"style\":{\"background\":\"var(--lv-peach)\"}}],\"Windsurf\"]}],[\"$\",\"$L14\",null,{\"className\":\"Mcp_node__Z_ScQ Mcp_n6__iXFJK\",\"children\":[[\"$\",\"span\",null,{\"className\":\"Mcp_dot__fzBSF\",\"style\":{\"background\":\"var(--lv-mint)\"}}],\"Continue\"]}],[\"$\",\"$L14\",null,{\"className\":\"Mcp_hub__R6Jos\",\"children\":[\"$\",\"$L32\",null,{\"src\":\"/brand-assets/todiagram-logo-icon.svg\",\"alt\":\"ToDiagram\",\"width\":56,\"height\":56}]}]]}]]}],[\"$\",\"$L14\",null,{\"className\":\"Mcp_benefits__JD8LI\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"Mcp_benefit__7mnPz\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"Mcp_num__0yAih\",\"children\":\"01 · in the flow\"}],[\"$\",\"h4\",null,{\"children\":\"Never leave the editor.\"}],[\"$\",\"p\",null,{\"children\":\"Ask your agent for a diagram mid-debug. It opens in a pane next to your code.\"}]]}],[\"$\",\"$L14\",null,{\"className\":\"Mcp_benefit__7mnPz\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"Mcp_num__0yAih\",\"children\":\"02 · context-aware\"}],\"$L33\",\"$L34\"]}],\"$L35\"]}]]}]}]\n28:[\"$\",\"$L14\",null,{\"component\":\"section\",\"className\":\"SmallUses_moreUses__kcHgn\",\"children\":[\"$\",\"$L17\",null,{\"size\":\"xl\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"landing_sectionHead___rDE4\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"landing_tag__CRJAH\",\"children\":\"â And plenty more\"}],[\"$\",\"h2\",null,{\"children\":[\"One tool.\",\" \",[\"$\",\"span\",null,{\"className\":\"landing_serif__KbBTj\",\"style\":{\"fontFamily\":\"'Instrument Serif', 'Instrument Serif Fallback'\"},\"children\":\"Many shapes of data.\"}]]}]]}]}],[\"$\",\"$L14\",null,{\"className\":\"SmallUses_grid__yqUwt\",\"children\":[[\"$\",\"$L36\",\"CI/CD diagrams\",{\"href\":\"/use-cases/cicd-diagrams\",\"className\":\"SmallUses_chip__TvW0Q\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"SmallUses_ico__Q1yMN\",\"style\":{\"background\":\"color-mix(in oklch, var(--lv-coral) 35%, #fff)\",\"fontFamily\":\"'Geist Mono', 'Geist Mono Fallback'\"},\"children\":\"â\"}],[\"$\",\"h3\",null,{\"children\":\"CI/CD diagrams\"}],[\"$\",\"p\",null,{\"children\":\"Map pipelines, jobs, and dependencies from a single config file.\"}],[\"$\",\"span\",null,{\"className\":\"SmallUses_tag__zw7Hx\",\"style\":{\"fontFamily\":\"'Geist Mono', 'Geist Mono Fallback'\"},\"children\":\"for platform teams\"}]]}],[\"$\",\"$L36\",\"Network diagrams\",{\"href\":\"/use-cases/net
29work-diagrams\",\"className\":\"SmallUses_chip__TvW0Q\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"SmallUses_ico__Q1yMN\",\"style\":{\"background\":\"color-mix(in oklch, var(--lv-lavender) 45%, #fff)\",\"fontFamily\":\"'Geist Mono', 'Geist Mono Fallback'\"},\"children\":\"â\"}],[\"$\",\"h3\",null,{\"children\":\"Network diagrams\"}],[\"$\",\"p\",null,{\"children\":\"Visualize routers, hosts, and links from structured topology data.\"}],[\"$\",\"span\",null,{\"className\":\"SmallUses_tag__zw7Hx\",\"style\":{\"fontFamily\":\"'Geist Mono', 'Geist Mono Fallback'\"},\"children\":\"for infra\"}]]}],[\"$\",\"$L36\",\"API design \u0026 docs\",{\"href\":\"/use-cases/api-design-and-documentation\",\"className\":\"SmallUses_chip__TvW0Q\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"SmallUses_ico__Q1yMN\",\"style\":{\"background\":\"color-mix(in oklch, var(--lv-mint) 50%, #fff)\",\"fontFamily\":\"'Geist Mono', 'Geist Mono Fallback'\"},\"children\":\"â\"}],[\"$\",\"h3\",null,{\"children\":\"API design \u0026 docs\"}],[\"$\",\"p\",null,{\"children\":\"Turn OpenAPI or raw responses into a navigable type graph.\"}],[\"$\",\"span\",null,{\"className\":\"SmallUses_tag__zw7Hx\",\"style\":{\"fontFamily\":\"'Geist Mono', 'Geist Mono Fallback'\"},\"children\":\"for API teams\"}]]}],[\"$\",\"$L36\",\"JSON Schema\",{\"href\":\"/use-cases/json-schema-validation\",\"className\":\"SmallUses_chip__TvW0Q\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"SmallUses_ico__Q1yMN\",\"style\":{\"background\":\"color-mix(in oklch, var(--lv-lime) 55%, #fff)\",\"fontFamily\":\"'Geist Mono', 'Geist Mono Fallback'\"},\"children\":\"â³\"}],[\"$\",\"h3\",null,{\"children\":\"JSON Schema\"}],[\"$\",\"p\",null,{\"children\":\"See every required, every type, every $ref â all in one view.\"}],[\"$\",\"span\",null,{\"className\":\"SmallUses_tag__zw7Hx\",\"style\":{\"fontFamily\":\"'Geist Mono', 'Geist Mono Fallback'\"},\"children\":\"for backend devs\"}]]}],[\"$\",\"$L36\",\"Design systems \u0026 tokens\",{\"href\":\"/use-cases/design-systems-and-tokens\",\"className\":\"SmallUses_chip__TvW0Q\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"SmallUses_ico__Q1yMN\",\"style\":{\"background\":\"color-mix(in oklch, var(--lv-peach) 55%, #fff)\",\"fontFamily\":\"'Geist Mono', 'Geist Mono Fallback'\"},\"children\":\"â\"}],[\"$\",\"h3\",null,{\"children\":\"Design systems \u0026 tokens\"}],[\"$\",\"p\",null,{\"children\":\"Explore design tokens and theme objects as a structured map.\"}],[\"$\",\"span\",null,{\"className\":\"SmallUses_tag__zw7Hx\",\"style\":{\"fontFamily\":\"'Geist Mono', 'Geist Mono Fallback'\"},\"children\":\"for designers\"}]]}],[\"$\",\"$L36\",\"JSON-LD\",{\"href\":\"/use-cases/jsonld-schema-visualization\",\"className\":\"SmallUses_chip__TvW0Q\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"SmallUses_ico__Q1yMN\",\"style\":{\"background\":\"color-mix(in oklch, var(--lv-cobalt) 30%, #fff)\",\"fontFamily\":\"'Geist Mono', 'Geist Mono Fallback'\"},\"children\":\"â¡\"}],[\"$\",\"h3\",null,{\"children\":\"JSON-LD\"}],[\"$\",\"p\",null,{\"children\":\"Render linked data documents so context and types are easy to read.\"}],[\"$\",\"span\",null,{\"className\":\"SmallUses_tag__zw7Hx\",\"style\":{\"fontFamily\":\"'Geist Mono', 'Geist Mono Fallback'\"},\"children\":\"for data teams\"}]]}],[\"$\",\"$L36\",\"Mermaid diagrams\",{\"href\":\"/mermaid-editor-visualization\",\"className\":\"SmallUses_chip__TvW0Q\",\"children\":[\"$L37\",\"$L38\",\"$L39\",\"$L3a\"]}],\"$L3b\"]}]]}]}]\n29:[\"$\",\"$L14\",null,{\"component\":\"section\",\"className\":\"Testimonials_testimonials__V_w6_\",\"children\":[\"$\",\"$L17\",null,{\"size\":\"xl\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"landing_sectionHead___rDE4\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"landing_tag__CRJAH\",\"children\":\"â In the wild\"}],[\"$\",\"h2\",null,{\"children\":[\"âFinally, my JSON\",\" \",[\"$\",\"span\",null,{\"className\":\"landing_serif__KbBTj\",\"style\":{\"fontFamily\":\"'Instrument Serif', 'Instrument Serif Fallback'\"},\"children\":\"makes sense.\"}],\"â\"]}]]}],[\"$\",\"$L19\",null,{\"className\":\"landing_side__kXSE8\",\"children\":\"A few words from teams who paste weird data for a living.\"}]]}],[\"$\",\"$L14\",null,{\"className\":\"Testimonials_grid__Cy2hR\",\"style\":{\"fontFamily\":\"var(--mantine-font-family)\"},\"children\":[[\"$\",\"$L14\",null,{\"className\":\"Testimonials_quote__v1iu2 Testimonials_featured__Ln3BV\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"Testimonials_mark__AlBT_\",\"style\":{\"fontFamily\":\"'Instrument Serif', 'Instrument Serif Fallback'\"},\"children\":\"â\"}],[\"$\",\"blockquote\",null,{\"children\":\"At DynamicSource, we work with complex JSON files to define calculation algorithms for our performance applications. ToDiagram has been extremely helpful for visualizing complex logic and navigating deeply nested structures. Of all the tools we tried, ToDiagram is by far the most intuitive and powerful, making it much easier to work with our data.\"}],[\"$\",\"$L14\",null,{\"className\":\"Testimonials_who__HpsLO\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"Testimonials_avaImg__B2yom\",\"children\":[\"$\",\"$L32\",null,{\"src\":\"https://media.licdn.com/dms/image/v2/C4E0BAQG1DP_mMG7_jg/company-logo_200_200/company-logo_200_200/0/1630615039371/dynamicsource_ab_logo?e=2147483647\u0026v=beta\u0026t=0CN1Hs7wl0jUCnk74SiJ4o0OoyYn2M1DgwrnxzTiT6Y\",\"alt\":\"DynamicSource\",\"fit\":\"cover\",\"w\":40,\"h\":40}]}],[\"$\",\"$L14\",null,{\"className\":\"Testimonials_meta__Ct2Ua\",\"children\":[[\"$\",\"b\",null,{\"children\":\"Performance Engineering Lead\"}],[\"$\",\"span\",null,{\"children\":\"DynamicSource\"}]]}]]}]]}],[\"$\",\"$L14\",null,{\"className\":\"Testimonials_quote__v1iu2\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"Testimonials_mark__AlBT_\",\"style\":{\"fontFamily\":\"'Instrument Serif', 'Instrument Serif Fallback'\"},\"children\":\"â\"}],[\"$\",\"blockquote\",null,{\"children\":\"Paste in a payload, see the shape, share the link. It's the workflow I always wished browsers had built in.\"}],[\"$\",\"$L14\",null,{\"className\":\"Testimonials_who__HpsLO\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"Testimonials_ava__gyTb8\"}],[\"$\",\"$L14\",null,{\"className\":\"Testimonials_meta__Ct2Ua\",\"children\":[[\"$\",\"b\",null,{\"children\":\"Backend developer\"}],[\"$\",\"span\",null,{\"children\":\"via GitHub reviews\"}]]}]]}]]}],[\"$\",\"$L14\",null,{\"className\":\"Testimonials_quote__v1iu2\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"Testimonials_mark__AlBT_\",\"style\":{\"fontFamily\":\"'Instrument Serif', 'Instrument Serif Fallback'\"},\"children\":\"â\"}],[\"$\",\"blockquote\",null,{\"children\":\"Our team uses ToDiagram to document the shape of every new API. The diagrams update with the data â onboarding engineers has gotten noticeably faster.\"}],[\"$\",\"$L14\",null,{\"className\":\"Testimonials_who__HpsLO\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"Testimonials_ava__gyTb8\",\"style\":{\"background\":\"conic-gradient(from 270deg, var(--lv-cobalt), var(--lv-mint), var(--lv-lavender))\"}}],[\"$\",\"$L14\",null,{\"className\":\"Testimonials_meta__Ct2Ua\",\"children\":[[\"$\",\"b\",null,{\"children\":\"Platform engineer\"}],[\"$\",\"span\",null,{\"children\":\"shared anonymously\"}]]}]]}]]}]]}]]}]}]\n2a:[\"$\",\"$L14\",null,{\"component\":\"section\",\"className\":\"FinalCTA_cta__DFaez\",\"children\":[\"$\",\"$L17\",null,{\"size\":\"xl\",\"children\":[\"$\",\"$L14\",null,{\"className\":\"FinalCTA_box__jg6rI\",\"children\":[[\"$\",\"$L14\",null,{\"children\":[[\"$\",\"h2\",null,{\"children\":[\"Some data\",[\"$\",\"br\",null,{}],\"wants to be\",\" \",[\"$\",\"span\",null,{\"style\":{\"fontFamily\":\"'Instrument Serif', 'Instrument Serif Fallback'\",\"color\":\"var(--lv-peach)\",\"fontWeight\":400,\"fontStyle\":\"italic\"},\"children\":\"seen.\"}]]}],[\"$\",\"p\",null,{\"children\":\"Paste a payload in seconds. Free to try, with Pro plans for teams that share a lot.\"}],[\"$\",\"$L14\",null,{\"style\":{\"display\":\"flex\",\"gap\":10,\"flexWrap\":\"wrap\"},\"children\":[[\"$\",\"$L31\",null,{\"href\":\"/editor\",\"size\":\"lg\",\"radius\":\"xl\",\"style\":{\"background\":\"var(--lv-paper)\",\"color\":\"var(--lv-ink)\",\"border\":\"1px solid var(--lv-paper)\"},\"children\":\"Open the editor â\"}],[\"$\",\"$L31\",null,{\"href\":\"/pricing\",\"size\":\"lg\",\"radius\":\"xl\",\"variant\":\"default\",\"style\":{\"background\":\"transparent\",\"color\":\"var(--lv-paper)\",\"border\":\"1px solid color-mix(in oklch, var(--lv-paper) 30%, transparent)\"},\"children\":\"See pricing\"}]]}]]}],[\"$\",\"$L14\",null,{\"className\":\"FinalCTA_visual__y1LPz\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 260 260\",\"style\":{\"width\":\"100%\",\"height\"
29:\"100%\"},\"children\":[[\"$\",\"defs\",null,{\"children\":[\"$\",\"pattern\",null,{\"id\":\"lvgrid\",\"width\":\"22\",\"height\":\"22\",\"patternUnits\":\"userSpaceOnUse\",\"children\":[\"$\",\"path\",null,{\"d\":\"M22 0 L0 0 0 22\",\"fill\":\"none\",\"stroke\":\"rgba(253,251,245,0.08)\",\"strokeWidth\":\"1\"}]}]}],[\"$\",\"rect\",null,{\"width\":\"260\",\"height\":\"260\",\"fill\":\"url(#lvgrid)\",\"rx\":\"16\"}],[\"$\",\"path\",null,{\"d\":\"M 50 50 C 100 50, 100 130, 150 130\",\"fill\":\"none\",\"stroke\":\"var(--lv-paper)\",\"strokeWidth\":\"1.3\",\"strokeDasharray\":\"4 4\",\"className\":\"FinalCTA_animDash__oXFf6\"}],[\"$\",\"path\",null,{\"d\":\"M 150 130 C 200 130, 200 200, 220 200\",\"fill\":\"none\",\"stroke\":\"var(--lv-paper)\",\"strokeWidth\":\"1.3\",\"strokeDasharray\":\"4 4\",\"className\":\"FinalCTA_animDash__oXFf6\"}],[\"$\",\"path\",null,{\"d\":\"M 150 130 C 200 130, 200 60, 220 60\",\"fill\":\"none\",\"stroke\":\"var(--lv-paper)\",\"strokeWidth\":\"1.3\",\"strokeDasharray\":\"4 4\",\"className\":\"FinalCTA_animDash__oXFf6\"}],[\"$\",\"rect\",null,{\"x\":\"22\",\"y\":\"34\",\"width\":\"58\",\"height\":\"34\",\"rx\":\"7\",\"fill\":\"var(--lv-coral)\"}],[\"$\",\"rect\",null,{\"x\":\"122\",\"y\":\"114\",\"width\":\"58\",\"height\":\"34\",\"rx\":\"7\",\"fill\":\"var(--lv-lime)\"}],[\"$\",\"rect\",null,{\"x\":\"192\",\"y\":\"44\",\"width\":\"54\",\"height\":\"32\",\"rx\":\"7\",\"fill\":\"var(--lv-lavender)\"}],[\"$\",\"rect\",null,{\"x\":\"192\",\"y\":\"184\",\"width\":\"54\",\"height\":\"32\",\"rx\":\"7\",\"fill\":\"var(--lv-peach)\"}]]}]}]]}]}]}]\n2b:[\"$\",\"$L14\",null,{\"component\":\"section\",\"className\":\"Reads_blog__Zsmc4\",\"children\":[\"$\",\"$L17\",null,{\"size\":\"xl\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"Reads_head__FwuPJ\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"landing_tag__CRJAH\",\"children\":\"â From the blog\"}],[\"$\",\"$L19\",null,{\"component\":\"h2\",\"m\":0,\"fz\":{\"base\":28,\"xs\":32,\"sm\":42},\"fw\":600,\"lh\":1.05,\"c\":\"var(--lv-ink)\",\"style\":{\"letterSpacing\":\"-0.028em\"},\"children\":[\"Guides, tips \u0026 news\",[\"$\",\"br\",null,{}],[\"$\",\"span\",null,{\"className\":\"landing_serif__KbBTj\",\"style\":{\"fontFamily\":\"'Instrument Serif', 'Instrument Serif Fallback'\"},\"children\":\"from ToDiagram.\"}]]}]]}],[\"$\",\"$L31\",null,{\"href\":\"/blog\",\"size\":\"md\",\"radius\":\"xl\",\"variant\":\"default\",\"className\":\"landing_warmGhost__vVs4M\",\"children\":\"Read more from ToDiagram â\"}]]}],[\"$\",\"$L14\",null,{\"className\":\"Reads_grid__Hkd3N\",\"children\":[[\"$\",\"$L36\",\"Introducing New Shapes in ToDiagram\",{\"href\":\"/blog/introducing-new-shapes-in-todiagram\",\"className\":\"Reads_post__NyFAH\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"Reads_thumb__BS5F8\",\"style\":{\"background\":\"linear-gradient(135deg, color-mix(in oklch, var(--lv-coral) 25%, var(--lv-paper)), color-mix(in oklch, var(--lv-peach) 30%, var(--lv-paper)))\"},\"children\":[\"$\",\"$L32\",null,{\"src\":\"/images/new-shapes-banner.webp\",\"alt\":\"Introducing New Shapes in ToDiagram\",\"loading\":\"lazy\",\"fit\":\"cover\",\"w\":\"100%\",\"h\":\"100%\"}]}],[\"$\",\"$L14\",null,{\"className\":\"Reads_body__3ezq9\",\"children\":[[\"$\",\"h3\",null,{\"children\":\"Introducing New Shapes in ToDiagram\"}],[\"$\",\"p\",null,{\"children\":\"ToDiagram now supports more node shapes for Mermaid and custom diagrams, including diamonds, cylinders, circles, hexagons, parallelograms, trapezoids, and more.\"}]]}]]}],[\"$\",\"$L36\",\"Visualize Pull Requests as Diagrams\",{\"href\":\"/blog/visualize-pull-requests-as-diagrams\",\"className\":\"Reads_post__NyFAH\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"Reads_thumb__BS5F8\",\"style\":{\"background\":\"linear-gradient(135deg, color-mix(in oklch, var(--lv-ink) 85%, var(--lv-paper)) 40%, color-mix(in oklch, var(--lv-lavender) 35%, var(--lv-paper)))\"},\"children\":[\"$\",\"$L32\",null,{\"src\":\"/images/visualizing-pr.jpeg\",\"alt\":\"Visualize Pull Requests as Diagrams\",\"loading\":\"lazy\",\"fit\":\"cover\",\"w\":\"100%\",\"h\":\"100%\"}]}],[\"$\",\"$L14\",null,{\"className\":\"Reads_body__3ezq9\",\"children\":[[\"$\",\"h3\",null,{\"children\":\"Visualize Pull Requests as Diagrams\"}],[\"$\",\"p\",null,{\"children\":\"Large pull requests hide structural changes across scattered diffs. Instead of mentally reconstructing the system, let an LLM explain the PR as a diagram and review the shape of the change before reading the code.\"}]]}]]}],[\"$\",\"$L36\",\"Introducing ToDiagram Skills for Coding Agents\",{\"href\":\"/blog/introducing-todiagram-skills-for-coding-agents\",\"className\":\"Reads_post__NyFAH\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"Reads_thumb__BS5F8\",\"style\":{\"background\":\"linear-gradient(135deg, color-mix(in oklch, var(--lv-mint) 35%, var(--lv-paper)), color-mix(in oklch, var(--lv-lime) 30%, var(--lv-paper)))\"},\"children\":[\"$\",\"$L32\",null,{\"src\":\"/images/blog/todiagram-agent-skills-banner.webp\",\"alt\":\"Introducing ToDiagram Skills for Coding Agents\",\"loading\":\"lazy\",\"fit\":\"cover\",\"w\":\"100%\",\"h\":\"100%\"}]}],[\"$\",\"$L14\",null,{\"className\":\"Reads_body__3ezq9\",\"children\":[[\"$\",\"h3\",null,{\"children\":\"Introducing ToDiagram Skills for Coding Agents\"}],[\"$\",\"p\",null,{\"children\":\"ToDiagram Skills is a public repository of installable agent skills. The first published `diagram` skill helps coding agents create clearer diagrams for architecture, flows, and AI-generated diffs.\"}]]}]]}]]}]]}]}]\n3c:T952,{\"@context\":\"https://schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"What is ToDiagram?\",\"acceptedA
29nswer\":{\"@type\":\"Answer\",\"text\":\"ToDiagram is an intuitive data editor that transforms JSON, CSV, YAML, and other structured data formats into interactive, easy-to-navigate diagrams. It helps users work with complex datasets visually, making it easier to understand, modify, and explore data relationships.\\n\\nInstead of getting stuck in raw code, you can quickly transform your data into diagrams and focus on understanding the information.\"}},{\"@type\":\"Question\",\"name\":\"Is my data secure?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes. ToDiagram processes diagrams locally in your browser by default. If you explicitly choose server processing from the editor prompt for large diagrams, data is used only to compute layout and is not stored. Documents are stored only when you explicitly save them.\"}},{\"@type\":\"Question\",\"name\":\"What data formats does ToDiagram support?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"ToDiagram currently supports JSON, CSV, YAML, and XML data formats.\"}},{\"@type\":\"Question\",\"name\":\"What data size does ToDiagram support?\",\"acceptedA
29nswer\":{\"@type\":\"Answer\",\"text\":\"ToDiagram can handle datasets of any size. It splits large datasets into chunks to ensure smooth performance.\"}},{\"@type\":\"Question\",\"name\":\"How do I save my diagrams?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"You can save your diagrams by creating an account and logging in. Your diagrams will be saved in your account and can be accessed from any device.\"}},{\"@type\":\"Question\",\"name\":\"Can I download ToDiagram to my computer?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes, you can download the app from the Editor \u003e Download App menu. This will download the Progressive Web App (PWA) version of ToDiagram to your computer, online access is still required.\"}},{\"@type\":\"Question\",\"name\":\"It doesn't support my data size. Can I get a refund?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"We're sorry to hear that you're experiencing issues with your data size. Please contact us at [email protected] and we'll do our best to help you.\"}},{\"@type\":\"Question\",\"name\":\"What features are on the product roadmap?\",\"acceptedA
29nswer\":{\"@type\":\"Answer\",\"text\":\"If you have any suggestions, we'd love to hear! Please send us an email at [email protected]\"}}]}2c:[\"$\",\"$L14\",null,{\"component\":\"section\",\"id\":\"faq\",\"className\":\"FAQSection_faq__nYYsw\",\"children\":[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$3c\"}}],[\"$\",\"$L17\",null,{\"size\":\"xl\",\"children\":[\"$\",\"$L14\",null,{\"className\":\"FAQSection_card__6OIUb\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"FAQSection_head__dFkX9\",\"children\":[[\"$\",\"h2\",null,{\"children\":\"Frequently asked questions\"}],[\"$\",\"p\",null,{\"children\":\"Answers about pricing, formats, data handling, and the editor.\"}]]}],[\"$\",\"$L3d\",null,{\"variant\":\"separated\",\"className\":\"FAQSection_list__wKgoU\",\"classNames\":{\"item\":\"FAQSection_item__nCb0q\",\"control\":\"FAQSection_control__OvHYD\",\"panel\":\"FAQSection_panel__aePid\"},\"children\":[[\"$\",\"$L3e\",\"What is ToDiagram?\",{\"value\":\"What is ToDiagram?\",\"children\":[[\"$\",\"$L3f\",null,{\"children\":\"What is ToDiagram?\"}],[\"$\",\"$L40\",null,{\"style\":{\"whiteSpace\":\"pre-wrap\"},\"children\":\"ToDiagram is an intuitive data editor that transforms JSON, CSV, YAML, and other structured data formats into interactive, easy-to-navigate diagrams. It helps users work with complex datasets visually, making it easier to understand, modify, and explore data relationships.\\n\\nInstead of getting stuck in raw code, you can quickly transform your data into diagrams and focus on understanding the information.\"}]]}],\"$L41\",\"$L42\",\"$L43\",\"$L44\",\"$L45\",\"$L46\",\"$L47\"]}],\"$L48\"]}]}]]}]\n4e:T518,M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z2d:[[\"$\",\"$L17\",null,{\"fluid\":true,\"style\":{\"background\":\"linear-gradient(180deg, #282828 0%, #1d1d1d 100%)\",\"borderTopRightRadius\":\"1.5em\",\"borderTopLeftRadius\":\"1.5em\"},\"children\":[\"$\",\"$L17\",null,{\"size\":\"xl\",\"py\":\"80\",\"children\":[\"$\",\"$L49\",null,{\"pos\":\"relative\",\"justify\":\"center\",\"align\":\"center\",\"py\":\"80\",\"px\":\"lg\",\"gap\":\"xl\",\"style\":{\"background\":\"rgba(133, 133, 133, 0.1)\",\"backgroundImage\":\"linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%)\",\"borderRadius\":\"1em\",\"border\":\"2px hsla(0,0%,100%,.102)\",\"boxShadow\":\"0 0 #0000,0 0 #0000,inset -1px -1px #98989855,inset 1px 1px #98989855\"},\"children\":[[\"$\",\"$L4a\",null,{\"order\":2,\"fz\":{\"base\":28,\"xs\":36,\"sm\":42},\"ta\":\"center\",\"children\":[[\"$\",\"$L19\",null,{\"component\":\"span\",\"fw\":\"800\",\"inherit\":true,\"c\":\"gray.3\",\"children\":[\"Get started with\",\" \"]}],[\"$\",\"$L19\",null,{\"variant\":\"gradient\",\"gradient\":{\"from\":\"#FF75B7\",\"to\":\"#FED761\"},\"component\":\"span\",\"fw\":\"800\",\"inherit\":true,\"ff\":\"'Mulish', 'Mulish Fallback'\",\"children\":\"ToDiagram\"}]]}],[\"$\",\"$L19\",null,{\"fz\":{\"base\":\"sm\",\"xs\":\"xl\"},\"c\":\"gray.5\",\"maw\":\"600\",\"fw\":\"300\",\"ta\":\"center\",\"children\":\"Experience the power of visualizing your data with ToDiagram. Start creating stunning diagrams today.\"}],[\"$\",\"$L31\",null,{\"href\":\"/editor\",\"radius\":\"lg\",\"size\":\"xl\",\"mb\":\"md\",\"w\":\"fit-content\",\"c\":\"black\",\"autoContrast\":true,\"variant\":\"gradient\",\"gradient\":{\"from\":\"#FF75B7\",\"to\":\"#FED761\"},\"leftSection\":[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 384 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"}
29,\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}],\"style\":{\"boxShadow\":\"rgba(0, 0, 0, 0.12) 0px -3px 0px 0px inset\",\"border\":\"none\"},\"children\":\"Start diagramming\"}]]}]}]}],[\"$\",\"$L17\",null,{\"bg\":\"#1D1D1D\",\"fluid\":true,\"style\":{\"borderTop\":\"1px solid #ffffff1a\"},\"children\":[\"$\",\"$L17\",null,{\"size\":\"xl\",\"py\":\"80\",\"children\":[[\"$\",\"$L4b\",null,{\"direction\":{\"base\":\"column\",\"xs\":\"row\"},\"gap\":\"xl\",\"justify\":\"space-between\",\"children\":[[\"$\",\"$L49\",null,{\"gap\":4,\"children\":[[\"$\",\"$L4c\",null,{\"href\":\"/\",\"aria-label\":\"ToDiagram\",\"children\":[\"$\",\"$L32\",null,{\"className\":\"Logo_dark__bEf5x\",\"alt\":\"ToDiagram Logo\",\"w\":\"auto\",\"fit\":\"contain\",\"loading\":\"eager\",\"fetchPriority\":\"high\",\"h\":\"36\"}]}],[\"$\",\"$L4c\",null,{\"href\":\"mailto:[email protected]\",\"fz\":\"xs\",\"c\":\"dimmed\",\"children\":\"[email protected]\"}],[\"$\",\"$L4b\",null,{\"mt\":\"md\",\"gap\":\"xs\",\"children\":[[\"$\",\"$L4c\",null,{\"aria-label\":\"LinkedIn\",\"href\":\"https://www.linkedin.com/company/todiagram\",\"target\":\"_blank\",\"rel\":\"noopener\",\"fz\":\"sm\",\"children\":[\"$\",\"$L4d\",null,{\"variant\":\"transparent\",\"color\":\"gray.6\",\"children\":[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 448 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":20,\"width\":20,\"xmlns\":\"http://www.w3.org/2000/svg\"}]}]}],[\"$\",\"$L4c\",null,{\"aria-label\":\"X\",\"fz\":\"sm\",\"href\":\"https://x.com/todiagram\",\"target\":\"_blank\",\"rel\":\"noopener\",\"children\":[\"$\",\"$L4d\",null,{\"variant\":\"transparent\",\"color\":\"gray.6\",\"children\":[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 512 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":20,\"width\":20,\"xmlns\":\"http://www.w3.org/2000/svg\"}]}]}],[\"$\",\"$L4c\",null,{\"aria-label\":\"GitHub\",\"href\":\"https://github.com/AykutSarac/jsoncrack.com\",\"target\":\"_blank\",\"rel\":\"noopener\",\"fz\":\"sm\",\"children\":[\"$\",\"$L4d\",null,{\"variant\":\"transparent\",\"color\":\"gray.6\",\"children\":[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 496 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"$4e\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":20,\"width\":20,\"xmlns\":\"http://www.w3.org/2000/svg\"}]}]}]]}]]}],\"$L4f\"]}],\"$L50\"]}]}]]\n"])</script>
29<script>self.__next_f.push([1,"51:I[13958,[\"494\",\"static/chunks/d02c7a31-e322443e20c627bf.js\",\"8767\",\"static/chunks/0561d147-3ec64437cf805414.js\",\"7251\",\"static/chunks/5a050a8f-cd8623a27597e2e1.js\",\"622\",\"static/chunks/622-4a598d9d2ab30471.js\",\"2054\",\"static/chunks/2054-eb0a1ea943438724.js\",\"7319\",\"static/chunks/7319-475076051c5d1085.js\",\"6011\",\"static/chunks/6011-00df3e0291da7b2a.js\",\"2024\",\"static/chunks/2024-219f8229477e3c4d.js\",\"6443\",\"static/chunks/6443-87ee0feb216f6e9b.js\",\"5451\",\"static/chunks/5451-7f0f3b80298deea0.js\",\"5800\",\"static/chunks/5800-176be018c6af6fcf.js\",\"814\",\"static/chunks/814-0429cee7303b5036.js\",\"5859\",\"static/chunks/app/(landing)/page-3c69e9398f12306d.js\"],\"SimpleGrid\"]\n52:I[20001,[\"494\",\"static/chunks/d02c7a31-e322443e20c627bf.js\",\"8767\",\"static/chunks/0561d147-3ec64437cf805414.js\",\"7251\",\"static/chunks/5a050a8f-cd8623a27597e2e1.js\",\"622\",\"static/chunks/622-4a598d9d2ab30471.js\",\"2054\",\"static/chunks/2054-eb0a1ea943438724.js\",\"7319\",\"static/chunks/7319-475076051c5d1085.js\",\"6011\",\"static/chunks/6011-00df3e0291da7b2a.js\",\"2024\",\"static/chunks/2024-219f8229477e3c4d.js\",\"6443\",\"static/chunks/6443-87ee0feb216f6e9b.js\",\"5451\",\"static/chunks/5451-7f0f3b80298deea0.js\",\"5800\",\"static/chunks/5800-176be018c6af6fcf.js\",\"814\",\"static/chunks/814-0429cee7303b5036.js\",\"5859\",\"static/chunks/app/(landing)/page-3c69e9398f12306d.js\"],\"AnchorLink\"]\n2f:[\"$\",\"$L14\",null,{\"className\":\"BentoGrid_feat__W4z5F BentoGrid_sm__hgkMv\",\"style\":{\"background\":\"color-mix(in oklch, var(--lv-peach) 14%, #fff)\"},\"children\":[[\"$\",\"span\",null,{\"className\":\"BentoGrid_badge__7RsZs\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"width\":7,\"height\":7,\"background\":\"var(--lv-coral)\",\"borderRadius\":\"50%\"}}],\" \",\"privacy\"]}],[\"$\",\"h3\",null,{\"children\":\"Your data stays in your browser.\"}],[\"$\",\"p\",null,{\"children\":\"Parsing and rendering happen entirely on your machine. Diagrams are only synced to the cloud when you choose to save or share â sensitive payloads stay sensitive.\"}]]}]\n33:[\"$\",\"h4\",null,{\"children\":\"Knows your repo.\"}]\n34:[\"$\",\"p\",null,{\"children\":\"The server reads files the agent already has access to â diagram any fixture, schema, or config on demand.\"}]\n35:[\"$\",\"$L14\",null,{\"className\":\"Mcp_benefit__7mnPz\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"Mcp_num__0yAih\",\"children\":\"03 · shareable\"}],[\"$\",\"h4\",null,{\"children\":\"Link \u0026 embed output.\"}],[\"$\",\"p\",null,{\"children\":\"Every generated diagram comes back as a live URL â drop it in a PR, doc, or Slack.\"}]]}]\n37:[\"$\",\"$L14\",null,{\"className\":\"SmallUses_ico__Q1yMN\",\"style\":{\"background\":\"color-mix(in oklch, var(--lv-coral) 30%, #fff)\",\"fontFamily\":\"'Geist Mono', 'Geist Mono Fallback'\"},\"children\":\"â¶\"}]\n38:[\"$\",\"h3\",null,{\"children\":\"Mermaid diagrams\"}]\n39:[\"$\",\"p\",null,{\"children\":\"Paste flowcharts, sequence, and state â render them cleanly.\"}]\n3a:[\"$\",\"span\",null,{\"className\":\"SmallUses_tag__zw7Hx\",\"style\":{\"fontFamily\":\"'Geist Mono', 'Geist Mono Fallback'\"},\"children\":\"for everyone\"}]\n3b:[\"$\",\"$L36\",\"Custom nodes \u0026 edges\",{\"href\":\"/custom-diagrams\",\"className\":\"SmallUses_chip__TvW0Q\",\"children\":[[\"$\",\"$L14\",null,{\"className\":\"SmallUses_ico__Q1yMN\",\"style\":{\"background\":\"color-mix(in oklch, var(--lv-lavender) 35%, #fff)\",\"fontFamily\":\"'Geist Mono', 'Geist Mono Fallback'\"},\"children\":\"â±\"}],[\"$\",\"h3\",null,{\"children\":\"Custom nodes \u0026 edges\"}],[\"$\",\"p\",null,{\"children\":\"Define your own nodes and edges for anything data-shaped.\"}],[\"$\",\"span\",null,{\"className\":\"SmallUses_tag__zw7Hx\",\"style\":{\"fontFamily\":\"'Geist Mono', 'Geist Mono Fallback'\"},\"children\":\"power users\"}]]}]\n41:[\"$\",\"$L3e\",\"Is my data secure?\",{\"value\":\"Is my data secure?\",\"children\":[[\"$\",\"$L3f\",null,{\"children\":\"Is my data secure?\"}],[\"$\",\"$L40\",null,{\"style\":{\"whiteSpace\":\"pre-wrap\"},\"children\":\"Yes. ToDiagram processes diagrams locally in your browser by default. If you explicitly choose server processing from the editor prompt for large diagrams, data is used only to compute layout and is not stored. Documents are stored only when you explicitly save them.\"}]]}]\n42:[\"$\",\"$L3e\",\"What data formats does ToDiagram support?\",{\"value\":\"What data formats does ToDiagram support?\",\"children\":[[\"$\",\"$L3f\",null,{\"children\":\"What data formats does ToDiagram support?\"}],[\"$\",\"$L40\",null,{\"style\":{\"whiteSpace\":\"pre-wrap\"},\"children\":\"ToDiagram currently supports JSON, CSV, YAML, and XML data formats.\"}]]}]\n43:[\"$\",\"$L3e\",\"What data size does ToDiagram support?\",{\"value\":\"What data size does ToDiagram support?\",\"children\":[[\"$\",\"$L3f\",null,{\"children\":\"What data size does ToDiagram support?\"}],[\"$\",\"$L40\",null,{\"style\":{\"whiteSpace\":\"pre-wrap\"},\"children\":\"ToDiagram can handle datasets of any size. It splits large datasets into chunks to ensure smooth performance.\"}]]}]\n44:[\"$\",\"$L3e\",\"How do I save my diagrams?\",{\"value\":\"How do I save my diagrams?\",\"children\":[[\"$\",\"$L3f\",null,{\"children\":\"How do I save my diagrams?\"}],[\"$\",\"$L40\",null,{\"style\":{\"whiteSpace\":\"pre-wrap\"},\"children\":\"You can save your diagrams by creating an account and logging in. Your diagrams will be saved in your account and can be accessed from any device.\"}]]}]\n45:[\"$\",\"$L3e\",\"Can I download ToDiagram to my computer?\",{\"value\":\"Can I download ToDiagram to my computer?\",\"children\":[[\"$\",\"$L3f\",null,{\"children\":\"Can I download ToDiagram to my computer?\"}],[\"$\",\"$L40\",null,{\"style\":{\"whiteSpace\":\"pre-wrap\"},\"children\":\"Yes, you can download the app from the Editor \u003e Download App menu. This will download the Progressive Web App (PWA) version of ToDiagram to your computer, online access is still required.\"}]]}]\n46:[\"$\",\"$L3e\",\"It doesn't support my data size. Can I get a refund?\",{\"value\":\"It doesn't support my data size. Can I get a refund?\",\"children\":[[\"$\",\"$L3f\",null,{\"children\":\"It doesn't support my data size. Can I get a refund?\"}],[\"$\",\"$L40\",null,{\"style\":{\"whiteSpace\":\"pre-wrap\"},\"children\":\"We're sorry to hear that you're experiencing issues with your data size. Please contact us at [email protected] and we'll do our best to help you.\"}]]}]\n47:[\"$\",\"$L3e\",\"What features are on the product roadmap?\",{\"value\":\"What features are on the product roadmap?\",\"children\":[[\"$\",\"$L3f\",null,{\"children\":\"What features are on the product roadmap?\"}],[\"$\",\"$L40\",null,{\"style\":{\"whiteSpace\":\"pre-wrap\"},\"children\":\"If you have any suggestions, we'd love to hear! Please send us an email at [email protected]\"}]]}]\n48:[\"$\",\"$L14\",null,{\"className\":\"FAQSection_footnote__q_cdg\",\"children\":[\"More questions?\",\" \",[\"$\",\"$L4c\",null,{\"inherit\":true,\"href\":\"mailto:[email protected]\",\"children\":\"Send us a message\"}],\".\"]}]\n4f:[\"$\",\"$L51\",null,{\"spacing\":60,\"cols\":{\"base\":2,\"sm\":4},\"children\":[[\"$\",\"$L49\",null,{\"gap\":\"xs\",\"children\":[[\"$\",\"$L19\",null,{\"fz\":\"sm\",\"fw\":600,\"c\":\"gray.4\",\"children\":\"Product\"}],[\"$\",\"$L52\",null,{\"prefetch\":false,\"fz\":\"sm\",\"c\":\"gray.6\",\"fw\":\"400\",\"href\":\"/features\",\"children\":\"Features\"}],[\"$\",\"$L52\",null,{\"prefetch\":false,\"fz\":\"sm\",\"c\":\"gray.6\",\"fw\":\"400\",\"href\":\"/pricing\",\"children\":\"Pricing\"}],[\"$\",\"$L52\",null,{\"prefetch\":false,\"fz\":\"sm\",\"c\":\"gray.6\",\"fw\":\"400\",\"href\":\"/teams\",\"children\":\"Teams\"}],[\"$\",\"$L52\",null,{\"prefetch\":false,\"fz\":\"sm\",\"c\":\"gray.6\",\"fw\":\"400\",\"href\":\"/chrome-extension\",\"children\":\"Chrome Extension\"}],[\"$\",\"$L52\",null,{\"prefetch\":false,\"fz\":\"sm\",\"c\":\"gray.6\",\"fw\":\"400\",\"href\":\"/ai-diagram-generator\",\"children\":\"AI Diagram Generator\"}],[\"$\",\"$L52\",null,{\"prefetch\":false,\"fz\":\"sm\",\"c\":\"gray.6\",\"fw\":\"400\",\"href\":\"/mcp\",\"children\":\"MCP Server\"}]]}],[\"$\",\"$L49\",null,{\"gap\":\"xs\",\"children\":[[\"$\",\"$L19\",null,{\"fz\":\"sm\",\"fw\":600,\"c\":\"gray.4\",\"children\":\"Data Formats\"}],[\"$\",\"$L52\",null,{\"prefetch\":false,\"fz\":\"sm\",\"c\":\"gray.6\",\"fw\":\"400\",\"href\":\"/json-editor-visualization\",\"children\":\"JSON Visualization\"}],[\"$\",\"$L52\",null,{\"prefetch\":false,\"fz\":\"sm\",\"c\":\"gray.6\",\"fw\":\"400\",\"href\":\"/xml-editor-visualization\",\"children\":\"XML Visualization\"}],[\"$\",\"$L52\",null,{\"prefetch\":false,\"fz\":\"sm\",\"c\":\"gray.6\",\"fw\":\"400\",\"href\":\"/csv-editor-visualization\",\"children\":\"CSV Visualization\"}],[\"$\",\"$L52\",null,{\"prefetch\":false,\"fz\":\"sm\",\"c\":\"gray.6\",\"fw\":\"400\",\"href\":\"/yaml-editor-visualization\",\"children\":\"YAML Visualization\"}],[\"$\",\"$L52\",null,{\"prefetch\":false,\"fz\":\"sm\",\"c\":\"gray.6\",\"fw\":\"400\",\"href\":\"/mermaid-editor-visualization\",\"children\":\"Mermaid Editor\"}],[\"$\",\"$L52\",null,{\"prefetch\":false,\"fz\":\"sm\",\"c\":\"gray.6\",\"fw\":\"400\",\"href\":\"/custom-diagrams\",\"children\":\"Custom Diagrams\"}]]}],[\"$\",\"$L49\",null,{\"gap\":\"xs\",\"children\":[[\"$\",\"$L19\",null,{\"fz\":\"sm\",\"fw\":600,\"c\":\"gray.4\",\"children\":\"Use Cases\"}],[\"$\",\"$L52\",null,{\"prefetch\":false,\"fz\":\"sm\",\"c\":\"gray.6\",\"fw\":\"400\",\"href\":\"/use-cases/api-design-and-documentation\",\"children\":\"API Documentation\"}],[\"$\",\"$L52\",null,{\"prefetch\":false,\"fz\":\"sm\",\"c\":\"gray.6\",\"fw\":\"400\",\"href\":\"/use-cases/json-schema-validation\",\"children\":\"JSON Schema\"}],[\"$\",\"$L52\",null,{\"prefetch\":false,\"fz\":\"sm\",\"c\":\"gray.6\",\"fw\":\"400\",\"href\":\"/use-cases/net
29work-diagrams\",\"children\":\"Network Diagrams\"}],[\"$\",\"$L52\",null,{\"prefetch\":false,\"fz\":\"sm\",\"c\":\"gray.6\",\"fw\":\"400\",\"href\":\"/use-cases/cicd-diagrams\",\"children\":\"CI/CD Diagrams\"}],[\"$\",\"$L52\",null,{\"prefetch\":false,\"fz\":\"sm\",\"c\":\"gray.6\",\"fw\":\"400\",\"href\":\"/use-cases/design-systems-and-tokens\",\"children\":\"Design Systems \u0026 Tokens\"}],[\"$\",\"$L52\",null,{\"prefetch\":false,\"fz\":\"sm\",\"c\":\"gray.6\",\"fw\":\"400\",\"href\":\"/use-cases/jsonld-schema-visualization\",\"children\":\"JSONâLD Visualization\"}]]}],[\"$\",\"$L49\",null,{\"gap\":\"xs\",\"children\":[[\"$\",\"$L19\",null,{\"fz\":\"sm\",\"fw\":600,\"c\":\"gray.4\",\"children\":\"Resources\"}],[\"$\",\"$L52\",null,{\"prefetch\":false,\"fz\":\"sm\",\"c\":\"gray.6\",\"fw\":\"400\",\"href\":\"/blog\",\"children\":\"Blog\"}],[\"$\",\"$L52\",null,{\"prefetch\":false,\"fz\":\"sm\",\"c\":\"gray.6\",\"fw\":\"400\",\"href\":\"/brand-assets\",\"children\":\"Brand Assets\"}],[\"$\",\"$L52\",null,{\"href\":\"/education\",\"prefetch\":false,\"fz\":\"sm\",\"c\":\"gray.6\",\"fw\":\"400\",\"children\":\"Education\"}]]}]]}]\n50:[\"$\",\"$L4b\",null,{\"gap\":\"xl\",\"wrap\":\"wrap\",\"mt\":\"xl\",\"children\":[[\"$\",\"$L19\",null,{\"fz\":\"sm\",\"c\":\"dimmed\",\"children\":[\"© \",2026,\" todiagram.com\"]}],[\"$\",\"$L52\",null,{\"prefetch\":false,\"fz\":\"sm\",\"c\":\"dimmed\",\"href\":\"/legal/terms\",\"children\":[\"$\",\"$L19\",null,{\"fz\":\"sm\",\"c\":\"dimmed\",\"children\":\"Terms\"}]}],[\"$\",\"$L52\",null,{\"prefetch\":false,\"fz\":\"sm\",\"c\":\"dimmed\",\"href\":\"/legal/privacy\",\"children\":[\"$\",\"$L19\",null,{\"fz\":\"sm\",\"c\":\"dimmed\",\"children\":\"Privacy\"}]}]]}]\n"])</script>
29<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"8bed4596227c443fbb9646ba149e41c1","r":1,"spa":2}' crossorigin="anonymous"></script>
29 30</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.