{"id":960,"date":"2026-07-08T06:20:18","date_gmt":"2026-07-08T06:20:18","guid":{"rendered":"https:\/\/www.vpascode.com\/in\/docs\/uncategorized\/mermaid-js-playbook\/mermaid-js-block-diagram-syntax-grid-layout-guide\/"},"modified":"2026-07-29T08:36:19","modified_gmt":"2026-07-29T08:36:19","slug":"mermaid-js-block-diagram-syntax-grid-layout-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/in\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-block-diagram-syntax-grid-layout-guide\/","title":{"rendered":"Mermaid.js Block Diagram Syntax &#038; Grid Layout Guide"},"content":{"rendered":"<p>A Block Diagram is a structured layout engine used to represent complex software architectures, hardware platforms, or organizational models. Introduced natively in Mermaid.js, the <code>block<\/code> engine treats the layout canvas as an absolute mathematical grid matrix. This provides precise control over column alignments, isolated layout nesting boundaries, structural spacing blocks, and explicit edge port linking configurations.<\/p>\n<h2>Understanding the Grid Matrix Strategy<\/h2>\n<p>Unlike standard free-form flowcharts that dynamically guess layout tracks, a Block diagram builds on a rigid linear coordinate grid system:<\/p>\n<ul>\n<li><strong>The Column Threshold:<\/strong> You set a strict horizontal ceiling using the <code>columns<\/code> modifier. When the grid fills up with blocks, additional elements wrap cleanly to the next row automatically.<\/li>\n<li><strong>Sizing by Grid Fields:<\/strong> By default, each block occupies a single coordinate slot ($1 \\times 1$). You can change this behavior by assigning explicit column widths to span elements across multiple tracks perfectly.<\/li>\n<\/ul>\n<h2>Basic Syntax Structure<\/h2>\n<p>Every layout begins with the <code>block<\/code> declaration header. It is followed by establishing the row width capacity with the <code>columns<\/code> keyword, and declaring blocks on sequential lines.<\/p>\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjCGcHIL8vNS80oco5XcMouKSxScQOqUYlEknaKVfDNTUnJSsco6RysFZaZnwLUCABGuImU=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code data-language=\"mermaid\" class=\"language-mermaid\">block\r\n  columns 3\r\n  componentA[\"First Block\"]\r\n  componentB[\"Middle Block\"]\r\n  componentC[\"Right Block\"]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjCGcHIL8vNS80oco5XcMouKSxScQOqUYlEknaKVfDNTUnJSsco6RysFZaZnwLUCABGuImU=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<p id=\"MVMmAKu\"><img decoding=\"async\" width=\"321\" height=\"42\" class=\"alignnone size-full wp-image-966 \" src=\"https:\/\/www.vpascode.com\/in\/wp-content\/uploads\/sites\/13\/2026\/07\/img_6a4ded6cdf466.png\" alt=\"\" srcset=\"https:\/\/www.vpascode.com\/in\/wp-content\/uploads\/sites\/13\/2026\/07\/img_6a4ded6cdf466.png 321w, https:\/\/www.vpascode.com\/in\/wp-content\/uploads\/sites\/13\/2026\/07\/img_6a4ded6cdf466-300x39.png 300w\" sizes=\"(max-width: 321px) 100vw, 321px\" \/><\/p>\n<h2>Syntax Reference<\/h2>\n<p>The table below breaks down the foundational data parameters, custom styling keywords, and structural containers natively recognized by the block interpreter.<\/p>\n<table border=\"1\" cellspacing=\"0\" cellpadding=\"5\">\n<thead>\n<tr>\n<th>Syntax Component<\/th>\n<th>Type Requirement<\/th>\n<th>Description &amp; Visual Layout Rules<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Declaration<\/strong><\/td>\n<td>Keyword Identifier<\/td>\n<td>Initializes the matrix grid block canvas. Must use the exact <code>block<\/code> header string.<\/td>\n<\/tr>\n<tr>\n<td><strong>Column Set<\/strong><\/td>\n<td>Keyword + Integer<\/td>\n<td>Defines the total horizontal slot count before wrapping rows (e.g., <code>columns 4<\/code>).<\/td>\n<\/tr>\n<tr>\n<td><strong>Standard Block<\/strong><\/td>\n<td>ID + Optional Label<\/td>\n<td>Creates a standard data box: <code>id[\"Label Text\"]<\/code>. Shape decorators match flowchart syntax (e.g., <code>(())<\/code> for circles, <code>[()]<\/code> for databases).<\/td>\n<\/tr>\n<tr>\n<td><strong>Block Dimension Override<\/strong><\/td>\n<td>Colon Parameter Block<\/td>\n<td>Overrides the default $1 \\times 1$ layout scale grid footprint by explicitly assigning customized column width blocks: <code>id:width<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Space Element<\/strong><\/td>\n<td>Reserved Keyword<\/td>\n<td>Inserts an invisible, structural $1 \\times 1$ blank spacing tile into the active row using the exact <code>space<\/code> keyword. You can multiply width spans inline like <code>space:2<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Block Arrow<\/strong><\/td>\n<td>Specialized Entity ID<\/td>\n<td>Renders a thick, structured transitional arrow box inside a grid slot: <code>arrowId&lt;[\"Label\"]&gt;(direction)<\/code>. Directions include <code>up<\/code>, <code>down<\/code>, <code>left<\/code>, <code>right<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Composite Wrapper<\/strong><\/td>\n<td>Block \/ End Container<\/td>\n<td>Nests a standalone isolated sub-grid matrix directly inside a parent block slot: <code>block:SubID ... end<\/code>. Sub-blocks can declare their own independent column limits.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h2>Advanced Feature: Explicit Block Dimensions &amp; Space Modifiers<\/h2>\n<p>For asymmetry layouts, you can pass explicit horizontal size metrics directly onto standard blocks or space dividers using a colon notation separator (<code>:width<\/code>). This forces elements to stretch over multiple grid positions cleanly.<\/p>\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjABccozU1Kd83ML8vNS80qilcKBXAWXxOKMpPzEohQFj9TElNQipVgrsNqc1LQSp8SiaKVgoKqkRKC4QnFBYnKqlZFCUWZ6BkTONzEzTyEgMS81RykWAHJPJbg=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code data-language=\"mermaid\" class=\"language-mermaid\">block\r\n  columns 4\r\n  wideComponent[\"Wide Dashboard Header\"]:4\r\n  leftBar[\"Sidebar\"] space:2 rightBar[\"Main Panel\"]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjABccozU1Kd83ML8vNS80qilcKBXAWXxOKMpPzEohQFj9TElNQipVgrsNqc1LQSp8SiaKVgoKqkRKC4QnFBYnKqlZFCUWZ6BkTONzEzTyEgMS81RykWAHJPJbg=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<p id=\"ZuoRoRz\"><img decoding=\"async\" width=\"372\" height=\"82\" class=\"alignnone size-full wp-image-967 \" src=\"https:\/\/www.vpascode.com\/in\/wp-content\/uploads\/sites\/13\/2026\/07\/img_6a4ded784d18a.png\" alt=\"\" srcset=\"https:\/\/www.vpascode.com\/in\/wp-content\/uploads\/sites\/13\/2026\/07\/img_6a4ded784d18a.png 372w, https:\/\/www.vpascode.com\/in\/wp-content\/uploads\/sites\/13\/2026\/07\/img_6a4ded784d18a-300x66.png 300w\" sizes=\"(max-width: 372px) 100vw, 372px\" \/><\/p>\n<hr \/>\n<h2>Advanced Feature: Edge Types, Directions, and Link Options<\/h2>\n<p>Connections within the <code>block<\/code> engine are divided into standard semantic lines and structural layout block arrows. Standard connection lines support specifying explicit directional constraints to dictate how lines wrap around elements.<\/p>\n<h3>1. Standard Line Connectors<\/h3>\n<p>Block connections use the standard link operators (<code>--&gt;<\/code>, <code>--<\/code>, <code>&lt;--&gt;<\/code>). However, you can control the routing by appending directions or modifiers inside parenthesis:<\/p>\n<ul>\n<li><code>A --&gt; B<\/code> : Draws a standard directional line from element A to element B.<\/li>\n<li><code>A -- x B<\/code> : Draws a connection path terminated by an &#8220;X&#8221; mark indicating a blocked path.<\/li>\n<li><code>A -- o B<\/code> : Draws a connection path terminated with an open circle connector dot.<\/li>\n<\/ul>\n<h3>2. Dynamic Layout Block Arrows<\/h3>\n<p>Block arrows are treated as actual layout components that occupy an actual coordinate index block in your row budget matrix. They use greater-than and less-than syntax properties to map physical flow paths:<\/p>\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjAGcQqK8lNKk1OLopVcEksSFQKgXKVYkGRuZopjUVF+uU20UkhRYl5xWn5RrgKQlZaWmawUa6dRlJmeUaIJMTOvuDQXbowzlKsUCwDgCicN\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code data-language=\"mermaid\" class=\"language-mermaid\">block\r\n  columns 3\r\n  producer[\"Data Producer\"]\r\n  midArrow&lt;[\"Transform Traffic\"]&gt;(right)\r\n  consumer[\"Data Consumer\"]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjAGcQqK8lNKk1OLopVcEksSFQKgXKVYkGRuZopjUVF+uU20UkhRYl5xWn5RrgKQlZaWmawUa6dRlJmeUaIJMTOvuDQXbowzlKsUCwDgCicN\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<p id=\"uiUqlGG\"><img decoding=\"async\" width=\"477\" height=\"50\" class=\"alignnone size-full wp-image-968 \" src=\"https:\/\/www.vpascode.com\/in\/wp-content\/uploads\/sites\/13\/2026\/07\/img_6a4ded82bcd30.png\" alt=\"\" srcset=\"https:\/\/www.vpascode.com\/in\/wp-content\/uploads\/sites\/13\/2026\/07\/img_6a4ded82bcd30.png 477w, https:\/\/www.vpascode.com\/in\/wp-content\/uploads\/sites\/13\/2026\/07\/img_6a4ded82bcd30-300x31.png 300w\" sizes=\"(max-width: 477px) 100vw, 477px\" \/><\/p>\n<hr \/>\n<h2>Advanced Feature: Sub-Block Matrix Nesting (Composite Grouping)<\/h2>\n<p>The <code>block:id<\/code> wrapper functions as an isolated layout box context environment. An application group container can establish its own unique horizontal column count inside a sub-block, allowing complex components to group tightly without influencing the spacing of the global parent canvas template grid.<\/p>\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNpFjLEOwjAMRHck\/sHyJ8DGVlWoYkFsDBFDkloQNY2Rk1Dx99S0iMFnvbPvXGQ\/bDcAnmMdU4adgjCXzhaa7NtgF9nZCCvjTR90nEYPY\/DCmeQVPLWx5kKix3\/hfkFby8NgMyucuaelZrafwWDLQtBcTj9zYhlIDF6\/G47pHtKaoNR\/AG9nNiU=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code data-language=\"mermaid\" class=\"language-mermaid\">block\r\n  columns 2\r\n  rootGateway[\"Global Gateway\"]\r\n  \r\n  block:microserviceCluster\r\n    columns 3\r\n    auth[\"Auth Node\"]\r\n    api[\"Core API\"]\r\n    worker[\"Worker Engine\"]\r\n  end<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNpFjLEOwjAMRHck\/sHyJ8DGVlWoYkFsDBFDkloQNY2Rk1Dx99S0iMFnvbPvXGQ\/bDcAnmMdU4adgjCXzhaa7NtgF9nZCCvjTR90nEYPY\/DCmeQVPLWx5kKix3\/hfkFby8NgMyucuaelZrafwWDLQtBcTj9zYhlIDF6\/G47pHtKaoNR\/AG9nNiU=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<p id=\"kcZGAdG\"><img loading=\"lazy\" decoding=\"async\" width=\"747\" height=\"58\" class=\"alignnone size-full wp-image-969 \" src=\"https:\/\/www.vpascode.com\/in\/wp-content\/uploads\/sites\/13\/2026\/07\/img_6a4ded8d55ac8.png\" alt=\"\" srcset=\"https:\/\/www.vpascode.com\/in\/wp-content\/uploads\/sites\/13\/2026\/07\/img_6a4ded8d55ac8.png 747w, https:\/\/www.vpascode.com\/in\/wp-content\/uploads\/sites\/13\/2026\/07\/img_6a4ded8d55ac8-300x23.png 300w\" sizes=\"(max-width: 747px) 100vw, 747px\" \/><\/p>\n<hr \/>\n<h2>Real-World Blueprint: Multi-Tier Infrastructure with Cache<\/h2>\n<p>This comprehensive, multi-row blueprint demonstrates a clean production-grade infrastructure setup. It establishes a 3-column processing grid layout, uses structural <code>space<\/code> elements to isolate a database tier, maps a thick downward <code>blockArrow<\/code>, and isolates a separate internal sub-system container using a nested <code>block:id ... end<\/code> composite wrapper.<\/p>\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNptUcFqAjEQvQv+wxAQdg97qN6kCGpXKFiwWvAgHsZsXIPZzDLJaj+\/iatVS295897MmzfZGZLHbgdAkmkq62DQ7UTY68GSzvAyhNx6RisVrBSftFQu0oV1U6OV9Uki1moHLRBpGklDWEzQxCbeiLwoFcxDCW41sY0qV6NUT2b9IUzJWiW9tiXMTCgVdLbgCT60ZHIPC1y74aJYUuPV60bMiM\/IBXwx7vdaiu0oiXT6v90g2lU1Oe0VjOvaaIlekw2JT5rJViFRCNY4rzi27eKphljXD7X73fotxMYfrofaiHEAYch1bhs7SGqd21LbIJgSB+vFO6yJj7fDKFs8J0SPO3Rqk4gFOV+yWn3O4W0i0u1vntwFjdHuANIoZKjQs\/7OPGXtC5znRvqG0YAJ1oBGl5eE7u+PQZaN4DnlHV3I20I\/aXq0Mg==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code data-language=\"mermaid\" class=\"language-mermaid\">block\r\n  columns 3\r\n\r\n  %% Row 1: Entrance Services\r\n  dnsClient((\"Web Client\"))\r\n  loadBalancer[\"Edge Load Balancer\"]\r\n  space\r\n\r\n  %% Row 2: Connecting Flow down to Microservices\r\n  space\r\n  downRoute&lt;[\"Forward Traffic\"]&gt;(down)\r\n  space\r\n\r\n  %% Row 3: Composite Application Environment Cluster\r\n  block:appCluster\r\n    columns 2\r\n    authService[\"Authentication\"]\r\n    apiEngine[\"Core API Worker\"]\r\n  end\r\n  space\r\n  database[(\"PostgreSQL DB\")]\r\n\r\n  %% Establish clear matrix-to-matrix structural line alignments\r\n  loadBalancer --&gt; appCluster\r\n  appCluster --&gt; database<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNptUcFqAjEQvQv+wxAQdg97qN6kCGpXKFiwWvAgHsZsXIPZzDLJaj+\/iatVS295897MmzfZGZLHbgdAkmkq62DQ7UTY68GSzvAyhNx6RisVrBSftFQu0oV1U6OV9Uki1moHLRBpGklDWEzQxCbeiLwoFcxDCW41sY0qV6NUT2b9IUzJWiW9tiXMTCgVdLbgCT60ZHIPC1y74aJYUuPV60bMiM\/IBXwx7vdaiu0oiXT6v90g2lU1Oe0VjOvaaIlekw2JT5rJViFRCNY4rzi27eKphljXD7X73fotxMYfrofaiHEAYch1bhs7SGqd21LbIJgSB+vFO6yJj7fDKFs8J0SPO3Rqk4gFOV+yWn3O4W0i0u1vntwFjdHuANIoZKjQs\/7OPGXtC5znRvqG0YAJ1oBGl5eE7u+PQZaN4DnlHV3I20I\/aXq0Mg==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<p id=\"nAmZcPX\"><img loading=\"lazy\" decoding=\"async\" width=\"838\" height=\"284\" class=\"alignnone size-full wp-image-970 \" src=\"https:\/\/www.vpascode.com\/in\/wp-content\/uploads\/sites\/13\/2026\/07\/img_6a4deda7017bf.png\" alt=\"\" srcset=\"https:\/\/www.vpascode.com\/in\/wp-content\/uploads\/sites\/13\/2026\/07\/img_6a4deda7017bf.png 838w, https:\/\/www.vpascode.com\/in\/wp-content\/uploads\/sites\/13\/2026\/07\/img_6a4deda7017bf-300x102.png 300w, https:\/\/www.vpascode.com\/in\/wp-content\/uploads\/sites\/13\/2026\/07\/img_6a4deda7017bf-768x260.png 768w\" sizes=\"(max-width: 838px) 100vw, 838px\" \/><\/p>\n<hr \/>\n<h2>Common Syntax Pitfalls &amp; System Constraints<\/h2>\n<p>When compiling precise grid matrix maps, keep these validation checks in mind to prevent parsing faults:<\/p>\n<ul>\n<li><strong>Column Budget Enforcement:<\/strong> Keep careful track of your column count. If you specify <code>columns 3<\/code> and write 4 sequential blocks on a row, the fourth block will drop to row 2 automatically, which can break intended left-to-right connection paths.<\/li>\n<li><strong>Composite Nesting Order:<\/strong> When building inner containers with <code>block:id<\/code>, you must always seal the sub-grid workspace using the <code>end<\/code> keyword on an isolated line before declaring subsequent elements. Failing to close the block will halt diagram building.<\/li>\n<li><strong>Block Arrow Target Limitations:<\/strong> The direction property enclosed in parentheses after a block arrow (e.g., <code>(up)<\/code>, <code>(down)<\/code>) must be a lowercase literal matching system keywords perfectly. Capitalizing the direction will drop processing errors.<\/li>\n<li><strong>Label Boundary Collisions:<\/strong> Standard flowchart shape decorators (like parentheses <code>()<\/code> for round boxes or curly braces <code>{}<\/code> for diamonds) are fully supported. Ensure all display text labels inside shapes use clean double quotes to avoid character stripping.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>A Block Diagram is a structured layout engine used to represent complex software architectures, hardware platforms, or organizational models. Introduced natively in Mermaid.js, the block engine treats the layout canvas as an absolute mathematical grid matrix. This provides precise control&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":48,"menu_order":22,"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-960","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Mermaid Block Diagram Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free 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\/in\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-block-diagram-syntax-grid-layout-guide\/\" \/>\n<meta property=\"og:locale\" content=\"hi_IN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Block Diagram Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/in\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-block-diagram-syntax-grid-layout-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-29T08:36:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/in\/wp-content\/uploads\/sites\/13\/2026\/07\/img_6a4ded6cdf466.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0905\u0928\u0941\u092e\u093e\u0928\u093f\u0924 \u092a\u0922\u093c\u0928\u0947 \u0915\u093e \u0938\u092e\u092f\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 \u092e\u093f\u0928\u091f\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/in\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/in\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/\",\"name\":\"Mermaid Block Diagram Syntax | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/in\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/in\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/in\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/in\\\/wp-content\\\/uploads\\\/sites\\\/13\\\/2026\\\/07\\\/img_6a4ded6cdf466.png\",\"datePublished\":\"2026-07-08T06:20:18+00:00\",\"dateModified\":\"2026-07-29T08:36:19+00:00\",\"description\":\"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/in\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/#breadcrumb\"},\"inLanguage\":\"hi-IN\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/in\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"hi-IN\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/in\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/in\\\/wp-content\\\/uploads\\\/sites\\\/13\\\/2026\\\/07\\\/img_6a4ded6cdf466.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/in\\\/wp-content\\\/uploads\\\/sites\\\/13\\\/2026\\\/07\\\/img_6a4ded6cdf466.png\",\"width\":321,\"height\":42},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/in\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/in\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/in\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Mermaid.js Playbook\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/in\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Mermaid.js Block Diagram Syntax &#038; Grid Layout Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/in\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/in\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/in\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/in\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"hi-IN\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/in\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/in\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"hi-IN\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/in\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/in\\\/wp-content\\\/uploads\\\/sites\\\/13\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/in\\\/wp-content\\\/uploads\\\/sites\\\/13\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/in\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mermaid Block Diagram Syntax | VPasCode Text to Diagram Guide","description":"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free 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\/in\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-block-diagram-syntax-grid-layout-guide\/","og_locale":"hi_IN","og_type":"article","og_title":"Mermaid Block Diagram Syntax | VPasCode Text to Diagram Guide","og_description":"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/in\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-block-diagram-syntax-grid-layout-guide\/","og_site_name":"VPasCode","article_modified_time":"2026-07-29T08:36:19+00:00","og_image":[{"url":"https:\/\/www.vpascode.com\/in\/wp-content\/uploads\/sites\/13\/2026\/07\/img_6a4ded6cdf466.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"\u0905\u0928\u0941\u092e\u093e\u0928\u093f\u0924 \u092a\u0922\u093c\u0928\u0947 \u0915\u093e \u0938\u092e\u092f":"5 \u092e\u093f\u0928\u091f"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/in\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-block-diagram-syntax-grid-layout-guide\/","url":"https:\/\/www.vpascode.com\/in\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-block-diagram-syntax-grid-layout-guide\/","name":"Mermaid Block Diagram Syntax | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/in\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/in\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-block-diagram-syntax-grid-layout-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/in\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-block-diagram-syntax-grid-layout-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/in\/wp-content\/uploads\/sites\/13\/2026\/07\/img_6a4ded6cdf466.png","datePublished":"2026-07-08T06:20:18+00:00","dateModified":"2026-07-29T08:36:19+00:00","description":"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/in\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-block-diagram-syntax-grid-layout-guide\/#breadcrumb"},"inLanguage":"hi-IN","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/in\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-block-diagram-syntax-grid-layout-guide\/"]}]},{"@type":"ImageObject","inLanguage":"hi-IN","@id":"https:\/\/www.vpascode.com\/in\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-block-diagram-syntax-grid-layout-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/in\/wp-content\/uploads\/sites\/13\/2026\/07\/img_6a4ded6cdf466.png","contentUrl":"https:\/\/www.vpascode.com\/in\/wp-content\/uploads\/sites\/13\/2026\/07\/img_6a4ded6cdf466.png","width":321,"height":42},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/in\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-block-diagram-syntax-grid-layout-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/in\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/in\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Mermaid.js Playbook","item":"https:\/\/www.vpascode.com\/in\/docs\/vpascode-docs\/mermaid-js-playbook\/"},{"@type":"ListItem","position":4,"name":"Mermaid.js Block Diagram Syntax &#038; Grid Layout Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/in\/#website","url":"https:\/\/www.vpascode.com\/in\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/in\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/in\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"hi-IN"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/in\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/in\/","logo":{"@type":"ImageObject","inLanguage":"hi-IN","@id":"https:\/\/www.vpascode.com\/in\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/in\/wp-content\/uploads\/sites\/13\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/in\/wp-content\/uploads\/sites\/13\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/in\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/in\/wp-json\/wp\/v2\/ld_docs\/960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/in\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/in\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/in\/wp-json\/wp\/v2\/users\/3"}],"up":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/in\/wp-json\/wp\/v2\/ld_docs\/48"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/in\/wp-json\/wp\/v2\/media?parent=960"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/in\/wp-json\/wp\/v2\/ld_collection?post=960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}