{"id":923,"date":"2026-07-07T07:02:01","date_gmt":"2026-07-07T07:02:01","guid":{"rendered":"https:\/\/www.vpascode.com\/ja\/docs\/uncategorized\/mermaid-js-playbook\/mermaid-js-sankey-diagram-syntax-configuration-guide\/"},"modified":"2026-07-30T01:23:45","modified_gmt":"2026-07-30T01:23:45","slug":"mermaid-js-sankey-diagram-syntax-configuration-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/ja\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","title":{"rendered":"Mermaid.js Sankey Diagram Syntax & Configuration Guide"},"content":{"rendered":"

Sankey diagrams are highly effective visualization tools used to depict the directional flow of quantities between distinct nodes within a system. By scaling the physical width of the connecting links proportionally to the numeric flow volume, they allow engineers, analysts, and operations teams to instantly spot major contributors, resource allocations, inefficiencies, or leaks within complex networks like energy grids, supply chains, and financial portfolios.<\/p>\n

Basic Syntax Structure<\/h2>\n

Sankey layout definitions are built upon an optimized, 3-column CSV (Comma-Separated Values) structural format. Every file begins with either the sankey<\/code> or sankey-beta<\/code> type declaration header, followed by individual flow lines tracking a strict Source,Target,Value<\/code> pattern.<\/p>\n

\r\n
\r\n Mermaid<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Mermaid in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
sankey\r\nSource Node,Destination Target,150.50\r\nDestination Target,Final Output Node,90.25<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n
\"\"<\/p>\n
Syntax Reference<\/h2>\n
The table below breaks down the primary data rules and parameters required to parse a Sankey chart correctly in Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n\n
Syntax Element<\/th>\nType Requirement<\/th>\nDescription & Usage Rules<\/th>\n<\/tr>\n<\/thead>\n
Declaration<\/strong><\/td>\nKeyword Identifier<\/td>\nInitializes the stream rendering layout engine. Accepts sankey<\/code> or the backwards-compatible sankey-beta<\/code> string.<\/td>\n<\/tr>\n
Source Node<\/strong><\/td>\nString Label<\/td>\nThe originating category where the resource flow starts. case-sensitive identifier.<\/td>\n<\/tr>\n
Target Node<\/strong><\/td>\nString Label<\/td>\nThe recipient node where the specific link volume terminates.<\/td>\n<\/tr>\n
Value<\/strong><\/td>\nPositive Float \/ Integer<\/td>\nThe numeric weight of the flow. The thickness of the rendered path is directly calculated relative to this value.<\/td>\n<\/tr>\n
Comment Line<\/strong><\/td>\nSyntax Indicator<\/td>\nAny text preceded by a double percentage sign (%%<\/code>) is ignored by the compiler, allowing for clean data annotations.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
Handling Specialized Characters in Node Labels<\/h2>\n
Because commas and quotation marks serve as structural system delimiters within the layout engine, specialized naming inputs require specific escaping techniques to ensure they display properly on the frontend canvas.<\/p>\n
1. Commas in Names<\/h3>\n
If a specific node label requires a literal comma, wrap the entire node string container within a pair of standard double quotation marks:<\/p>\n            
\r\n                                
\r\n                    Mermaid<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
sankey\r\nBudget Pool,\"Operations, Payroll & Admin\",45000<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n
\"\"<\/p>\n
2. Quotation Marks in Names<\/h3>\n
To explicitly render double quotes inside a label name, wrap the overall parameter in outer quotes, and use a duplicated pair of double quotes (\"\"<\/code>) inside the target value string:<\/p>\n            
\r\n                                
\r\n                    Mermaid<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
sankey\r\nServer Clusters,\"Internal \"\"Edge\"\" Node\",850<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n
\"\"<\/p>\n
\n
Advanced Theme Configuration (Directives)<\/h2>\n
You can fine-tune your diagram’s presentation by passing an frontmatter configuration block at the top of your document snippet. This allows you to control link styles, layout padding, text styles, and element alignments directly from your raw text editor.<\/p>\n
Sankey Configuration Attribute Matrix<\/h3>\n\n\n\n\n\n\n\n\n\n\n
Property Name<\/th>\nAccepted Values<\/th>\nVisual Result<\/th>\n<\/tr>\n<\/thead>\n
showValues<\/code><\/td>\ntrue<\/code> | false<\/code><\/td>\nToggles whether the numeric flow value text prints directly inside the node label boxes.<\/td>\n<\/tr>\n
linkColor<\/code><\/td>\n'source'<\/code> | 'target'<\/code> | 'gradient'<\/code> | '#hex'<\/code><\/td>\nDetermines link paths color mapping. 'gradient'<\/code> blends colors smoothly between connecting entities.<\/td>\n<\/tr>\n
nodeAlignment<\/code><\/td>\n'justify'<\/code> | 'left'<\/code> | 'right'<\/code> | 'center'<\/code><\/td>\nAligns structural columns across the canvas space grid.<\/td>\n<\/tr>\n
labelStyle<\/code><\/td>\n'legacy'<\/code> | 'outlined'<\/code><\/td>\n'outlined'<\/code> adds a background stroke mask behind text to guarantee high scannability over complex layouts.<\/td>\n<\/tr>\n
nodeWidth<\/code><\/td>\nInteger (Pixels)<\/td>\nSets the width of the node rectangles (Default: 10<\/code>).<\/td>\n<\/tr>\n
nodePadding<\/code><\/td>\nInteger (Pixels)<\/td>\nSets vertical separation spacing parameters between stacked rows (Default: 12<\/code>).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
Real-World Blueprint: Clean Energy Grid Distribution<\/h2>\n
This comprehensive blueprint tracks an infrastructure power grid management system. It showcases frontmatter configurations\u2014setting smooth link color gradients, outline typography styles, and disabling inline metric counts\u2014paired with a multi-tiered layout structure.<\/p>\n            
\r\n                                
\r\n                    Mermaid<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
---\r\nconfig:\r\n  sankey:\r\n    showValues: false\r\n    linkColor: 'gradient'\r\n    nodeAlignment: 'justify'\r\n    labelStyle: 'outlined'\r\n    nodeWidth: 15\r\n    nodePadding: 18\r\n---\r\nsankey\r\n%% Source Data Rows\r\nSolar Farm,Power Storage Grid,120.50\r\nWind Turbines,Power Storage Grid,180.75\r\nHydroelectric Dam,Direct Industrial Line,210.00\r\nBiofuel Imports,Thermal Backup Station,45.25\r\n\r\n%% Distribution Nodes\r\nPower Storage Grid,Residential Consumer Lines,145.00\r\nPower Storage Grid,Direct Industrial Line,110.25\r\nPower Storage Grid,System Losses & Dissipation,46.00\r\n\r\n%% Final Delivery Termination Nodes\r\nDirect Industrial Line,Heavy Manufacturing Hub,295.00\r\nDirect Industrial Line,Commercial Retail Sectors,25.25\r\nThermal Backup Station,Commercial Retail Sectors,45.25<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n
\"\"<\/p>\n
\n
Common Syntax Pitfalls & System Constraints<\/h2>\n
When compiling highly dense data arrays, a few subtle configuration errors will trigger layout parsing breaks. Keep these troubleshooting rules in mind:<\/p>\n
    \n
  • Exact Column Verification:<\/strong> Every single item line following the main header declaration must contain precisely three comma-separated parameters. Adding a fourth column or missing a value weight will completely halt diagram compilation.<\/li>\n
  • Empty Line Allowances:<\/strong> Unlike traditional rigid data parsing rules, Mermaid allows you to add empty, clean lines inside the code block to logically separate different tiers or processing phases of your model data.<\/li>\n
  • Circular Loop Blocks:<\/strong> Sankey structures are designed strictly around Directed Acyclic Graphs (DAGs). If you connect Node A to Node B, and then attempt to write a row path connecting Node B back into Node A, the layout engine math will experience a feedback break and error out.<\/li>\n
  • Value Data Constraints:<\/strong> Value fields can only parse positive numbers. Negative values or raw alphabetic characters cannot be rendered into width parameters.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Sankey diagrams are highly effective vis…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":48,"menu_order":15,"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-923","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nMermaid Sankey Diagram | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Track resource distribution and data volume flows using Mermaid Sankey diagrams 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\/ja\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-sankey-diagram-syntax-configuration-guide\/\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Sankey Diagram | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/ja\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-sankey-diagram-syntax-configuration-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-30T01:23:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/07\/img_6a4ca539ea639.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data1\" content=\"4\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/\",\"name\":\"Mermaid Sankey Diagram | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2026\\\/07\\\/img_6a4ca539ea639.png\",\"datePublished\":\"2026-07-07T07:02:01+00:00\",\"dateModified\":\"2026-07-30T01:23:45+00:00\",\"description\":\"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2026\\\/07\\\/img_6a4ca539ea639.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2026\\\/07\\\/img_6a4ca539ea639.png\",\"width\":600,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-sankey-diagram-syntax-configuration-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Mermaid.js Playbook\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Mermaid.js Sankey Diagram Syntax & Configuration Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ja\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mermaid Sankey Diagram | VPasCode Text to Diagram Guide","description":"Track resource distribution and data volume flows using Mermaid Sankey diagrams 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\/ja\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","og_locale":"ja_JP","og_type":"article","og_title":"Mermaid Sankey Diagram | VPasCode Text to Diagram Guide","og_description":"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/ja\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","og_site_name":"VPasCode","article_modified_time":"2026-07-30T01:23:45+00:00","og_image":[{"url":"https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/07\/img_6a4ca539ea639.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"4\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/ja\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","url":"https:\/\/www.vpascode.com\/ja\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-sankey-diagram-syntax-configuration-guide\/","name":"Mermaid Sankey Diagram | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/ja\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/ja\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/ja\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/07\/img_6a4ca539ea639.png","datePublished":"2026-07-07T07:02:01+00:00","dateModified":"2026-07-30T01:23:45+00:00","description":"Track resource distribution and data volume flows using Mermaid Sankey diagrams in VPasCode, a diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/ja\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/ja\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-sankey-diagram-syntax-configuration-guide\/"]}]},{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/www.vpascode.com\/ja\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/07\/img_6a4ca539ea639.png","contentUrl":"https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/07\/img_6a4ca539ea639.png","width":600,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/ja\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-sankey-diagram-syntax-configuration-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/ja\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/ja\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Mermaid.js Playbook","item":"https:\/\/www.vpascode.com\/ja\/docs\/vpascode-docs\/mermaid-js-playbook\/"},{"@type":"ListItem","position":4,"name":"Mermaid.js Sankey Diagram Syntax & Configuration Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/ja\/#website","url":"https:\/\/www.vpascode.com\/ja\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/ja\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/ja\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ja"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/ja\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/ja\/","logo":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/www.vpascode.com\/ja\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/ja\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/ja\/wp-json\/wp\/v2\/ld_docs\/923","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/ja\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/ja\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/ja\/wp-json\/wp\/v2\/users\/3"}],"up":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/ja\/wp-json\/wp\/v2\/ld_docs\/48"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/ja\/wp-json\/wp\/v2\/media?parent=923"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/ja\/wp-json\/wp\/v2\/ld_collection?post=923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}