From: Vladimír Vondruš <mosra@centrum.cz>
Date: Sun, 8 Nov 2020 15:26:37 +0000 (+0100)
Subject: m.dot: support subgraphs.
X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=42d4a9a48f31f5df6e246c948403b54b50574a2a;p=blog.git

m.dot: support subgraphs.
---

diff --git a/css/m-components.css b/css/m-components.css
index 4ac7bf26..efbefb11 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -965,7 +965,8 @@ div.m-plot svg .m-error {
   stroke-width: 1.5;
 }
 div.m-plot svg .m-label.m-dim { fill: var(--dim-color); }
-.m-graph g.m-edge path, .m-graph g.m-node.m-flat ellipse,
+.m-graph g.m-edge path, .m-graph g.m-cluster polygon,
+.m-graph g.m-node.m-flat ellipse,
 .m-graph g.m-node.m-flat polygon {
   fill: none;
 }
@@ -1296,7 +1297,11 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-
    can override this. Applies to either div.m-math svg or svg.m.math
    (div.m-graph svg or svg.m-graph), so using just .m-math (.m-graph). Besides
    that, using svg anywhere would make it a higher priority, breaking the
-   colors. See the math/graph plugin test pages for a visual verification. */
+   colors.
+
+   When modifying, use these test pages for a visual check & expand as needed:
+    https://mcss.mosra.cz/plugins/math-and-code/test/
+    https://mcss.mosra.cz/plugins/plots-and-graphs/test/ */
 .m-math { fill: var(--color); }
 .m-math.m-default, .m-math g.m-default, .m-math rect.m-default,
 div.m-plot svg .m-bar.m-default,
@@ -1305,11 +1310,13 @@ div.m-plot svg .m-bar.m-default,
 .m-graph g.m-node:not(.m-flat) polygon,
 .m-graph g.m-edge text,
 .m-graph g.m-node.m-flat text,
+.m-graph g.m-cluster text,
 .m-graph.m-default g.m-edge polygon,
 .m-graph.m-default g.m-node:not(.m-flat) ellipse,
 .m-graph.m-default g.m-node:not(.m-flat) polygon,
 .m-graph.m-default g.m-edge text,
