{"id":1345,"date":"2026-07-27T02:17:47","date_gmt":"2026-07-27T02:17:47","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/docs\/uncategorized\/echarts-playbook\/graph-chart-network-topology-and-relationship-mapping\/"},"modified":"2026-07-29T08:51:10","modified_gmt":"2026-07-29T08:51:10","slug":"graph-chart-network-topology-and-relationship-mapping-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/echarts-playbook\/graph-chart-network-topology-and-relationship-mapping-guide\/","title":{"rendered":"Graph Chart: Network Topology and Relationship Mapping"},"content":{"rendered":"

When mapping interconnected networks, structural hierarchies, or complex entity relationships, the Graph Chart<\/strong> (or Network Graph) is the ideal visual framework. By displaying items as nodes and connections as directed or undirected links, graph charts allow users to explore clusters, dependency trees, and relational flows<\/em> that standard tabular charts cannot convey\u2014such as microservice architectures, social network interactions, or knowledge graphs.<\/p>\n

The Mechanics of Graph Charts<\/h2>\n

In Apache ECharts, graph charts use type: 'graph'<\/code>. Instead of mapping numeric values directly to horizontal and vertical axis coordinates, a graph chart takes a collection of explicit nodes<\/code> (or data<\/code>) and links<\/code> (or edges<\/code>). ECharts then arranges these nodes using fixed coordinate placements, circular layouts, or a dynamic force-directed physics engine.<\/p>\n

1. Essential Setup<\/h3>\n

To build a basic network graph using force-directed physics, declare your nodes inside data<\/code>, map connections inside links<\/code>, and set layout: 'force'<\/code>:<\/p>\n

\r\n
\r\n ECharts<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit ECharts in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
option = {\r\n    tooltip: {},\r\n    legend: {\r\n        data: ['Services', 'Databases']\r\n    },\r\n    series: [\r\n        {\r\n            name: 'System Network',\r\n            type: 'graph',\r\n            layout: 'force',\r\n            roam: true, \/\/ Allows zooming and panning\r\n            label: {\r\n                show: true,\r\n                position: 'right'\r\n            },\r\n            force: {\r\n                repulsion: 100,\r\n                edgeLength: 80\r\n            },\r\n            data: [\r\n                { id: '0', name: 'API Gateway', symbolSize: 30, category: 0 },\r\n                { id: '1', name: 'Auth Service', symbolSize: 20, category: 0 },\r\n                { id: '2', name: 'Order Service', symbolSize: 20, category: 0 },\r\n                { id: '3', name: 'User DB', symbolSize: 25, category: 1 },\r\n                { id: '4', name: 'Order DB', symbolSize: 25, category: 1 }\r\n            ],\r\n            links: [\r\n                { source: '0', target: '1' },\r\n                { source: '0', target: '2' },\r\n                { source: '1', target: '3' },\r\n                { source: '2', target: '4' }\r\n            ],\r\n            categories: [\r\n                { name: 'Services' },\r\n                { name: 'Databases' }\r\n            ]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n
\"\"<\/p>\n
 <\/p>\n
Advanced Structural Techniques<\/h2>\n
Graph charts support alternative layout engines like circular ring alignment or directed arrows to show data dependencies clearly.<\/p>\n
1. Circular Layout with Directed Link Arrows<\/h3>\n
Set layout: 'circular'<\/code> to organize nodes in a clean ring structure, and enable edge arrows to show directional relationships between components:<\/p>\n            
\r\n                                
\r\n                    ECharts<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
option = {\r\n    tooltip: {},\r\n    series: [\r\n        {\r\n            type: 'graph',\r\n            layout: 'circular',\r\n            roam: true,\r\n            label: {\r\n                show: true,\r\n                position: 'outside'\r\n            },\r\n            edgeSymbol: ['none', 'arrow'], \/\/ Draw arrows on link endpoints\r\n            edgeSymbolSize: [0, 8],\r\n            data: [\r\n                { id: 'A', name: 'Node A', symbolSize: 24 },\r\n                { id: 'B', name: 'Node B', symbolSize: 24 },\r\n                { id: 'C', name: 'Node C', symbolSize: 24 },\r\n                { id: 'D', name: 'Node D', symbolSize: 24 },\r\n                { id: 'E', name: 'Node E', symbolSize: 24 }\r\n            ],\r\n            links: [\r\n                { source: 'A', target: 'B' },\r\n                { source: 'B', target: 'C' },\r\n                { source: 'C', target: 'D' },\r\n                { source: 'D', target: 'E' },\r\n                { source: 'E', target: 'A' },\r\n                { source: 'A', target: 'C' }\r\n            ],\r\n            lineStyle: {\r\n                color: '#5470c6',\r\n                width: 2,\r\n                curveness: 0.2 \/\/ Curve connection lines to avoid overlap\r\n            }\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n
\"\"<\/p>\n
 <\/p>\n
Fine-Tuning Layout and Node Styling<\/h2>\n
Adjusting edge curvature, node border shadows, and interaction options keeps dense network clusters readable on interactive web pages.<\/p>\n
1. Custom Node Category Colors and Force Physics<\/h3>\n
Tweak repulsion values and line styles to create structured, visually separated clusters:<\/p>\n            
\r\n                                
\r\n                    ECharts<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
option = {\r\n    legend: {\r\n        top: '5%',\r\n        left: 'center'\r\n    },\r\n    series: [\r\n        {\r\n            type: 'graph',\r\n            layout: 'force',\r\n            roam: true,\r\n            draggable: true,\r\n            force: {\r\n                repulsion: 250,\r\n                gravity: 0.1,\r\n                edgeLength: [50, 100]\r\n            },\r\n            categories: [\r\n                { name: 'Frontend', itemStyle: { color: '#5470c6' } },\r\n                { name: 'Backend', itemStyle: { color: '#91cc75' } },\r\n                { name: 'Infrastructure', itemStyle: { color: '#fac858' } }\r\n            ],\r\n            data: [\r\n                { name: 'Web App', category: 0, symbolSize: 32 },\r\n                { name: 'Mobile App', category: 0, symbolSize: 28 },\r\n                { name: 'API Gateway', category: 1, symbolSize: 26 },\r\n                { name: 'Microservice A', category: 1, symbolSize: 22 },\r\n                { name: 'Microservice B', category: 1, symbolSize: 22 },\r\n                { name: 'Redis Cache', category: 2, symbolSize: 20 },\r\n                { name: 'PostgreSQL', category: 2, symbolSize: 24 }\r\n            ],\r\n            links: [\r\n                { source: 'Web App', target: 'API Gateway' },\r\n                { source: 'Mobile App', target: 'API Gateway' },\r\n                { source: 'API Gateway', target: 'Microservice A' },\r\n                { source: 'API Gateway', target: 'Microservice B' },\r\n                { source: 'Microservice A', target: 'Redis Cache' },\r\n                { source: 'Microservice B', target: 'PostgreSQL' }\r\n            ],\r\n            lineStyle: {\r\n                color: 'source', \/\/ Color edge based on source node color\r\n                width: 2,\r\n                curveness: 0.1\r\n            }\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n
\"\"<\/p>\n
 <\/p>\n
Strategic Best Practices<\/h2>\n
    \n
  • Enable roam: true<\/code> for Navigation:<\/strong> Interactive networks grow quickly. Enabling zoom and pan navigation lets users focus on specific clusters without feeling cramped.<\/li>\n
  • Apply curveness<\/code> to Edges:<\/strong> Setting a slight curvature (e.g., lineStyle.curveness: 0.1<\/code> to 0.2<\/code>) prevents bidirectional links between two identical nodes from overlapping into a single line.<\/li>\n
  • Balance Force Physics Repulsion:<\/strong> Tune force.repulsion<\/code> carefully. Values that are too low will cause nodes to overlap into a dense cluster, while values that are too high will push nodes completely off the visible canvas.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    When mapping interconnected networks, structural hierarchies, or complex entity relationships, the Graph Chart (or Network Graph) is the ideal visual framework. By displaying items as nodes and connections as directed or undirected links, graph charts allow users to explore clusters,…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1254,"menu_order":16,"template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"ld_collection":[14],"class_list":["post-1345","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nECharts Graph Chart Guide | VPasCode Text to Diagram Tool<\/title>\n<meta name=\"description\" content=\"Map complex node-edge relationship networks with ECharts graph charts in VPasCode, a diagram-as-code tool.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/echarts-playbook\/graph-chart-network-topology-and-relationship-mapping-guide\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Graph Chart Guide | VPasCode Text to Diagram Tool\" \/>\n<meta property=\"og:description\" content=\"Map complex node-edge relationship networks with ECharts graph charts in VPasCode, a diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/echarts-playbook\/graph-chart-network-topology-and-relationship-mapping-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-29T08:51:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/07\/Screenshot-2026-07-27-at-10.20.29-AM.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/graph-chart-network-topology-and-relationship-mapping-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/graph-chart-network-topology-and-relationship-mapping-guide\\\/\",\"name\":\"ECharts Graph Chart Guide | VPasCode Text to Diagram Tool\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/graph-chart-network-topology-and-relationship-mapping-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/graph-chart-network-topology-and-relationship-mapping-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/07\\\/Screenshot-2026-07-27-at-10.20.29-AM.png\",\"datePublished\":\"2026-07-27T02:17:47+00:00\",\"dateModified\":\"2026-07-29T08:51:10+00:00\",\"description\":\"Map complex node-edge relationship networks with ECharts graph charts in VPasCode, a diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/graph-chart-network-topology-and-relationship-mapping-guide\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/graph-chart-network-topology-and-relationship-mapping-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/graph-chart-network-topology-and-relationship-mapping-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/07\\\/Screenshot-2026-07-27-at-10.20.29-AM.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/07\\\/Screenshot-2026-07-27-at-10.20.29-AM.png\",\"width\":447,\"height\":412},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/graph-chart-network-topology-and-relationship-mapping-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"ECharts Playbook\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Graph Chart: Network Topology and Relationship Mapping\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ECharts Graph Chart Guide | VPasCode Text to Diagram Tool","description":"Map complex node-edge relationship networks with ECharts graph charts in VPasCode, a diagram-as-code tool.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/echarts-playbook\/graph-chart-network-topology-and-relationship-mapping-guide\/","og_locale":"id_ID","og_type":"article","og_title":"ECharts Graph Chart Guide | VPasCode Text to Diagram Tool","og_description":"Map complex node-edge relationship networks with ECharts graph charts in VPasCode, a diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/echarts-playbook\/graph-chart-network-topology-and-relationship-mapping-guide\/","og_site_name":"VPasCode","article_modified_time":"2026-07-29T08:51:10+00:00","og_image":[{"url":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/07\/Screenshot-2026-07-27-at-10.20.29-AM.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Estimasi waktu membaca":"2 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/echarts-playbook\/graph-chart-network-topology-and-relationship-mapping-guide\/","url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/echarts-playbook\/graph-chart-network-topology-and-relationship-mapping-guide\/","name":"ECharts Graph Chart Guide | VPasCode Text to Diagram Tool","isPartOf":{"@id":"https:\/\/www.vpascode.com\/id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/echarts-playbook\/graph-chart-network-topology-and-relationship-mapping-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/echarts-playbook\/graph-chart-network-topology-and-relationship-mapping-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/07\/Screenshot-2026-07-27-at-10.20.29-AM.png","datePublished":"2026-07-27T02:17:47+00:00","dateModified":"2026-07-29T08:51:10+00:00","description":"Map complex node-edge relationship networks with ECharts graph charts in VPasCode, a diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/echarts-playbook\/graph-chart-network-topology-and-relationship-mapping-guide\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/echarts-playbook\/graph-chart-network-topology-and-relationship-mapping-guide\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/echarts-playbook\/graph-chart-network-topology-and-relationship-mapping-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/07\/Screenshot-2026-07-27-at-10.20.29-AM.png","contentUrl":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/07\/Screenshot-2026-07-27-at-10.20.29-AM.png","width":447,"height":412},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/echarts-playbook\/graph-chart-network-topology-and-relationship-mapping-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/id\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/id\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"ECharts Playbook","item":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/echarts-playbook\/"},{"@type":"ListItem","position":4,"name":"Graph Chart: Network Topology and Relationship Mapping"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/id\/#website","url":"https:\/\/www.vpascode.com\/id\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/id\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/id\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/id\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_docs\/1345","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/users\/3"}],"up":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_docs\/1254"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/media?parent=1345"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_collection?post=1345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}