-.m-graph.m-default g.m-node.m-flat text {
+.m-graph.m-default g.m-node.m-flat text,
+.m-graph.m-default g.m-cluster text {
   fill: var(--default-color);
 }
 .m-graph g.m-edge polygon,
@@ -1317,11 +1324,13 @@ div.m-plot svg .m-bar.m-default,
 .m-graph g.m-node ellipse,
 .m-graph g.m-node polygon,
 .m-graph g.m-node polyline,
+.m-graph g.m-cluster polygon,
 .m-graph.m-default g.m-edge polygon,
 .m-graph.m-default g.m-edge path,
 .m-graph.m-default g.m-node ellipse,
 .m-graph.m-default g.m-node polygon,
-.m-graph.m-default g.m-node polyline {
+.m-graph.m-default g.m-node polyline,
+.m-graph.m-default g.m-cluster polygon {
   stroke: var(--default-color);
 }
 .m-math.m-primary, .m-math g.m-primary, .m-math rect.m-primary,
@@ -1330,14 +1339,16 @@ div.m-plot svg .m-bar.m-primary,
 .m-graph.m-primary g.m-node:not(.m-flat) ellipse,
 .m-graph.m-primary g.m-node:not(.m-flat) polygon,
 .m-graph.m-primary g.m-edge text,
-.m-graph.m-primary g.m-node.m-flat text {
+.m-graph.m-primary g.m-node.m-flat text,
+.m-graph.m-primary g.m-cluster text {
   fill: var(--primary-color);
 }
 .m-graph.m-primary g.m-edge polygon,
 .m-graph.m-primary g.m-edge path,
 .m-graph.m-primary g.m-node ellipse,
 .m-graph.m-primary g.m-node polygon,
-.m-graph.m-primary g.m-node polyline {
+.m-graph.m-primary g.m-node polyline,
+.m-graph.m-primary g.m-cluster polygon {
   stroke: var(--primary-color);
 }
 .m-math.m-success, .m-math g.m-success, .m-math rect.m-success,
@@ -1346,14 +1357,16 @@ div.m-plot svg .m-bar.m-success,
 .m-graph.m-success g.m-node:not(.m-flat) ellipse,
 .m-graph.m-success g.m-node:not(.m-flat) polygon,
 .m-graph.m-success g.m-edge text,
-.m-graph.m-success g.m-node.m-flat text {
+.m-graph.m-success g.m-node.m-flat text,
+.m-graph.m-success g.m-cluster text {
   fill: var(--success-color);
 }
 .m-graph.m-success g.m-edge polygon,
 .m-graph.m-success g.m-edge path,
 .m-graph.m-success g.m-node ellipse,
 .m-graph.m-success g.m-node polygon,
-.m-graph.m-success g.m-node polyline {
+.m-graph.m-success g.m-node polyline,
+.m-graph.m-success g.m-cluster polygon {
   stroke: var(--success-color);
 }
 .m-math.m-warning, .m-math g.m-warning, .m-math rect.m-warning,
@@ -1362,14 +1375,16 @@ div.m-plot svg .m-bar.m-warning,
 .m-graph.m-warning g.m-node:not(.m-flat) ellipse,
 .m-graph.m-warning g.m-node:not(.m-flat) polygon,
 .m-graph.m-warning g.m-edge text,
-.m-graph.m-warning g.m-node.m-flat text {
+.m-graph.m-warning g.m-node.m-flat text,
+.m-graph.m-warning g.m-cluster text {
   fill: var(--warning-color);
 }
 .m-graph.m-warning g.m-edge polygon,
 .m-graph.m-warning g.m-edge path,
 .m-graph.m-warning g.m-node ellipse,
 .m-graph.m-warning g.m-node polygon,
-.m-graph.m-warning g.m-node polyline {
+.m-graph.m-warning g.m-node polyline,
+.m-graph.m-warning g.m-cluster polygon {
   stroke: var(--warning-color);
 }
 .m-math.m-danger, .m-math g.m-danger, .m-math rect.m-danger,
@@ -1378,14 +1393,16 @@ div.m-plot svg .m-bar.m-danger,
 .m-graph.m-danger g.m-node:not(.m-flat) ellipse,
 .m-graph.m-danger g.m-node:not(.m-flat) polygon,
 .m-graph.m-danger g.m-edge text,
-.m-graph.m-danger g.m-node.m-flat text {
+.m-graph.m-danger g.m-node.m-flat text,
+.m-graph.m-danger g.m-cluster text {
   fill: var(--danger-color);
 }
 .m-graph.m-danger g.m-edge polygon,
 .m-graph.m-danger g.m-edge path,
 .m-graph.m-danger g.m-node ellipse,
 .m-graph.m-danger g.m-node polygon,
-.m-graph.m-danger g.m-node polyline {
+.m-graph.m-danger g.m-node polyline,
+.m-graph.m-danger g.m-cluster polygon {
   stroke: var(--danger-color);
 }
 .m-math.m-info, .m-math g.m-info, .m-math rect.m-info,
@@ -1394,14 +1411,16 @@ div.m-plot svg .m-bar.m-info,
 .m-graph.m-info g.m-node:not(.m-flat) ellipse,
 .m-graph.m-info g.m-node:not(.m-flat) polygon,
 .m-graph.m-info g.m-edge text,
-.m-graph.m-info g.m-node.m-flat text {
+.m-graph.m-info g.m-node.m-flat text,
+.m-graph.m-info g.m-cluster text {
   fill: var(--info-color);
 }
 .m-graph.m-info g.m-edge polygon,
 .m-graph.m-info g.m-edge path,
 .m-graph.m-info g.m-node ellipse,
 .m-graph.m-info g.m-node polygon,
-.m-graph.m-info g.m-node polyline {
+.m-graph.m-info g.m-node polyline,
+.m-graph.m-info g.m-cluster polygon {
   stroke: var(--info-color);
 }
 .m-math.m-dim, .m-math g.m-dim, .m-math rect.m-dim,
@@ -1410,116 +1429,136 @@ div.m-plot svg .m-bar.m-dim,
 .m-graph.m-dim g.m-node:not(.m-flat) ellipse,
 .m-graph.m-dim g.m-node:not(.m-flat) polygon,
 .m-graph.m-dim g.m-edge text,
-.m-graph.m-dim g.m-node.m-flat text {
+.m-graph.m-dim g.m-node.m-flat text,
+.m-graph.m-dim g.m-cluster text {
   fill: var(--dim-color);
 }
 .m-graph.m-dim g.m-edge polygon,
 .m-graph.m-dim g.m-edge path,
 .m-graph.m-dim g.m-node ellipse,
 .m-graph.m-dim g.m-node polygon,
-.m-graph.m-dim g.m-node polyline {
+.m-graph.m-dim g.m-node polyline,
+.m-graph.m-dim g.m-cluster polygon {
   stroke: var(--dim-color);
 }
 
 /* Local-colored graphs. Later so it overrides global coloring. Applies to
    either div.m-graph svg or svg.m-graph, so using just .m-graph. This is not
-   needed for math, for some reason the overrides work correctly. */
+   needed for math, for some reason the overrides work correctly.
+
+   When modifying, use these test pages for a visual check & expand as needed:
+    https://mcss.mosra.cz/plugins/math-and-code/test/
+    https://mcss.mosra.cz/plugins/plots-and-graphs/test/ */
 .m-graph g.m-edge.m-default polygon,
 .m-graph g.m-node.m-default:not(.m-flat) ellipse,
 .m-graph g.m-node.m-default:not(.m-flat) polygon,
 .m-graph g.m-edge.m-default text,
-.m-graph g.m-node.m-default.m-flat text {
+.m-graph g.m-node.m-default.m-flat text,
+.m-graph g.m-cluster.m-default text {
   fill: var(--default-color);
 }
 .m-graph g.m-edge.m-default polygon,
 .m-graph g.m-edge.m-default path,
 .m-graph g.m-node.m-default ellipse,
 .m-graph g.m-node.m-default polygon,
-.m-graph g.m-node.m-default polyline {
+.m-graph g.m-node.m-default polyline,
+.m-graph g.m-cluster.m-default polygon {
   stroke: var(--default-color);
 }
 .m-graph g.m-edge.m-primary polygon,
 .m-graph g.m-node.m-primary:not(.m-flat) ellipse,
 .m-graph g.m-node.m-primary:not(.m-flat) polygon,
 .m-graph g.m-edge.m-primary text,
-.m-graph g.m-node.m-primary.m-flat text {
+.m-graph g.m-node.m-primary.m-flat text,
+.m-graph g.m-cluster.m-primary text {
   fill: var(--primary-color);
 }
 .m-graph g.m-edge.m-primary polygon,
 .m-graph g.m-edge.m-primary path,
 .m-graph g.m-node.m-primary ellipse,
 .m-graph g.m-node.m-primary polygon,
-.m-graph g.m-node.m-primary polyline {
+.m-graph g.m-node.m-primary polyline,
+.m-graph g.m-cluster.m-primary polygon {
   stroke: var(--primary-color);
 }
 .m-graph g.m-edge.m-success polygon,
 .m-graph g.m-node.m-success:not(.m-flat) ellipse,
 .m-graph g.m-node.m-success:not(.m-flat) polygon,
 .m-graph g.m-edge.m-success text,
-.m-graph g.m-node.m-success.m-flat text {
+.m-graph g.m-node.m-success.m-flat text,
+.m-graph g.m-cluster.m-success text {
   fill: var(--success-color);
 }
 .m-graph g.m-edge.m-success polygon,
 .m-graph g.m-edge.m-success path,
 .m-graph g.m-node.m-success ellipse,
 .m-graph g.m-node.m-success polygon,
-.m-graph g.m-node.m-success polyline {
+.m-graph g.m-node.m-success polyline,
+.m-graph g.m-cluster.m-success polygon {
   stroke: var(--success-color);
 }
 .m-graph g.m-edge.m-warning polygon,
 .m-graph g.m-node.m-warning:not(.m-flat) ellipse,
 .m-graph g.m-node.m-warning:not(.m-flat) polygon,
 .m-graph g.m-edge.m-warning text,
-.m-graph g.m-node.m-warning.m-flat text {
+.m-graph g.m-node.m-warning.m-flat text,
+.m-graph g.m-cluster.m-warning text {
   fill: var(--warning-color);
 }
 .m-graph g.m-edge.m-warning polygon,
 .m-graph g.m-edge.m-warning path,
 .m-graph g.m-node.m-warning ellipse,
 .m-graph g.m-node.m-warning polygon,
-.m-graph g.m-node.m-warning polyline {
+.m-graph g.m-node.m-warning polyline,
+.m-graph g.m-cluster.m-warning polygon {
   stroke: var(--warning-color);
 }
 .m-graph g.m-edge.m-danger polygon,
 .m-graph g.m-node.m-danger:not(.m-flat) ellipse,
 .m-graph g.m-node.m-danger:not(.m-flat) polygon,
 .m-graph g.m-edge.m-danger text,
-.m-graph g.m-node.m-danger.m-flat text {
+.m-graph g.m-node.m-danger.m-flat text,
+.m-graph g.m-cluster.m-danger text {
   fill: var(--danger-color);
 }
 .m-graph g.m-edge.m-danger polygon,
 .m-graph g.m-edge.m-danger path,
 .m-graph g.m-node.m-danger ellipse,
 .m-graph g.m-node.m-danger polygon,
-.m-graph g.m-node.m-danger polyline {
+.m-graph g.m-node.m-danger polyline,
+.m-graph g.m-cluster.m-danger polygon {
   stroke: var(--danger-color);
 }
 .m-graph g.m-edge.m-info polygon,
 .m-graph g.m-node.m-info:not(.m-flat) ellipse,
 .m-graph g.m-node.m-info:not(.m-flat) polygon,
 .m-graph g.m-edge.m-info text,
-.m-graph g.m-node.m-info.m-flat text {
+.m-graph g.m-node.m-info.m-flat text,
+.m-graph g.m-cluster.m-info text {
   fill: var(--info-color);
 }
 .m-graph g.m-edge.m-info polygon,
 .m-graph g.m-edge.m-info path,
 .m-graph g.m-node.m-info ellipse,
 .m-graph g.m-node.m-info polygon,
-.m-graph g.m-node.m-info polyline {
+.m-graph g.m-node.m-info polyline,
+.m-graph g.m-cluster.m-info polygon {
   stroke: var(--info-color);
 }
 .m-graph g.m-edge.m-dim polygon,
 .m-graph g.m-node.m-dim:not(.m-flat) ellipse,
 .m-graph g.m-node.m-dim:not(.m-flat) polygon,
 .m-graph g.m-edge.m-dim text,
-.m-graph g.m-node.m-dim.m-flat text {
+.m-graph g.m-node.m-dim.m-flat text,
+.m-graph g.m-cluster.m-dim text {
   fill: var(--dim-color);
 }
 .m-graph g.m-edge.m-dim polygon,
 .m-graph g.m-edge.m-dim path,
 .m-graph g.m-node.m-dim ellipse,
 .m-graph g.m-node.m-dim polygon,
-.m-graph g.m-node.m-dim polyline {
+.m-graph g.m-node.m-dim polyline,
+.m-graph g.m-cluster.m-dim polygon {
   stroke: var(--dim-color);
 }
 
diff --git a/css/m-dark+documentation.compiled.css b/css/m-dark+documentation.compiled.css
index 056a3064..f6ce4a44 100644
--- a/css/m-dark+documentation.compiled.css
+++ b/css/m-dark+documentation.compiled.css
@@ -1200,7 +1200,8 @@ div.m-plot svg .m-error {
   stroke-width: 1.5;
 }
 div.m-plot svg .m-label.m-dim { fill: #747474; }
-.m-graph g.m-edge path, .m-graph g.m-node.m-flat ellipse,
+.m-graph g.m-edge path, .m-graph g.m-cluster polygon,
+.m-graph g.m-node.m-flat ellipse,
 .m-graph g.m-node.m-flat polygon {
   fill: none;
 }
@@ -1514,11 +1515,13 @@ div.m-plot svg .m-bar.m-default,
 .m-graph g.m-node:not(.m-flat) polygon,
 .m-graph g.m-edge text,
 .m-graph g.m-node.m-flat text,
+.m-graph g.m-cluster text,
 .m-graph.m-default g.m-edge polygon,
 .m-graph.m-default g.m-node:not(.m-flat) ellipse,
 .m-graph.m-default g.m-node:not(.m-flat) polygon,
 .m-graph.m-default g.m-edge text,
-.m-graph.m-default g.m-node.m-flat text {
+.m-graph.m-default g.m-node.m-flat text,
+.m-graph.m-default g.m-cluster text {
   fill: #dcdcdc;
 }
 .m-graph g.m-edge polygon,
@@ -1526,11 +1529,13 @@ div.m-plot svg .m-bar.m-default,
 .m-graph g.m-node ellipse,
 .m-graph g.m-node polygon,
 .m-graph g.m-node polyline,
+.m-graph g.m-cluster polygon,
 .m-graph.m-default g.m-edge polygon,
 .m-graph.m-default g.m-edge path,
 .m-graph.m-default g.m-node ellipse,
 .m-graph.m-default g.m-node polygon,
-.m-graph.m-default g.m-node polyline {
+.m-graph.m-default g.m-node polyline,
+.m-graph.m-default g.m-cluster polygon {
   stroke: #dcdcdc;
 }
 .m-math.m-primary, .m-math g.m-primary, .m-math rect.m-primary,
@@ -1539,14 +1544,16 @@ div.m-plot svg .m-bar.m-primary,
 .m-graph.m-primary g.m-node:not(.m-flat) ellipse,
 .m-graph.m-primary g.m-node:not(.m-flat) polygon,
 .m-graph.m-primary g.m-edge text,
-.m-graph.m-primary g.m-node.m-flat text {
+.m-graph.m-primary g.m-node.m-flat text,
+.m-graph.m-primary g.m-cluster text {
   fill: #a5c9ea;
 }
 .m-graph.m-primary g.m-edge polygon,
 .m-graph.m-primary g.m-edge path,
 .m-graph.m-primary g.m-node ellipse,
 .m-graph.m-primary g.m-node polygon,
-.m-graph.m-primary g.m-node polyline {
+.m-graph.m-primary g.m-node polyline,
+.m-graph.m-primary g.m-cluster polygon {
   stroke: #a5c9ea;
 }
 .m-math.m-success, .m-math g.m-success, .m-math rect.m-success,
@@ -1555,14 +1562,16 @@ div.m-plot svg .m-bar.m-success,
 .m-graph.m-success g.m-node:not(.m-flat) ellipse,
 .m-graph.m-success g.m-node:not(.m-flat) polygon,
 .m-graph.m-success g.m-edge text,
-.m-graph.m-success g.m-node.m-flat text {
+.m-graph.m-success g.m-node.m-flat text,
+.m-graph.m-success g.m-cluster text {
   fill: #3bd267;
 }
 .m-graph.m-success g.m-edge polygon,
 .m-graph.m-success g.m-edge path,
 .m-graph.m-success g.m-node ellipse,
 .m-graph.m-success g.m-node polygon,
-.m-graph.m-success g.m-node polyline {
+.m-graph.m-success g.m-node polyline,
+.m-graph.m-success g.m-cluster polygon {
   stroke: #3bd267;
 }
 .m-math.m-warning, .m-math g.m-warning, .m-math rect.m-warning,
@@ -1571,14 +1580,16 @@ div.m-plot svg .m-bar.m-warning,
 .m-graph.m-warning g.m-node:not(.m-flat) ellipse,
 .m-graph.m-warning g.m-node:not(.m-flat) polygon,
 .m-graph.m-warning g.m-edge text,
-.m-graph.m-warning g.m-node.m-flat text {
+.m-graph.m-warning g.m-node.m-flat text,
+.m-graph.m-warning g.m-cluster text {
   fill: #c7cf2f;
 }
 .m-graph.m-warning g.m-edge polygon,
 .m-graph.m-warning g.m-edge path,
 .m-graph.m-warning g.m-node ellipse,
 .m-graph.m-warning g.m-node polygon,
-.m-graph.m-warning g.m-node polyline {
+.m-graph.m-warning g.m-node polyline,
+.m-graph.m-warning g.m-cluster polygon {
   stroke: #c7cf2f;
 }
 .m-math.m-danger, .m-math g.m-danger, .m-math rect.m-danger,
@@ -1587,14 +1598,16 @@ div.m-plot svg .m-bar.m-danger,
 .m-graph.m-danger g.m-node:not(.m-flat) ellipse,
 .m-graph.m-danger g.m-node:not(.m-flat) polygon,
 .m-graph.m-danger g.m-edge text,
-.m-graph.m-danger g.m-node.m-flat text {
+.m-graph.m-danger g.m-node.m-flat text,
+.m-graph.m-danger g.m-cluster text {
   fill: #cd3431;
 }
 .m-graph.m-danger g.m-edge polygon,
 .m-graph.m-danger g.m-edge path,
 .m-graph.m-danger g.m-node ellipse,
 .m-graph.m-danger g.m-node polygon,
-.m-graph.m-danger g.m-node polyline {
+.m-graph.m-danger g.m-node polyline,
+.m-graph.m-danger g.m-cluster polygon {
   stroke: #cd3431;
 }
 .m-math.m-info, .m-math g.m-info, .m-math rect.m-info,
@@ -1603,14 +1616,16 @@ div.m-plot svg .m-bar.m-info,
 .m-graph.m-info g.m-node:not(.m-flat) ellipse,
 .m-graph.m-info g.m-node:not(.m-flat) polygon,
 .m-graph.m-info g.m-edge text,
-.m-graph.m-info g.m-node.m-flat text {
+.m-graph.m-info g.m-node.m-flat text,
+.m-graph.m-info g.m-cluster text {
   fill: #2f83cc;
 }
 .m-graph.m-info g.m-edge polygon,
 .m-graph.m-info g.m-edge path,
 .m-graph.m-info g.m-node ellipse,
 .m-graph.m-info g.m-node polygon,
-.m-graph.m-info g.m-node polyline {
+.m-graph.m-info g.m-node polyline,
+.m-graph.m-info g.m-cluster polygon {
   stroke: #2f83cc;
 }
 .m-math.m-dim, .m-math g.m-dim, .m-math rect.m-dim,
@@ -1619,112 +1634,128 @@ div.m-plot svg .m-bar.m-dim,
 .m-graph.m-dim g.m-node:not(.m-flat) ellipse,
 .m-graph.m-dim g.m-node:not(.m-flat) polygon,
 .m-graph.m-dim g.m-edge text,
-.m-graph.m-dim g.m-node.m-flat text {
+.m-graph.m-dim g.m-node.m-flat text,
+.m-graph.m-dim g.m-cluster text {
   fill: #747474;
 }
 .m-graph.m-dim g.m-edge polygon,
 .m-graph.m-dim g.m-edge path,
 .m-graph.m-dim g.m-node ellipse,
 .m-graph.m-dim g.m-node polygon,
-.m-graph.m-dim g.m-node polyline {
+.m-graph.m-dim g.m-node polyline,
+.m-graph.m-dim g.m-cluster polygon {
   stroke: #747474;
 }
 .m-graph g.m-edge.m-default polygon,
 .m-graph g.m-node.m-default:not(.m-flat) ellipse,
 .m-graph g.m-node.m-default:not(.m-flat) polygon,
 .m-graph g.m-edge.m-default text,
-.m-graph g.m-node.m-default.m-flat text {
+.m-graph g.m-node.m-default.m-flat text,
+.m-graph g.m-cluster.m-default text {
   fill: #dcdcdc;
 }
 .m-graph g.m-edge.m-default polygon,
 .m-graph g.m-edge.m-default path,
 .m-graph g.m-node.m-default ellipse,
 .m-graph g.m-node.m-default polygon,
-.m-graph g.m-node.m-default polyline {
+.m-graph g.m-node.m-default polyline,
+.m-graph g.m-cluster.m-default polygon {
   stroke: #dcdcdc;
 }
 .m-graph g.m-edge.m-primary polygon,
 .m-graph g.m-node.m-primary:not(.m-flat) ellipse,
 .m-graph g.m-node.m-primary:not(.m-flat) polygon,
 .m-graph g.m-edge.m-primary text,
-.m-graph g.m-node.m-primary.m-flat text {
+.m-graph g.m-node.m-primary.m-flat text,
+.m-graph g.m-cluster.m-primary text {
   fill: #a5c9ea;
 }
 .m-graph g.m-edge.m-primary polygon,
 .m-graph g.m-edge.m-primary path,
 .m-graph g.m-node.m-primary ellipse,
 .m-graph g.m-node.m-primary polygon,
-.m-graph g.m-node.m-primary polyline {
+.m-graph g.m-node.m-primary polyline,
+.m-graph g.m-cluster.m-primary polygon {
   stroke: #a5c9ea;
 }
 .m-graph g.m-edge.m-success polygon,
 .m-graph g.m-node.m-success:not(.m-flat) ellipse,
 .m-graph g.m-node.m-success:not(.m-flat) polygon,
 .m-graph g.m-edge.m-success text,
-.m-graph g.m-node.m-success.m-flat text {
+.m-graph g.m-node.m-success.m-flat text,
+.m-graph g.m-cluster.m-success text {
   fill: #3bd267;
 }
 .m-graph g.m-edge.m-success polygon,
 .m-graph g.m-edge.m-success path,
 .m-graph g.m-node.m-success ellipse,
 .m-graph g.m-node.m-success polygon,
-.m-graph g.m-node.m-success polyline {
+.m-graph g.m-node.m-success polyline,
+.m-graph g.m-cluster.m-success polygon {
   stroke: #3bd267;
 }
 .m-graph g.m-edge.m-warning polygon,
 .m-graph g.m-node.m-warning:not(.m-flat) ellipse,
 .m-graph g.m-node.m-warning:not(.m-flat) polygon,
 .m-graph g.m-edge.m-warning text,
-.m-graph g.m-node.m-warning.m-flat text {
+.m-graph g.m-node.m-warning.m-flat text,
+.m-graph g.m-cluster.m-warning text {
   fill: #c7cf2f;
 }
 .m-graph g.m-edge.m-warning polygon,
 .m-graph g.m-edge.m-warning path,
 .m-graph g.m-node.m-warning ellipse,
 .m-graph g.m-node.m-warning polygon,
-.m-graph g.m-node.m-warning polyline {
+.m-graph g.m-node.m-warning polyline,
+.m-graph g.m-cluster.m-warning polygon {
   stroke: #c7cf2f;
 }
 .m-graph g.m-edge.m-danger polygon,
 .m-graph g.m-node.m-danger:not(.m-flat) ellipse,
 .m-graph g.m-node.m-danger:not(.m-flat) polygon,
 .m-graph g.m-edge.m-danger text,
-.m-graph g.m-node.m-danger.m-flat text {
+.m-graph g.m-node.m-danger.m-flat text,
+.m-graph g.m-cluster.m-danger text {
   fill: #cd3431;
 }
 .m-graph g.m-edge.m-danger polygon,
 .m-graph g.m-edge.m-danger path,
 .m-graph g.m-node.m-danger ellipse,
 .m-graph g.m-node.m-danger polygon,
-.m-graph g.m-node.m-danger polyline {
+.m-graph g.m-node.m-danger polyline,
+.m-graph g.m-cluster.m-danger polygon {
   stroke: #cd3431;
 }
 .m-graph g.m-edge.m-info polygon,
 .m-graph g.m-node.m-info:not(.m-flat) ellipse,
 .m-graph g.m-node.m-info:not(.m-flat) polygon,
 .m-graph g.m-edge.m-info text,
-.m-graph g.m-node.m-info.m-flat text {
+.m-graph g.m-node.m-info.m-flat text,
+.m-graph g.m-cluster.m-info text {
   fill: #2f83cc;
 }
 .m-graph g.m-edge.m-info polygon,
 .m-graph g.m-edge.m-info path,
 .m-graph g.m-node.m-info ellipse,
 .m-graph g.m-node.m-info polygon,
-.m-graph g.m-node.m-info polyline {
+.m-graph g.m-node.m-info polyline,
+.m-graph g.m-cluster.m-info polygon {
   stroke: #2f83cc;
 }
 .m-graph g.m-edge.m-dim polygon,
 .m-graph g.m-node.m-dim:not(.m-flat) ellipse,
 .m-graph g.m-node.m-dim:not(.m-flat) polygon,
 .m-graph g.m-edge.m-dim text,
-.m-graph g.m-node.m-dim.m-flat text {
+.m-graph g.m-node.m-dim.m-flat text,
+.m-graph g.m-cluster.m-dim text {
   fill: #747474;
 }
 .m-graph g.m-edge.m-dim polygon,
 .m-graph g.m-edge.m-dim path,
 .m-graph g.m-node.m-dim ellipse,
 .m-graph g.m-node.m-dim polygon,
-.m-graph g.m-node.m-dim polyline {
+.m-graph g.m-node.m-dim polyline,
+.m-graph g.m-cluster.m-dim polygon {
   stroke: #747474;
 }
 p, ul, ol, dl, blockquote, pre, .m-code-figure, .m-console-figure, hr, .m-note,
diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index c6727f8c..2bc81103 100644
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -1200,7 +1200,8 @@ div.m-plot svg .m-error {
   stroke-width: 1.5;
 }
 div.m-plot svg .m-label.m-dim { fill: #747474; }
-.m-graph g.m-edge path, .m-graph g.m-node.m-flat ellipse,
+.m-graph g.m-edge path, .m-graph g.m-cluster polygon,
+.m-graph g.m-node.m-flat ellipse,
 .m-graph g.m-node.m-flat polygon {
   fill: none;
 }
@@ -1514,11 +1515,13 @@ div.m-plot svg .m-bar.m-default,
 .m-graph g.m-node:not(.m-flat) polygon,
 .m-graph g.m-edge text,
 .m-graph g.m-node.m-flat text,
+.m-graph g.m-cluster text,
 .m-graph.m-default g.m-edge polygon,
 .m-graph.m-default g.m-node:not(.m-flat) ellipse,
 .m-graph.m-default g.m-node:not(.m-flat) polygon,
 .m-graph.m-default g.m-edge text,
-.m-graph.m-default g.m-node.m-flat text {
+.m-graph.m-default g.m-node.m-flat text,
+.m-graph.m-default g.m-cluster text {
   fill: #dcdcdc;
 }
 .m-graph g.m-edge polygon,
@@ -1526,11 +1529,13 @@ div.m-plot svg .m-bar.m-default,
 .m-graph g.m-node ellipse,
 .m-graph g.m-node polygon,
 .m-graph g.m-node polyline,
+.m-graph g.m-cluster polygon,
 .m-graph.m-default g.m-edge polygon,
 .m-graph.m-default g.m-edge path,
 .m-graph.m-default g.m-node ellipse,
 .m-graph.m-default g.m-node polygon,
-.m-graph.m-default g.m-node polyline {
+.m-graph.m-default g.m-node polyline,
+.m-graph.m-default g.m-cluster polygon {
   stroke: #dcdcdc;
 }
 .m-math.m-primary, .m-math g.m-primary, .m-math rect.m-primary,
@@ -1539,14 +1544,16 @@ div.m-plot svg .m-bar.m-primary,
 .m-graph.m-primary g.m-node:not(.m-flat) ellipse,
 .m-graph.m-primary g.m-node:not(.m-flat) polygon,
 .m-graph.m-primary g.m-edge text,
-.m-graph.m-primary g.m-node.m-flat text {
+.m-graph.m-primary g.m-node.m-flat text,
+.m-graph.m-primary g.m-cluster text {
   fill: #a5c9ea;
 }
 .m-graph.m-primary g.m-edge polygon,
 .m-graph.m-primary g.m-edge path,
 .m-graph.m-primary g.m-node ellipse,
 .m-graph.m-primary g.m-node polygon,
-.m-graph.m-primary g.m-node polyline {
+.m-graph.m-primary g.m-node polyline,
+.m-graph.m-primary g.m-cluster polygon {
   stroke: #a5c9ea;
 }
 .m-math.m-success, .m-math g.m-success, .m-math rect.m-success,
@@ -1555,14 +1562,16 @@ div.m-plot svg .m-bar.m-success,
 .m-graph.m-success g.m-node:not(.m-flat) ellipse,
 .m-graph.m-success g.m-node:not(.m-flat) polygon,
 .m-graph.m-success g.m-edge text,
-.m-graph.m-success g.m-node.m-flat text {
+.m-graph.m-success g.m-node.m-flat text,
+.m-graph.m-success g.m-cluster text {
   fill: #3bd267;
 }
 .m-graph.m-success g.m-edge polygon,
 .m-graph.m-success g.m-edge path,
 .m-graph.m-success g.m-node ellipse,
 .m-graph.m-success g.m-node polygon,
-.m-graph.m-success g.m-node polyline {
+.m-graph.m-success g.m-node polyline,
+.m-graph.m-success g.m-cluster polygon {
   stroke: #3bd267;
 }
 .m-math.m-warning, .m-math g.m-warning, .m-math rect.m-warning,
@@ -1571,14 +1580,16 @@ div.m-plot svg .m-bar.m-warning,
 .m-graph.m-warning g.m-node:not(.m-flat) ellipse,
 .m-graph.m-warning g.m-node:not(.m-flat) polygon,
 .m-graph.m-warning g.m-edge text,
-.m-graph.m-warning g.m-node.m-flat text {
+.m-graph.m-warning g.m-node.m-flat text,
+.m-graph.m-warning g.m-cluster text {
   fill: #c7cf2f;
 }
 .m-graph.m-warning g.m-edge polygon,
 .m-graph.m-warning g.m-edge path,
 .m-graph.m-warning g.m-node ellipse,
 .m-graph.m-warning g.m-node polygon,
-.m-graph.m-warning g.m-node polyline {
+.m-graph.m-warning g.m-node polyline,
+.m-graph.m-warning g.m-cluster polygon {
   stroke: #c7cf2f;
 }
 .m-math.m-danger, .m-math g.m-danger, .m-math rect.m-danger,
@@ -1587,14 +1598,16 @@ div.m-plot svg .m-bar.m-danger,
 .m-graph.m-danger g.m-node:not(.m-flat) ellipse,
 .m-graph.m-danger g.m-node:not(.m-flat) polygon,
 .m-graph.m-danger g.m-edge text,
-.m-graph.m-danger g.m-node.m-flat text {
+.m-graph.m-danger g.m-node.m-flat text,
+.m-graph.m-danger g.m-cluster text {
   fill: #cd3431;
 }
 .m-graph.m-danger g.m-edge polygon,
 .m-graph.m-danger g.m-edge path,
 .m-graph.m-danger g.m-node ellipse,
 .m-graph.m-danger g.m-node polygon,
-.m-graph.m-danger g.m-node polyline {
+.m-graph.m-danger g.m-node polyline,
+.m-graph.m-danger g.m-cluster polygon {
   stroke: #cd3431;
 }
 .m-math.m-info, .m-math g.m-info, .m-math rect.m-info,
@@ -1603,14 +1616,16 @@ div.m-plot svg .m-bar.m-info,
 .m-graph.m-info g.m-node:not(.m-flat) ellipse,
 .m-graph.m-info g.m-node:not(.m-flat) polygon,
 .m-graph.m-info g.m-edge text,
-.m-graph.m-info g.m-node.m-flat text {
+.m-graph.m-info g.m-node.m-flat text,
+.m-graph.m-info g.m-cluster text {
   fill: #2f83cc;
 }
 .m-graph.m-info g.m-edge polygon,
 .m-graph.m-info g.m-edge path,
 .m-graph.m-info g.m-node ellipse,
 .m-graph.m-info g.m-node polygon,
-.m-graph.m-info g.m-node polyline {
+.m-graph.m-info g.m-node polyline,
+.m-graph.m-info g.m-cluster polygon {
   stroke: #2f83cc;
 }
 .m-math.m-dim, .m-math g.m-dim, .m-math rect.m-dim,
@@ -1619,112 +1634,128 @@ div.m-plot svg .m-bar.m-dim,
 .m-graph.m-dim g.m-node:not(.m-flat) ellipse,
 .m-graph.m-dim g.m-node:not(.m-flat) polygon,
 .m-graph.m-dim g.m-edge text,
-.m-graph.m-dim g.m-node.m-flat text {
+.m-graph.m-dim g.m-node.m-flat text,
+.m-graph.m-dim g.m-cluster text {
   fill: #747474;
 }
 .m-graph.m-dim g.m-edge polygon,
 .m-graph.m-dim g.m-edge path,
 .m-graph.m-dim g.m-node ellipse,
 .m-graph.m-dim g.m-node polygon,
-.m-graph.m-dim g.m-node polyline {
+.m-graph.m-dim g.m-node polyline,
+.m-graph.m-dim g.m-cluster polygon {
   stroke: #747474;
 }
 .m-graph g.m-edge.m-default polygon,
 .m-graph g.m-node.m-default:not(.m-flat) ellipse,
 .m-graph g.m-node.m-default:not(.m-flat) polygon,
 .m-graph g.m-edge.m-default text,
-.m-graph g.m-node.m-default.m-flat text {
+.m-graph g.m-node.m-default.m-flat text,
+.m-graph g.m-cluster.m-default text {
   fill: #dcdcdc;
 }
 .m-graph g.m-edge.m-default polygon,
 .m-graph g.m-edge.m-default path,
 .m-graph g.m-node.m-default ellipse,
 .m-graph g.m-node.m-default polygon,
-.m-graph g.m-node.m-default polyline {
+.m-graph g.m-node.m-default polyline,
+.m-graph g.m-cluster.m-default polygon {
   stroke: #dcdcdc;
 }
 .m-graph g.m-edge.m-primary polygon,
 .m-graph g.m-node.m-primary:not(.m-flat) ellipse,
 .m-graph g.m-node.m-primary:not(.m-flat) polygon,
 .m-graph g.m-edge.m-primary text,
-.m-graph g.m-node.m-primary.m-flat text {
+.m-graph g.m-node.m-primary.m-flat text,
+.m-graph g.m-cluster.m-primary text {
   fill: #a5c9ea;
 }
 .m-graph g.m-edge.m-primary polygon,
 .m-graph g.m-edge.m-primary path,
 .m-graph g.m-node.m-primary ellipse,
 .m-graph g.m-node.m-primary polygon,
-.m-graph g.m-node.m-primary polyline {
+.m-graph g.m-node.m-primary polyline,
+.m-graph g.m-cluster.m-primary polygon {
   stroke: #a5c9ea;
 }
 .m-graph g.m-edge.m-success polygon,
 .m-graph g.m-node.m-success:not(.m-flat) ellipse,
 .m-graph g.m-node.m-success:not(.m-flat) polygon,
 .m-graph g.m-edge.m-success text,
-.m-graph g.m-node.m-success.m-flat text {
+.m-graph g.m-node.m-success.m-flat text,
+.m-graph g.m-cluster.m-success text {
   fill: #3bd267;
 }
 .m-graph g.m-edge.m-success polygon,
 .m-graph g.m-edge.m-success path,
 .m-graph g.m-node.m-success ellipse,
 .m-graph g.m-node.m-success polygon,
-.m-graph g.m-node.m-success polyline {
+.m-graph g.m-node.m-success polyline,
+.m-graph g.m-cluster.m-success polygon {
   stroke: #3bd267;
 }
 .m-graph g.m-edge.m-warning polygon,
 .m-graph g.m-node.m-warning:not(.m-flat) ellipse,
 .m-graph g.m-node.m-warning:not(.m-flat) polygon,
 .m-graph g.m-edge.m-warning text,
-.m-graph g.m-node.m-warning.m-flat text {
+.m-graph g.m-node.m-warning.m-flat text,
+.m-graph g.m-cluster.m-warning text {
   fill: #c7cf2f;
 }
 .m-graph g.m-edge.m-warning polygon,
 .m-graph g.m-edge.m-warning path,
 .m-graph g.m-node.m-warning ellipse,
 .m-graph g.m-node.m-warning polygon,
-.m-graph g.m-node.m-warning polyline {
+.m-graph g.m-node.m-warning polyline,
+.m-graph g.m-cluster.m-warning polygon {
   stroke: #c7cf2f;
 }
 .m-graph g.m-edge.m-danger polygon,
 .m-graph g.m-node.m-danger:not(.m-flat) ellipse,
 .m-graph g.m-node.m-danger:not(.m-flat) polygon,
 .m-graph g.m-edge.m-danger text,
-.m-graph g.m-node.m-danger.m-flat text {
+.m-graph g.m-node.m-danger.m-flat text,
+.m-graph g.m-cluster.m-danger text {
   fill: #cd3431;
 }
 .m-graph g.m-edge.m-danger polygon,
 .m-graph g.m-edge.m-danger path,
 .m-graph g.m-node.m-danger ellipse,
 .m-graph g.m-node.m-danger polygon,
-.m-graph g.m-node.m-danger polyline {
+.m-graph g.m-node.m-danger polyline,
+.m-graph g.m-cluster.m-danger polygon {
   stroke: #cd3431;
 }
 .m-graph g.m-edge.m-info polygon,
 .m-graph g.m-node.m-info:not(.m-flat) ellipse,
 .m-graph g.m-node.m-info:not(.m-flat) polygon,
 .m-graph g.m-edge.m-info text,
-.m-graph g.m-node.m-info.m-flat text {
+.m-graph g.m-node.m-info.m-flat text,
+.m-graph g.m-cluster.m-info text {
   fill: #2f83cc;
 }
 .m-graph g.m-edge.m-info polygon,
 .m-graph g.m-edge.m-info path,
 .m-graph g.m-node.m-info ellipse,
 .m-graph g.m-node.m-info polygon,
-.m-graph g.m-node.m-info polyline {
+.m-graph g.m-node.m-info polyline,
+.m-graph g.m-cluster.m-info polygon {
   stroke: #2f83cc;
 }
 .m-graph g.m-edge.m-dim polygon,
 .m-graph g.m-node.m-dim:not(.m-flat) ellipse,
 .m-graph g.m-node.m-dim:not(.m-flat) polygon,
 .m-graph g.m-edge.m-dim text,
-.m-graph g.m-node.m-dim.m-flat text {
+.m-graph g.m-node.m-dim.m-flat text,
+.m-graph g.m-cluster.m-dim text {
   fill: #747474;
 }
 .m-graph g.m-edge.m-dim polygon,
 .m-graph g.m-edge.m-dim path,
 .m-graph g.m-node.m-dim ellipse,
 .m-graph g.m-node.m-dim polygon,
-.m-graph g.m-node.m-dim polyline {
+.m-graph g.m-node.m-dim polyline,
+.m-graph g.m-cluster.m-dim polygon {
   stroke: #747474;
 }
 p, ul, ol, dl, blockquote, pre, .m-code-figure, .m-console-figure, hr, .m-note,
diff --git a/css/m-light+documentation.compiled.css b/css/m-light+documentation.compiled.css
index 9b54c282..939c1342 100644
--- a/css/m-light+documentation.compiled.css
+++ b/css/m-light+documentation.compiled.css
@@ -1200,7 +1200,8 @@ div.m-plot svg .m-error {
   stroke-width: 1.5;
 }
 div.m-plot svg .m-label.m-dim { fill: #bdbdbd; }
-.m-graph g.m-edge path, .m-graph g.m-node.m-flat ellipse,
+.m-graph g.m-edge path, .m-graph g.m-cluster polygon,
+.m-graph g.m-node.m-flat ellipse,
 .m-graph g.m-node.m-flat polygon {
   fill: none;
 }
@@ -1514,11 +1515,13 @@ div.m-plot svg .m-bar.m-default,
 .m-graph g.m-node:not(.m-flat) polygon,
 .m-graph g.m-edge text,
 .m-graph g.m-node.m-flat text,
+.m-graph g.m-cluster text,
 .m-graph.m-default g.m-edge polygon,
 .m-graph.m-default g.m-node:not(.m-flat) ellipse,
 .m-graph.m-default g.m-node:not(.m-flat) polygon,
 .m-graph.m-default g.m-edge text,
-.m-graph.m-default g.m-node.m-flat text {
+.m-graph.m-default g.m-node.m-flat text,
+.m-graph.m-default g.m-cluster text {
   fill: #000000;
 }
 .m-graph g.m-edge polygon,
@@ -1526,11 +1529,13 @@ div.m-plot svg .m-bar.m-default,
 .m-graph g.m-node ellipse,
 .m-graph g.m-node polygon,
 .m-graph g.m-node polyline,
+.m-graph g.m-cluster polygon,
 .m-graph.m-default g.m-edge polygon,
 .m-graph.m-default g.m-edge path,
 .m-graph.m-default g.m-node ellipse,
 .m-graph.m-default g.m-node polygon,
-.m-graph.m-default g.m-node polyline {
+.m-graph.m-default g.m-node polyline,
+.m-graph.m-default g.m-cluster polygon {
   stroke: #000000;
 }
 .m-math.m-primary, .m-math g.m-primary, .m-math rect.m-primary,
@@ -1539,14 +1544,16 @@ div.m-plot svg .m-bar.m-primary,
 .m-graph.m-primary g.m-node:not(.m-flat) ellipse,
 .m-graph.m-primary g.m-node:not(.m-flat) polygon,
 .m-graph.m-primary g.m-edge text,
-.m-graph.m-primary g.m-node.m-flat text {
+.m-graph.m-primary g.m-node.m-flat text,
+.m-graph.m-primary g.m-cluster text {
   fill: #cb4b16;
 }
 .m-graph.m-primary g.m-edge polygon,
 .m-graph.m-primary g.m-edge path,
 .m-graph.m-primary g.m-node ellipse,
 .m-graph.m-primary g.m-node polygon,
-.m-graph.m-primary g.m-node polyline {
+.m-graph.m-primary g.m-node polyline,
+.m-graph.m-primary g.m-cluster polygon {
   stroke: #cb4b16;
 }
 .m-math.m-success, .m-math g.m-success, .m-math rect.m-success,
@@ -1555,14 +1562,16 @@ div.m-plot svg .m-bar.m-success,
 .m-graph.m-success g.m-node:not(.m-flat) ellipse,
 .m-graph.m-success g.m-node:not(.m-flat) polygon,
 .m-graph.m-success g.m-edge text,
-.m-graph.m-success g.m-node.m-flat text {
+.m-graph.m-success g.m-node.m-flat text,
+.m-graph.m-success g.m-cluster text {
   fill: #31c25d;
 }
 .m-graph.m-success g.m-edge polygon,
 .m-graph.m-success g.m-edge path,
 .m-graph.m-success g.m-node ellipse,
 .m-graph.m-success g.m-node polygon,
-.m-graph.m-success g.m-node polyline {
+.m-graph.m-success g.m-node polyline,
+.m-graph.m-success g.m-cluster polygon {
   stroke: #31c25d;
 }
 .m-math.m-warning, .m-math g.m-warning, .m-math rect.m-warning,
@@ -1571,14 +1580,16 @@ div.m-plot svg .m-bar.m-warning,
 .m-graph.m-warning g.m-node:not(.m-flat) ellipse,
 .m-graph.m-warning g.m-node:not(.m-flat) polygon,
 .m-graph.m-warning g.m-edge text,
-.m-graph.m-warning g.m-node.m-flat text {
+.m-graph.m-warning g.m-node.m-flat text,
+.m-graph.m-warning g.m-cluster text {
   fill: #c7cf2f;
 }
 .m-graph.m-warning g.m-edge polygon,
 .m-graph.m-warning g.m-edge path,
 .m-graph.m-warning g.m-node ellipse,
 .m-graph.m-warning g.m-node polygon,
-.m-graph.m-warning g.m-node polyline {
+.m-graph.m-warning g.m-node polyline,
+.m-graph.m-warning g.m-cluster polygon {
   stroke: #c7cf2f;
 }
 .m-math.m-danger, .m-math g.m-danger, .m-math rect.m-danger,
@@ -1587,14 +1598,16 @@ div.m-plot svg .m-bar.m-danger,
 .m-graph.m-danger g.m-node:not(.m-flat) ellipse,
 .m-graph.m-danger g.m-node:not(.m-flat) polygon,
 .m-graph.m-danger g.m-edge text,
-.m-graph.m-danger g.m-node.m-flat text {
+.m-graph.m-danger g.m-node.m-flat text,
+.m-graph.m-danger g.m-cluster text {
   fill: #f60000;
 }
 .m-graph.m-danger g.m-edge polygon,
 .m-graph.m-danger g.m-edge path,
 .m-graph.m-danger g.m-node ellipse,
 .m-graph.m-danger g.m-node polygon,
-.m-graph.m-danger g.m-node polyline {
+.m-graph.m-danger g.m-node polyline,
+.m-graph.m-danger g.m-cluster polygon {
   stroke: #f60000;
 }
 .m-math.m-info, .m-math g.m-info, .m-math rect.m-info,
@@ -1603,14 +1616,16 @@ div.m-plot svg .m-bar.m-info,
 .m-graph.m-info g.m-node:not(.m-flat) ellipse,
 .m-graph.m-info g.m-node:not(.m-flat) polygon,
 .m-graph.m-info g.m-edge text,
-.m-graph.m-info g.m-node.m-flat text {
+.m-graph.m-info g.m-node.m-flat text,
+.m-graph.m-info g.m-cluster text {
   fill: #2e7dc5;
 }
 .m-graph.m-info g.m-edge polygon,
 .m-graph.m-info g.m-edge path,
 .m-graph.m-info g.m-node ellipse,
 .m-graph.m-info g.m-node polygon,
-.m-graph.m-info g.m-node polyline {
+.m-graph.m-info g.m-node polyline,
+.m-graph.m-info g.m-cluster polygon {
   stroke: #2e7dc5;
 }
 .m-math.m-dim, .m-math g.m-dim, .m-math rect.m-dim,
@@ -1619,112 +1634,128 @@ div.m-plot svg .m-bar.m-dim,
 .m-graph.m-dim g.m-node:not(.m-flat) ellipse,
 .m-graph.m-dim g.m-node:not(.m-flat) polygon,
 .m-graph.m-dim g.m-edge text,
-.m-graph.m-dim g.m-node.m-flat text {
+.m-graph.m-dim g.m-node.m-flat text,
+.m-graph.m-dim g.m-cluster text {
   fill: #bdbdbd;
 }
 .m-graph.m-dim g.m-edge polygon,
 .m-graph.m-dim g.m-edge path,
 .m-graph.m-dim g.m-node ellipse,
 .m-graph.m-dim g.m-node polygon,
-.m-graph.m-dim g.m-node polyline {
+.m-graph.m-dim g.m-node polyline,
+.m-graph.m-dim g.m-cluster polygon {
   stroke: #bdbdbd;
 }
 .m-graph g.m-edge.m-default polygon,
 .m-graph g.m-node.m-default:not(.m-flat) ellipse,
 .m-graph g.m-node.m-default:not(.m-flat) polygon,
 .m-graph g.m-edge.m-default text,
-.m-graph g.m-node.m-default.m-flat text {
+.m-graph g.m-node.m-default.m-flat text,
+.m-graph g.m-cluster.m-default text {
   fill: #000000;
 }
 .m-graph g.m-edge.m-default polygon,
 .m-graph g.m-edge.m-default path,
 .m-graph g.m-node.m-default ellipse,
 .m-graph g.m-node.m-default polygon,
-.m-graph g.m-node.m-default polyline {
+.m-graph g.m-node.m-default polyline,
+.m-graph g.m-cluster.m-default polygon {
   stroke: #000000;
 }
 .m-graph g.m-edge.m-primary polygon,
 .m-graph g.m-node.m-primary:not(.m-flat) ellipse,
 .m-graph g.m-node.m-primary:not(.m-flat) polygon,
 .m-graph g.m-edge.m-primary text,
-.m-graph g.m-node.m-primary.m-flat text {
+.m-graph g.m-node.m-primary.m-flat text,
+.m-graph g.m-cluster.m-primary text {
   fill: #cb4b16;
 }
 .m-graph g.m-edge.m-primary polygon,
 .m-graph g.m-edge.m-primary path,
 .m-graph g.m-node.m-primary ellipse,
 .m-graph g.m-node.m-primary polygon,
-.m-graph g.m-node.m-primary polyline {
+.m-graph g.m-node.m-primary polyline,
+.m-graph g.m-cluster.m-primary polygon {
   stroke: #cb4b16;
 }
 .m-graph g.m-edge.m-success polygon,
 .m-graph g.m-node.m-success:not(.m-flat) ellipse,
 .m-graph g.m-node.m-success:not(.m-flat) polygon,
 .m-graph g.m-edge.m-success text,
-.m-graph g.m-node.m-success.m-flat text {
+.m-graph g.m-node.m-success.m-flat text,
+.m-graph g.m-cluster.m-success text {
   fill: #31c25d;
 }
 .m-graph g.m-edge.m-success polygon,
 .m-graph g.m-edge.m-success path,
 .m-graph g.m-node.m-success ellipse,
 .m-graph g.m-node.m-success polygon,
-.m-graph g.m-node.m-success polyline {
+.m-graph g.m-node.m-success polyline,
+.m-graph g.m-cluster.m-success polygon {
   stroke: #31c25d;
 }
 .m-graph g.m-edge.m-warning polygon,
 .m-graph g.m-node.m-warning:not(.m-flat) ellipse,
 .m-graph g.m-node.m-warning:not(.m-flat) polygon,
 .m-graph g.m-edge.m-warning text,
-.m-graph g.m-node.m-warning.m-flat text {
+.m-graph g.m-node.m-warning.m-flat text,
+.m-graph g.m-cluster.m-warning text {
   fill: #c7cf2f;
 }
 .m-graph g.m-edge.m-warning polygon,
 .m-graph g.m-edge.m-warning path,
 .m-graph g.m-node.m-warning ellipse,
 .m-graph g.m-node.m-warning polygon,
-.m-graph g.m-node.m-warning polyline {
+.m-graph g.m-node.m-warning polyline,
+.m-graph g.m-cluster.m-warning polygon {
   stroke: #c7cf2f;
 }
 .m-graph g.m-edge.m-danger polygon,
 .m-graph g.m-node.m-danger:not(.m-flat) ellipse,
 .m-graph g.m-node.m-danger:not(.m-flat) polygon,
 .m-graph g.m-edge.m-danger text,
-.m-graph g.m-node.m-danger.m-flat text {
+.m-graph g.m-node.m-danger.m-flat text,
+.m-graph g.m-cluster.m-danger text {
   fill: #f60000;
 }
 .m-graph g.m-edge.m-danger polygon,
 .m-graph g.m-edge.m-danger path,
 .m-graph g.m-node.m-danger ellipse,
 .m-graph g.m-node.m-danger polygon,
-.m-graph g.m-node.m-danger polyline {
+.m-graph g.m-node.m-danger polyline,
+.m-graph g.m-cluster.m-danger polygon {
   stroke: #f60000;
 }
 .m-graph g.m-edge.m-info polygon,
 .m-graph g.m-node.m-info:not(.m-flat) ellipse,
 .m-graph g.m-node.m-info:not(.m-flat) polygon,
 .m-graph g.m-edge.m-info text,
-.m-graph g.m-node.m-info.m-flat text {
+.m-graph g.m-node.m-info.m-flat text,
+.m-graph g.m-cluster.m-info text {
   fill: #2e7dc5;
 }
 .m-graph g.m-edge.m-info polygon,
 .m-graph g.m-edge.m-info path,
 .m-graph g.m-node.m-info ellipse,
 .m-graph g.m-node.m-info polygon,
-.m-graph g.m-node.m-info polyline {
+.m-graph g.m-node.m-info polyline,
+.m-graph g.m-cluster.m-info polygon {
   stroke: #2e7dc5;
 }
 .m-graph g.m-edge.m-dim polygon,
 .m-graph g.m-node.m-dim:not(.m-flat) ellipse,
 .m-graph g.m-node.m-dim:not(.m-flat) polygon,
 .m-graph g.m-edge.m-dim text,
-.m-graph g.m-node.m-dim.m-flat text {
+.m-graph g.m-node.m-dim.m-flat text,
+.m-graph g.m-cluster.m-dim text {
   fill: #bdbdbd;
 }
 .m-graph g.m-edge.m-dim polygon,
 .m-graph g.m-edge.m-dim path,
 .m-graph g.m-node.m-dim ellipse,
 .m-graph g.m-node.m-dim polygon,
-.m-graph g.m-node.m-dim polyline {
+.m-graph g.m-node.m-dim polyline,
+.m-graph g.m-cluster.m-dim polygon {
   stroke: #bdbdbd;
 }
 p, ul, ol, dl, blockquote, pre, .m-code-figure, .m-console-figure, hr, .m-note,
diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index 8dfec38e..97474a8c 100644
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -1200,7 +1200,8 @@ div.m-plot svg .m-error {
   stroke-width: 1.5;
 }
 div.m-plot svg .m-label.m-dim { fill: #bdbdbd; }
-.m-graph g.m-edge path, .m-graph g.m-node.m-flat ellipse,
+.m-graph g.m-edge path, .m-graph g.m-cluster polygon,
+.m-graph g.m-node.m-flat ellipse,
 .m-graph g.m-node.m-flat polygon {
   fill: none;
 }
@@ -1514,11 +1515,13 @@ div.m-plot svg .m-bar.m-default,
 .m-graph g.m-node:not(.m-flat) polygon,
 .m-graph g.m-edge text,
 .m-graph g.m-node.m-flat text,
+.m-graph g.m-cluster text,
 .m-graph.m-default g.m-edge polygon,
 .m-graph.m-default g.m-node:not(.m-flat) ellipse,
 .m-graph.m-default g.m-node:not(.m-flat) polygon,
 .m-graph.m-default g.m-edge text,
-.m-graph.m-default g.m-node.m-flat text {
+.m-graph.m-default g.m-node.m-flat text,
+.m-graph.m-default g.m-cluster text {
   fill: #000000;
 }
 .m-graph g.m-edge polygon,
@@ -1526,11 +1529,13 @@ div.m-plot svg .m-bar.m-default,
 .m-graph g.m-node ellipse,
 .m-graph g.m-node polygon,
 .m-graph g.m-node polyline,
+.m-graph g.m-cluster polygon,
 .m-graph.m-default g.m-edge polygon,
 .m-graph.m-default g.m-edge path,
 .m-graph.m-default g.m-node ellipse,
 .m-graph.m-default g.m-node polygon,
-.m-graph.m-default g.m-node polyline {
+.m-graph.m-default g.m-node polyline,
+.m-graph.m-default g.m-cluster polygon {
   stroke: #000000;
 }
 .m-math.m-primary, .m-math g.m-primary, .m-math rect.m-primary,
@@ -1539,14 +1544,16 @@ div.m-plot svg .m-bar.m-primary,
 .m-graph.m-primary g.m-node:not(.m-flat) ellipse,
 .m-graph.m-primary g.m-node:not(.m-flat) polygon,
 .m-graph.m-primary g.m-edge text,
-.m-graph.m-primary g.m-node.m-flat text {
+.m-graph.m-primary g.m-node.m-flat text,
+.m-graph.m-primary g.m-cluster text {
   fill: #cb4b16;
 }
 .m-graph.m-primary g.m-edge polygon,
 .m-graph.m-primary g.m-edge path,
 .m-graph.m-primary g.m-node ellipse,
 .m-graph.m-primary g.m-node polygon,
-.m-graph.m-primary g.m-node polyline {
+.m-graph.m-primary g.m-node polyline,
+.m-graph.m-primary g.m-cluster polygon {
   stroke: #cb4b16;
 }
 .m-math.m-success, .m-math g.m-success, .m-math rect.m-success,
@@ -1555,14 +1562,16 @@ div.m-plot svg .m-bar.m-success,
 .m-graph.m-success g.m-node:not(.m-flat) ellipse,
 .m-graph.m-success g.m-node:not(.m-flat) polygon,
 .m-graph.m-success g.m-edge text,
-.m-graph.m-success g.m-node.m-flat text {
+.m-graph.m-success g.m-node.m-flat text,
+.m-graph.m-success g.m-cluster text {
   fill: #31c25d;
 }
 .m-graph.m-success g.m-edge polygon,
 .m-graph.m-success g.m-edge path,
 .m-graph.m-success g.m-node ellipse,
 .m-graph.m-success g.m-node polygon,
-.m-graph.m-success g.m-node polyline {
+.m-graph.m-success g.m-node polyline,
+.m-graph.m-success g.m-cluster polygon {
   stroke: #31c25d;
 }
 .m-math.m-warning, .m-math g.m-warning, .m-math rect.m-warning,
@@ -1571,14 +1580,16 @@ div.m-plot svg .m-bar.m-warning,
 .m-graph.m-warning g.m-node:not(.m-flat) ellipse,
 .m-graph.m-warning g.m-node:not(.m-flat) polygon,
 .m-graph.m-warning g.m-edge text,
-.m-graph.m-warning g.m-node.m-flat text {
+.m-graph.m-warning g.m-node.m-flat text,
+.m-graph.m-warning g.m-cluster text {
   fill: #c7cf2f;
 }
 .m-graph.m-warning g.m-edge polygon,
 .m-graph.m-warning g.m-edge path,
 .m-graph.m-warning g.m-node ellipse,
 .m-graph.m-warning g.m-node polygon,
-.m-graph.m-warning g.m-node polyline {
+.m-graph.m-warning g.m-node polyline,
+.m-graph.m-warning g.m-cluster polygon {
   stroke: #c7cf2f;
 }
 .m-math.m-danger, .m-math g.m-danger, .m-math rect.m-danger,
@@ -1587,14 +1598,16 @@ div.m-plot svg .m-bar.m-danger,
 .m-graph.m-danger g.m-node:not(.m-flat) ellipse,
 .m-graph.m-danger g.m-node:not(.m-flat) polygon,
 .m-graph.m-danger g.m-edge text,
-.m-graph.m-danger g.m-node.m-flat text {
+.m-graph.m-danger g.m-node.m-flat text,
+.m-graph.m-danger g.m-cluster text {
   fill: #f60000;
 }
 .m-graph.m-danger g.m-edge polygon,
 .m-graph.m-danger g.m-edge path,
 .m-graph.m-danger g.m-node ellipse,
 .m-graph.m-danger g.m-node polygon,
-.m-graph.m-danger g.m-node polyline {
+.m-graph.m-danger g.m-node polyline,
+.m-graph.m-danger g.m-cluster polygon {
   stroke: #f60000;
 }
 .m-math.m-info, .m-math g.m-info, .m-math rect.m-info,
@@ -1603,14 +1616,16 @@ div.m-plot svg .m-bar.m-info,
 .m-graph.m-info g.m-node:not(.m-flat) ellipse,
 .m-graph.m-info g.m-node:not(.m-flat) polygon,
 .m-graph.m-info g.m-edge text,
-.m-graph.m-info g.m-node.m-flat text {
+.m-graph.m-info g.m-node.m-flat text,
+.m-graph.m-info g.m-cluster text {
   fill: #2e7dc5;
 }
 .m-graph.m-info g.m-edge polygon,
 .m-graph.m-info g.m-edge path,
 .m-graph.m-info g.m-node ellipse,
 .m-graph.m-info g.m-node polygon,
-.m-graph.m-info g.m-node polyline {
+.m-graph.m-info g.m-node polyline,
+.m-graph.m-info g.m-cluster polygon {
   stroke: #2e7dc5;
 }
 .m-math.m-dim, .m-math g.m-dim, .m-math rect.m-dim,
@@ -1619,112 +1634,128 @@ div.m-plot svg .m-bar.m-dim,
 .m-graph.m-dim g.m-node:not(.m-flat) ellipse,
 .m-graph.m-dim g.m-node:not(.m-flat) polygon,
 .m-graph.m-dim g.m-edge text,
-.m-graph.m-dim g.m-node.m-flat text {
+.m-graph.m-dim g.m-node.m-flat text,
+.m-graph.m-dim g.m-cluster text {
   fill: #bdbdbd;
 }
 .m-graph.m-dim g.m-edge polygon,
 .m-graph.m-dim g.m-edge path,
 .m-graph.m-dim g.m-node ellipse,
 .m-graph.m-dim g.m-node polygon,
-.m-graph.m-dim g.m-node polyline {
+.m-graph.m-dim g.m-node polyline,
+.m-graph.m-dim g.m-cluster polygon {
   stroke: #bdbdbd;
 }
 .m-graph g.m-edge.m-default polygon,
 .m-graph g.m-node.m-default:not(.m-flat) ellipse,
 .m-graph g.m-node.m-default:not(.m-flat) polygon,
 .m-graph g.m-edge.m-default text,
-.m-graph g.m-node.m-default.m-flat text {
+.m-graph g.m-node.m-default.m-flat text,
+.m-graph g.m-cluster.m-default text {
   fill: #000000;
 }
 .m-graph g.m-edge.m-default polygon,
 .m-graph g.m-edge.m-default path,
 .m-graph g.m-node.m-default ellipse,
 .m-graph g.m-node.m-default polygon,
-.m-graph g.m-node.m-default polyline {
+.m-graph g.m-node.m-default polyline,
+.m-graph g.m-cluster.m-default polygon {
   stroke: #000000;
 }
 .m-graph g.m-edge.m-primary polygon,
 .m-graph g.m-node.m-primary:not(.m-flat) ellipse,
 .m-graph g.m-node.m-primary:not(.m-flat) polygon,
 .m-graph g.m-edge.m-primary text,
-.m-graph g.m-node.m-primary.m-flat text {
+.m-graph g.m-node.m-primary.m-flat text,
+.m-graph g.m-cluster.m-primary text {
   fill: #cb4b16;
 }
 .m-graph g.m-edge.m-primary polygon,
 .m-graph g.m-edge.m-primary path,
 .m-graph g.m-node.m-primary ellipse,
 .m-graph g.m-node.m-primary polygon,
-.m-graph g.m-node.m-primary polyline {
+.m-graph g.m-node.m-primary polyline,
+.m-graph g.m-cluster.m-primary polygon {
   stroke: #cb4b16;
 }
 .m-graph g.m-edge.m-success polygon,
 .m-graph g.m-node.m-success:not(.m-flat) ellipse,
 .m-graph g.m-node.m-success:not(.m-flat) polygon,
 .m-graph g.m-edge.m-success text,
-.m-graph g.m-node.m-success.m-flat text {
+.m-graph g.m-node.m-success.m-flat text,
+.m-graph g.m-cluster.m-success text {
   fill: #31c25d;
 }
 .m-graph g.m-edge.m-success polygon,
 .m-graph g.m-edge.m-success path,
 .m-graph g.m-node.m-success ellipse,
 .m-graph g.m-node.m-success polygon,
-.m-graph g.m-node.m-success polyline {
+.m-graph g.m-node.m-success polyline,
+.m-graph g.m-cluster.m-success polygon {
   stroke: #31c25d;
 }
 .m-graph g.m-edge.m-warning polygon,
 .m-graph g.m-node.m-warning:not(.m-flat) ellipse,
 .m-graph g.m-node.m-warning:not(.m-flat) polygon,
 .m-graph g.m-edge.m-warning text,
-.m-graph g.m-node.m-warning.m-flat text {
+.m-graph g.m-node.m-warning.m-flat text,
+.m-graph g.m-cluster.m-warning text {
   fill: #c7cf2f;
 }
 .m-graph g.m-edge.m-warning polygon,
 .m-graph g.m-edge.m-warning path,
 .m-graph g.m-node.m-warning ellipse,
 .m-graph g.m-node.m-warning polygon,
-.m-graph g.m-node.m-warning polyline {
+.m-graph g.m-node.m-warning polyline,
+.m-graph g.m-cluster.m-warning polygon {
   stroke: #c7cf2f;
 }
 .m-graph g.m-edge.m-danger polygon,
 .m-graph g.m-node.m-danger:not(.m-flat) ellipse,
 .m-graph g.m-node.m-danger:not(.m-flat) polygon,
 .m-graph g.m-edge.m-danger text,
-.m-graph g.m-node.m-danger.m-flat text {
+.m-graph g.m-node.m-danger.m-flat text,
+.m-graph g.m-cluster.m-danger text {
   fill: #f60000;
 }
 .m-graph g.m-edge.m-danger polygon,
 .m-graph g.m-edge.m-danger path,
 .m-graph g.m-node.m-danger ellipse,
 .m-graph g.m-node.m-danger polygon,
-.m-graph g.m-node.m-danger polyline {
+.m-graph g.m-node.m-danger polyline,
+.m-graph g.m-cluster.m-danger polygon {
   stroke: #f60000;
 }
 .m-graph g.m-edge.m-info polygon,
 .m-graph g.m-node.m-info:not(.m-flat) ellipse,
 .m-graph g.m-node.m-info:not(.m-flat) polygon,
 .m-graph g.m-edge.m-info text,
-.m-graph g.m-node.m-info.m-flat text {
+.m-graph g.m-node.m-info.m-flat text,
+.m-graph g.m-cluster.m-info text {
   fill: #2e7dc5;
 }
 .m-graph g.m-edge.m-info polygon,
 .m-graph g.m-edge.m-info path,
 .m-graph g.m-node.m-info ellipse,
 .m-graph g.m-node.m-info polygon,
-.m-graph g.m-node.m-info polyline {
+.m-graph g.m-node.m-info polyline,
+.m-graph g.m-cluster.m-info polygon {
   stroke: #2e7dc5;
 }
 .m-graph g.m-edge.m-dim polygon,
 .m-graph g.m-node.m-dim:not(.m-flat) ellipse,
 .m-graph g.m-node.m-dim:not(.m-flat) polygon,
 .m-graph g.m-edge.m-dim text,
-.m-graph g.m-node.m-dim.m-flat text {
+.m-graph g.m-node.m-dim.m-flat text,
+.m-graph g.m-cluster.m-dim text {
   fill: #bdbdbd;
 }
 .m-graph g.m-edge.m-dim polygon,
 .m-graph g.m-edge.m-dim path,
 .m-graph g.m-node.m-dim ellipse,
 .m-graph g.m-node.m-dim polygon,
-.m-graph g.m-node.m-dim polyline {
+.m-graph g.m-node.m-dim polyline,
+.m-graph g.m-cluster.m-dim polygon {
   stroke: #bdbdbd;
 }
 p, ul, ol, dl, blockquote, pre, .m-code-figure, .m-console-figure, hr, .m-note,
diff --git a/doc/plugins/plots-and-graphs-test.rst b/doc/plugins/plots-and-graphs-test.rst
index 89d5c945..0d5c1a5e 100644
--- a/doc/plugins/plots-and-graphs-test.rst
+++ b/doc/plugins/plots-and-graphs-test.rst
@@ -62,10 +62,22 @@ Plots
 Graphs
 ======
 
-First is colored except the self-pointing "no", second is colored globally,
-third is colored globally with overrides except for the self-pointing "no".
+.. container:: m-row m-container-inflate
 
-.. container:: m-row
+    .. container:: m-col-m-4
+
+        All should be colored except the self-pointing "no" and the "?" arrow.
+
+    .. container:: m-col-m-4
+
+        All should be colored globally with the same color.
+
+    .. container:: m-col-m-4
+
+        All should be colored globally with overrides except for the
+        self-pointing "no" and the "?" arrow.
+
+.. container:: m-row m-container-inflate
 
     .. container:: m-col-m-4
 
@@ -77,6 +89,14 @@ third is colored globally with overrides except for the self-pointing "no".
             yes -> no [label="no", class="m-default"]
             no -> no [label="no"]
 
+            subgraph cluster_A {
+                label="Maybe"
+                class="m-default"
+
+                struct [label="{ ? | { ?! | !? }}", shape=record, class="m-default"]
+                struct -> yes [label="?"]
+            }
+
     .. container:: m-col-m-4
 
         .. digraph:: FSM
@@ -88,6 +108,13 @@ third is colored globally with overrides except for the self-pointing "no".
             yes -> no [label="no"]
             no -> no [label="no"]
 
+            subgraph cluster_A {
+                label="Maybe"
+
+                struct [label="{ ? | { ?! | !? }}", shape=record]
+                struct -> yes [label="?"]
+            }
+
     .. container:: m-col-m-4
 
         .. digraph:: FSM
@@ -99,6 +126,14 @@ third is colored globally with overrides except for the self-pointing "no".
             yes -> no [label="no", class="m-default"]
             no -> no [label="no"]
 
+            subgraph cluster_A {
+                label="Maybe"
+                class="m-default"
+
+                struct [label="{ ? | { ?! | !? }}", shape=record, class="m-default"]
+                struct -> yes [label="?"]
+            }
+
     .. container:: m-col-m-4
 
         .. digraph:: FSM
@@ -109,6 +144,14 @@ third is colored globally with overrides except for the self-pointing "no".
             yes -> no [label="no", class="m-primary"]
             no -> no [label="no"]
 
+            subgraph cluster_A {
+                label="Maybe"
+                class="m-primary"
+
+                struct [label="{ ? | { ?! | !? }}", shape=record, class="m-primary"]
+                struct -> yes [label="?"]
+            }
+
     .. container:: m-col-m-4
 
         .. digraph:: FSM
@@ -120,6 +163,13 @@ third is colored globally with overrides except for the self-pointing "no".
             yes -> no [label="no"]
             no -> no [label="no"]
 
+            subgraph cluster_A {
+                label="Maybe"
+
+                struct [label="{ ? | { ?! | !? }}", shape=record]
+                struct -> yes [label="?"]
+            }
+
     .. container:: m-col-m-4
 
         .. digraph:: FSM
@@ -131,6 +181,14 @@ third is colored globally with overrides except for the self-pointing "no".
             yes -> no [label="no", class="m-primary"]
             no -> no [label="no"]
 
+            subgraph cluster_A {
+                label="Maybe"
+                class="m-primary"
+
+                struct [label="{ ? | { ?! | !? }}", shape=record, class="m-primary"]
+                struct -> yes [label="?"]
+            }
+
     .. container:: m-col-m-4
 
         .. digraph:: FSM
@@ -141,6 +199,14 @@ third is colored globally with overrides except for the self-pointing "no".
             yes -> no [label="no", class="m-success"]
             no -> no [label="no"]
 
+            subgraph cluster_A {
+                label="Maybe"
+                class="m-success"
+
+                struct [label="{ ? | { ?! | !? }}", shape=record, class="m-success"]
+                struct -> yes [label="?"]
+            }
+
     .. container:: m-col-m-4
 
         .. digraph:: FSM
@@ -152,6 +218,13 @@ third is colored globally with overrides except for the self-pointing "no".
             yes -> no [label="no"]
             no -> no [label="no"]
 
+            subgraph cluster_A {
+                label="Maybe"
+
+                struct [label="{ ? | { ?! | !? }}", shape=record]
+                struct -> yes [label="?"]
+            }
+
     .. container:: m-col-m-4
 
         .. digraph:: FSM
@@ -163,6 +236,14 @@ third is colored globally with overrides except for the self-pointing "no".
             yes -> no [label="no", class="m-success"]
             no -> no [label="no"]
 
+            subgraph cluster_A {
+                label="Maybe"
+                class="m-success"
+
+                struct [label="{ ? | { ?! | !? }}", shape=record, class="m-success"]
+                struct -> yes [label="?"]
+            }
+
     .. container:: m-col-m-4
 
         .. digraph:: FSM
@@ -173,6 +254,14 @@ third is colored globally with overrides except for the self-pointing "no".
             yes -> no [label="no", class="m-warning"]
             no -> no [label="no"]
 
+            subgraph cluster_A {
+                label="Maybe"
+                class="m-warning"
+
+                struct [label="{ ? | { ?! | !? }}", shape=record, class="m-warning"]
+                struct -> yes [label="?"]
+            }
+
     .. container:: m-col-m-4
 
         .. digraph:: FSM
@@ -184,6 +273,13 @@ third is colored globally with overrides except for the self-pointing "no".
             yes -> no [label="no"]
             no -> no [label="no"]
 
+            subgraph cluster_A {
+                label="Maybe"
+
+                struct [label="{ ? | { ?! | !? }}", shape=record]
+                struct -> yes [label="?"]
+            }
+
     .. container:: m-col-m-4
 
         .. digraph:: FSM
@@ -195,6 +291,14 @@ third is colored globally with overrides except for the self-pointing "no".
             yes -> no [label="no", class="m-warning"]
             no -> no [label="no"]
 
+            subgraph cluster_A {
+                label="Maybe"
+                class="m-warning"
+
+                struct [label="{ ? | { ?! | !? }}", shape=record, class="m-warning"]
+                struct -> yes [label="?"]
+            }
+
     .. container:: m-col-m-4
 
         .. digraph:: FSM
@@ -205,6 +309,14 @@ third is colored globally with overrides except for the self-pointing "no".
             yes -> no [label="no", class="m-danger"]
             no -> no [label="no"]
 
+            subgraph cluster_A {
+                label="Maybe"
+                class="m-danger"
+
+                struct [label="{ ? | { ?! | !? }}", shape=record, class="m-danger"]
+                struct -> yes [label="?"]
+            }
+
     .. container:: m-col-m-4
 
         .. digraph:: FSM
@@ -216,6 +328,13 @@ third is colored globally with overrides except for the self-pointing "no".
             yes -> no [label="no"]
             no -> no [label="no"]
 
+            subgraph cluster_A {
+                label="Maybe"
+
+                struct [label="{ ? | { ?! | !? }}", shape=record]
+                struct -> yes [label="?"]
+            }
+
     .. container:: m-col-m-4
 
         .. digraph:: FSM
@@ -227,6 +346,14 @@ third is colored globally with overrides except for the self-pointing "no".
             yes -> no [label="no", class="m-danger"]
             no -> no [label="no"]
 
+            subgraph cluster_A {
+                label="Maybe"
+                class="m-danger"
+
+                struct [label="{ ? | { ?! | !? }}", shape=record, class="m-danger"]
+                struct -> yes [label="?"]
+            }
+
     .. container:: m-col-m-4
 
         .. digraph:: FSM
@@ -237,6 +364,14 @@ third is colored globally with overrides except for the self-pointing "no".
             yes -> no [label="no", class="m-info"]
             no -> no [label="no"]
 
+            subgraph cluster_A {
+                label="Maybe"
+                class="m-info"
+
+                struct [label="{ ? | { ?! | !? }}", shape=record, class="m-info"]
+                struct -> yes [label="?"]
+            }
+
     .. container:: m-col-m-4
 
         .. digraph:: FSM
@@ -248,6 +383,13 @@ third is colored globally with overrides except for the self-pointing "no".
             yes -> no [label="no"]
             no -> no [label="no"]
 
+            subgraph cluster_A {
+                label="Maybe"
+
+                struct [label="{ ? | { ?! | !? }}", shape=record]
+                struct -> yes [label="?"]
+            }
+
     .. container:: m-col-m-4
 
         .. digraph:: FSM
@@ -259,6 +401,14 @@ third is colored globally with overrides except for the self-pointing "no".
             yes -> no [label="no", class="m-info"]
             no -> no [label="no"]
 
+            subgraph cluster_A {
+                label="Maybe"
+                class="m-info"
+
+                struct [label="{ ? | { ?! | !? }}", shape=record, class="m-info"]
+                struct -> yes [label="?"]
+            }
+
     .. container:: m-col-m-4
 
         .. digraph:: FSM
@@ -269,6 +419,14 @@ third is colored globally with overrides except for the self-pointing "no".
             yes -> no [label="no", class="m-dim"]
             no -> no [label="no"]
 
+            subgraph cluster_A {
+                label="Maybe"
+                class="m-dim"
+
+                struct [label="{ ? | { ?! | !? }}", shape=record, class="m-dim"]
+                struct -> yes [label="?"]
+            }
+
     .. container:: m-col-m-4
 
         .. digraph:: FSM
@@ -280,6 +438,13 @@ third is colored globally with overrides except for the self-pointing "no".
             yes -> no [label="no"]
             no -> no [label="no"]
 
+            subgraph cluster_A {
+                label="Maybe"
+
+                struct [label="{ ? | { ?! | !? }}", shape=record]
+                struct -> yes [label="?"]
+            }
+
     .. container:: m-col-m-4
 
         .. digraph:: FSM
@@ -290,3 +455,11 @@ third is colored globally with overrides except for the self-pointing "no".
             no [shape=circle, class="m-dim"]
             yes -> no [label="no", class="m-dim"]
             no -> no [label="no"]
+
+            subgraph cluster_A {
+                label="Maybe"
+                class="m-dim"
+
+                struct [label="{ ? | { ?! | !? }}", shape=record, class="m-dim"]
+                struct -> yes [label="?"]
+            }
diff --git a/plugins/dot2svg.py b/plugins/dot2svg.py
index ae372ee2..0f8d52f3 100644
--- a/plugins/dot2svg.py
+++ b/plugins/dot2svg.py
@@ -41,7 +41,7 @@ _comment_src = re.compile(r"""<!--[^-]+-->\n""")
 
 # Graphviz < 2.40 (Ubuntu 16.04 and older) doesn't have a linebreak between <g>
 # and <title>
-_class_src = re.compile(r"""<g id="(edge|node)\d+" class="(?P<type>edge|node)(?P<classes>[^"]*)">[\n]?<title>(?P<title>[^<]*)</title>
+_class_src = re.compile(r"""<g id="(edge|node|clust)\d+" class="(?P<type>edge|node|cluster)(?P<classes>[^"]*)">[\n]?<title>(?P<title>[^<]*)</title>
 <(?P<element>ellipse|polygon|path|text)( fill="(?P<fill>[^"]+)" stroke="[^"]+")? """)
 
 _class_dst = r"""<g class="{classes}">
diff --git a/plugins/m/test/dot/page-238.html b/plugins/m/test/dot/page-238.html
index f3118a8f..30ef5863 100644
--- a/plugins/m/test/dot/page-238.html
+++ b/plugins/m/test/dot/page-238.html
@@ -279,6 +279,68 @@ and the arrowheads, nothing else. Non-default font size should be preserved.</p>
 </svg>
 </div>
 </figure>
+<p>Subgraphs:</p>
+<div class="m-graph">
+<svg style="width: 10.875rem; height: 17.625rem;" viewBox="0.00 0.00 174.00 282.31">
+<g transform="scale(1 1) rotate(0) translate(4 278.309)">
+<g class="m-cluster">
+<title>cluster_Outer</title>
+<polygon points="8,-8 8,-266.309 158,-266.309 158,-8 8,-8"/>
+<text text-anchor="middle" x="83" y="-249.509">Outer</text>
+</g>
+<g class="m-cluster">
+<title>cluster_Inner</title>
+<polygon points="80,-80.7696 80,-232.309 150,-232.309 150,-80.7696 80,-80.7696"/>
+<text text-anchor="middle" x="115" y="-215.509">Inner</text>
+</g>
+<g class="m-node m-flat">
+<title>A</title>
+<ellipse cx="43" cy="-179.924" rx="27" ry="18.2703"/>
+<text text-anchor="middle" x="43" y="-176.124">A</text>
+</g>
+<g class="m-node m-flat">
+<title>B</title>
+<ellipse cx="115" cy="-107.154" rx="27" ry="18.2703"/>
+<text text-anchor="middle" x="115" y="-103.354">B</text>
+</g>
+<g class="m-edge">
+<title>A&#45;&gt;B</title>
+<path d="M57.9184,-164.26C67.9585,-154.392 81.3763,-141.203 92.6801,-130.093"/>
+<polygon points="95.4224,-132.305 100.101,-122.799 90.5154,-127.313 95.4224,-132.305"/>
+</g>
+<g class="m-node m-flat">
+<title>C</title>
+<ellipse cx="43" cy="-107.154" rx="27" ry="18.2703"/>
+<text text-anchor="middle" x="43" y="-103.354">C</text>
+</g>
+<g class="m-edge">
+<title>A&#45;&gt;C</title>
+<path d="M43,-161.43C43,-153.748 43,-144.539 43,-135.955"/>
+<polygon points="46.5001,-135.938 43,-125.938 39.5001,-135.938 46.5001,-135.938"/>
+</g>
+<g class="m-node m-flat">
+<title>D</title>
+<ellipse cx="115" cy="-34.3848" rx="27" ry="18.2703"/>
+<text text-anchor="middle" x="115" y="-30.5848">D</text>
+</g>
+<g class="m-edge">
+<title>B&#45;&gt;D</title>
+<path d="M115,-88.6607C115,-80.9784 115,-71.7693 115,-63.185"/>
+<polygon points="118.5,-63.1687 115,-53.1687 111.5,-63.1687 118.5,-63.1687"/>
+</g>
+<g class="m-node m-flat">
+<title>B2</title>
+<ellipse cx="115" cy="-179.924" rx="27" ry="18.2703"/>
+<text text-anchor="middle" x="115" y="-176.124">B2</text>
+</g>
+<g class="m-edge">
+<title>B2&#45;&gt;B</title>
+<path d="M115,-161.43C115,-153.748 115,-144.539 115,-135.955"/>
+<polygon points="118.5,-135.938 115,-125.938 111.5,-135.938 118.5,-135.938"/>
+</g>
+</g>
+</svg>
+</div>
 <!-- /content -->
       </div>
     </div>
diff --git a/plugins/m/test/dot/page-240.html b/plugins/m/test/dot/page-240.html
index d23a177b..99b8c9a2 100644
--- a/plugins/m/test/dot/page-240.html
+++ b/plugins/m/test/dot/page-240.html
@@ -279,6 +279,7 @@ and the arrowheads, nothing else. Non-default font size should be preserved.</p>
 </svg>
 </div>
 </figure>
+<!-- Subgraphs are missing here because I don't have Graphviz 2.40 to test -->
 <!-- /content -->
       </div>
     </div>
diff --git a/plugins/m/test/dot/page.html b/plugins/m/test/dot/page.html
index 22777ce7..f860321c 100644
--- a/plugins/m/test/dot/page.html
+++ b/plugins/m/test/dot/page.html
@@ -279,6 +279,68 @@ and the arrowheads, nothing else. Non-default font size should be preserved.</p>
 </svg>
 </div>
 </figure>
+<p>Subgraphs:</p>
+<div class="m-graph">
+<svg style="width: 10.875rem; height: 17.625rem;" viewBox="0.00 0.00 174.00 282.31">
+<g transform="scale(1 1) rotate(0) translate(4 278.31)">
+<g class="m-cluster">
+<title>cluster_Outer</title>
+<polygon points="8,-8 8,-266.31 158,-266.31 158,-8 8,-8"/>
+<text text-anchor="middle" x="83" y="-249.51">Outer</text>
+</g>
+<g class="m-cluster m-info">
+<title>cluster_Inner</title>
+<polygon points="80,-80.77 80,-232.31 150,-232.31 150,-80.77 80,-80.77"/>
+<text text-anchor="middle" x="115" y="-215.51">Inner</text>
+</g>
+<g class="m-node m-flat">
+<title>A</title>
+<ellipse cx="43" cy="-179.92" rx="27" ry="18.27"/>
+<text text-anchor="middle" x="43" y="-176.12">A</text>
+</g>
+<g class="m-node m-flat">
+<title>B</title>
+<ellipse cx="115" cy="-107.15" rx="27" ry="18.27"/>
+<text text-anchor="middle" x="115" y="-103.35">B</text>
+</g>
+<g class="m-edge">
+<title>A&#45;&gt;B</title>
+<path d="M57.92,-164.26C67.96,-154.39 81.38,-141.2 92.68,-130.09"/>
+<polygon points="95.42,-132.31 100.1,-122.8 90.52,-127.31 95.42,-132.31"/>
+</g>
+<g class="m-node m-flat">
+<title>C</title>
+<ellipse cx="43" cy="-107.15" rx="27" ry="18.27"/>
+<text text-anchor="middle" x="43" y="-103.35">C</text>
+</g>
+<g class="m-edge">
+<title>A&#45;&gt;C</title>
+<path d="M43,-161.43C43,-153.75 43,-144.54 43,-135.95"/>
+<polygon points="46.5,-135.94 43,-125.94 39.5,-135.94 46.5,-135.94"/>
+</g>
+<g class="m-node m-flat">
+<title>D</title>
+<ellipse cx="115" cy="-34.38" rx="27" ry="18.27"/>
+<text text-anchor="middle" x="115" y="-30.58">D</text>
+</g>
+<g class="m-edge">
+<title>B&#45;&gt;D</title>
+<path d="M115,-88.66C115,-80.98 115,-71.77 115,-63.19"/>
+<polygon points="118.5,-63.17 115,-53.17 111.5,-63.17 118.5,-63.17"/>
+</g>
+<g class="m-node m-flat">
+<title>B2</title>
+<ellipse cx="115" cy="-179.92" rx="27" ry="18.27"/>
+<text text-anchor="middle" x="115" y="-176.12">B2</text>
+</g>
+<g class="m-edge">
+<title>B2&#45;&gt;B</title>
+<path d="M115,-161.43C115,-153.75 115,-144.54 115,-135.95"/>
+<polygon points="118.5,-135.94 115,-125.94 111.5,-135.94 118.5,-135.94"/>
+</g>
+</g>
+</svg>
+</div>
 <!-- /content -->
       </div>
     </div>
diff --git a/plugins/m/test/dot/page.rst b/plugins/m/test/dot/page.rst
index 36b7dcc7..0d997dfe 100644
--- a/plugins/m/test/dot/page.rst
+++ b/plugins/m/test/dot/page.rst
@@ -80,3 +80,26 @@ Structs:
         :class: m-danger
 
         a -> b
+
+Subgraphs:
+
+.. huh why the subgraphs have to be prefixed with cluster_?!
+
+.. digraph::
+
+    subgraph cluster_Outer {
+        label="Outer"
+
+        A -> B -> D
+
+        A -> C
+
+        subgraph cluster_Inner {
+            label="Inner"
+
+            class="m-info"
+
+            B2 -> B
+        }
+
+    }