luciano/d2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix md label with dark theme and c4 person shape when small

Browse source
This commit is contained in:
Alexander Wang 2025-03-11 19:53:45 -06:00
parent 9c74fb71e2
commit 8b324c4963
No known key found for this signature in database
GPG key ID: BE3937D0D52D8927
11 changed files with 2425 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
d2renderers/d2svg/d2svg.go
View file

@ -1746,9 +1746,10 @@ func drawShape(writer, appendixWriter io.Writer, diagramHash string, targetShape
}
if !color.IsThemeColor(targetShape.Color) {
styles = append(styles, fmt.Sprintf(`color:%s`, targetShape.Color))
} else {
} else if inlineTheme != nil {
styles = append(styles, fmt.Sprintf(`color:%s`, d2themes.ResolveThemeColor(*inlineTheme, targetShape.Color)))
}
// When using dark theme, inlineTheme is nil and we rely on CSS variables
mdEl.Style = strings.Join(styles, ";")

99
e2etests/testdata/txtar/dark-theme-shape/dagre/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,99 @@
{
"name": "",
"config": {
"sketch": false,
"themeID": 0,
"darkThemeID": 200,
"pad": null,
"center": null,
"layoutEngine": null
},
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "a",
"type": "rectangle",
"pos": {
"x": 0,
"y": 0
},
"width": 96,
"height": 96,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B6",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "# hey",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "markdown",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 51,
"labelHeight": 51,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
}
],
"connections": [],
"root": {
"id": "",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 0,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "N7",
"stroke": "",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 0
}
}

908
e2etests/testdata/txtar/dark-theme-shape/dagre/sketch.exp.svg vendored Normal file
View file

@ -0,0 +1,908 @@
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-d2-version="v0.6.9-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 98 98"><svg class="d2-2914868974 d2-svg" width="98" height="98" viewBox="-1 -1 98 98"><rect x="-1.000000" y="-1.000000" width="98.000000" height="98.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.d2-2914868974 .text {
font-family: "d2-2914868974-font-regular";
}
@font-face {
font-family: d2-2914868974-font-regular;
src: url("data:application/font-woff;base64,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");
}
@font-face {
font-family: d2-2914868974-font-semibold;
src: url("data:application/font-woff;base64,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");
}]]></style><style type="text/css"><![CDATA[.shape {
shape-rendering: geometricPrecision;
stroke-linejoin: round;
}
.connection {
stroke-linecap: round;
stroke-linejoin: round;
}
.blend {
mix-blend-mode: multiply;
opacity: 0.5;
}
.d2-2914868974 .fill-N1{fill:#0A0F25;}
.d2-2914868974 .fill-N2{fill:#676C7E;}
.d2-2914868974 .fill-N3{fill:#9499AB;}
.d2-2914868974 .fill-N4{fill:#CFD2DD;}
.d2-2914868974 .fill-N5{fill:#DEE1EB;}
.d2-2914868974 .fill-N6{fill:#EEF1F8;}
.d2-2914868974 .fill-N7{fill:#FFFFFF;}
.d2-2914868974 .fill-B1{fill:#0D32B2;}
.d2-2914868974 .fill-B2{fill:#0D32B2;}
.d2-2914868974 .fill-B3{fill:#E3E9FD;}
.d2-2914868974 .fill-B4{fill:#E3E9FD;}
.d2-2914868974 .fill-B5{fill:#EDF0FD;}
.d2-2914868974 .fill-B6{fill:#F7F8FE;}
.d2-2914868974 .fill-AA2{fill:#4A6FF3;}
.d2-2914868974 .fill-AA4{fill:#EDF0FD;}
.d2-2914868974 .fill-AA5{fill:#F7F8FE;}
.d2-2914868974 .fill-AB4{fill:#EDF0FD;}
.d2-2914868974 .fill-AB5{fill:#F7F8FE;}
.d2-2914868974 .stroke-N1{stroke:#0A0F25;}
.d2-2914868974 .stroke-N2{stroke:#676C7E;}
.d2-2914868974 .stroke-N3{stroke:#9499AB;}
.d2-2914868974 .stroke-N4{stroke:#CFD2DD;}
.d2-2914868974 .stroke-N5{stroke:#DEE1EB;}
.d2-2914868974 .stroke-N6{stroke:#EEF1F8;}
.d2-2914868974 .stroke-N7{stroke:#FFFFFF;}
.d2-2914868974 .stroke-B1{stroke:#0D32B2;}
.d2-2914868974 .stroke-B2{stroke:#0D32B2;}
.d2-2914868974 .stroke-B3{stroke:#E3E9FD;}
.d2-2914868974 .stroke-B4{stroke:#E3E9FD;}
.d2-2914868974 .stroke-B5{stroke:#EDF0FD;}
.d2-2914868974 .stroke-B6{stroke:#F7F8FE;}
.d2-2914868974 .stroke-AA2{stroke:#4A6FF3;}
.d2-2914868974 .stroke-AA4{stroke:#EDF0FD;}
.d2-2914868974 .stroke-AA5{stroke:#F7F8FE;}
.d2-2914868974 .stroke-AB4{stroke:#EDF0FD;}
.d2-2914868974 .stroke-AB5{stroke:#F7F8FE;}
.d2-2914868974 .background-color-N1{background-color:#0A0F25;}
.d2-2914868974 .background-color-N2{background-color:#676C7E;}
.d2-2914868974 .background-color-N3{background-color:#9499AB;}
.d2-2914868974 .background-color-N4{background-color:#CFD2DD;}
.d2-2914868974 .background-color-N5{background-color:#DEE1EB;}
.d2-2914868974 .background-color-N6{background-color:#EEF1F8;}
.d2-2914868974 .background-color-N7{background-color:#FFFFFF;}
.d2-2914868974 .background-color-B1{background-color:#0D32B2;}
.d2-2914868974 .background-color-B2{background-color:#0D32B2;}
.d2-2914868974 .background-color-B3{background-color:#E3E9FD;}
.d2-2914868974 .background-color-B4{background-color:#E3E9FD;}
.d2-2914868974 .background-color-B5{background-color:#EDF0FD;}
.d2-2914868974 .background-color-B6{background-color:#F7F8FE;}
.d2-2914868974 .background-color-AA2{background-color:#4A6FF3;}
.d2-2914868974 .background-color-AA4{background-color:#EDF0FD;}
.d2-2914868974 .background-color-AA5{background-color:#F7F8FE;}
.d2-2914868974 .background-color-AB4{background-color:#EDF0FD;}
.d2-2914868974 .background-color-AB5{background-color:#F7F8FE;}
.d2-2914868974 .color-N1{color:#0A0F25;}
.d2-2914868974 .color-N2{color:#676C7E;}
.d2-2914868974 .color-N3{color:#9499AB;}
.d2-2914868974 .color-N4{color:#CFD2DD;}
.d2-2914868974 .color-N5{color:#DEE1EB;}
.d2-2914868974 .color-N6{color:#EEF1F8;}
.d2-2914868974 .color-N7{color:#FFFFFF;}
.d2-2914868974 .color-B1{color:#0D32B2;}
.d2-2914868974 .color-B2{color:#0D32B2;}
.d2-2914868974 .color-B3{color:#E3E9FD;}
.d2-2914868974 .color-B4{color:#E3E9FD;}
.d2-2914868974 .color-B5{color:#EDF0FD;}
.d2-2914868974 .color-B6{color:#F7F8FE;}
.d2-2914868974 .color-AA2{color:#4A6FF3;}
.d2-2914868974 .color-AA4{color:#EDF0FD;}
.d2-2914868974 .color-AA5{color:#F7F8FE;}
.d2-2914868974 .color-AB4{color:#EDF0FD;}
.d2-2914868974 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker-d2-2914868974);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-2914868974);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-2914868974);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-2914868974);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-2914868974);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-2914868974);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-2914868974);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-2914868974);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-2914868974);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-2914868974);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-2914868974);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-2914868974);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-2914868974);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-2914868974);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-2914868974);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-2914868974);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-2914868974);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-2914868974);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}@media screen and (prefers-color-scheme:dark){
.d2-2914868974 .fill-N1{fill:#CDD6F4;}
.d2-2914868974 .fill-N2{fill:#BAC2DE;}
.d2-2914868974 .fill-N3{fill:#A6ADC8;}
.d2-2914868974 .fill-N4{fill:#585B70;}
.d2-2914868974 .fill-N5{fill:#45475A;}
.d2-2914868974 .fill-N6{fill:#313244;}
.d2-2914868974 .fill-N7{fill:#1E1E2E;}
.d2-2914868974 .fill-B1{fill:#CBA6f7;}
.d2-2914868974 .fill-B2{fill:#CBA6f7;}
.d2-2914868974 .fill-B3{fill:#6C7086;}
.d2-2914868974 .fill-B4{fill:#585B70;}
.d2-2914868974 .fill-B5{fill:#45475A;}
.d2-2914868974 .fill-B6{fill:#313244;}
.d2-2914868974 .fill-AA2{fill:#f38BA8;}
.d2-2914868974 .fill-AA4{fill:#45475A;}
.d2-2914868974 .fill-AA5{fill:#313244;}
.d2-2914868974 .fill-AB4{fill:#45475A;}
.d2-2914868974 .fill-AB5{fill:#313244;}
.d2-2914868974 .stroke-N1{stroke:#CDD6F4;}
.d2-2914868974 .stroke-N2{stroke:#BAC2DE;}
.d2-2914868974 .stroke-N3{stroke:#A6ADC8;}
.d2-2914868974 .stroke-N4{stroke:#585B70;}
.d2-2914868974 .stroke-N5{stroke:#45475A;}
.d2-2914868974 .stroke-N6{stroke:#313244;}
.d2-2914868974 .stroke-N7{stroke:#1E1E2E;}
.d2-2914868974 .stroke-B1{stroke:#CBA6f7;}
.d2-2914868974 .stroke-B2{stroke:#CBA6f7;}
.d2-2914868974 .stroke-B3{stroke:#6C7086;}
.d2-2914868974 .stroke-B4{stroke:#585B70;}
.d2-2914868974 .stroke-B5{stroke:#45475A;}
.d2-2914868974 .stroke-B6{stroke:#313244;}
.d2-2914868974 .stroke-AA2{stroke:#f38BA8;}
.d2-2914868974 .stroke-AA4{stroke:#45475A;}
.d2-2914868974 .stroke-AA5{stroke:#313244;}
.d2-2914868974 .stroke-AB4{stroke:#45475A;}
.d2-2914868974 .stroke-AB5{stroke:#313244;}
.d2-2914868974 .background-color-N1{background-color:#CDD6F4;}
.d2-2914868974 .background-color-N2{background-color:#BAC2DE;}
.d2-2914868974 .background-color-N3{background-color:#A6ADC8;}
.d2-2914868974 .background-color-N4{background-color:#585B70;}
.d2-2914868974 .background-color-N5{background-color:#45475A;}
.d2-2914868974 .background-color-N6{background-color:#313244;}
.d2-2914868974 .background-color-N7{background-color:#1E1E2E;}
.d2-2914868974 .background-color-B1{background-color:#CBA6f7;}
.d2-2914868974 .background-color-B2{background-color:#CBA6f7;}
.d2-2914868974 .background-color-B3{background-color:#6C7086;}
.d2-2914868974 .background-color-B4{background-color:#585B70;}
.d2-2914868974 .background-color-B5{background-color:#45475A;}
.d2-2914868974 .background-color-B6{background-color:#313244;}
.d2-2914868974 .background-color-AA2{background-color:#f38BA8;}
.d2-2914868974 .background-color-AA4{background-color:#45475A;}
.d2-2914868974 .background-color-AA5{background-color:#313244;}
.d2-2914868974 .background-color-AB4{background-color:#45475A;}
.d2-2914868974 .background-color-AB5{background-color:#313244;}
.d2-2914868974 .color-N1{color:#CDD6F4;}
.d2-2914868974 .color-N2{color:#BAC2DE;}
.d2-2914868974 .color-N3{color:#A6ADC8;}
.d2-2914868974 .color-N4{color:#585B70;}
.d2-2914868974 .color-N5{color:#45475A;}
.d2-2914868974 .color-N6{color:#313244;}
.d2-2914868974 .color-N7{color:#1E1E2E;}
.d2-2914868974 .color-B1{color:#CBA6f7;}
.d2-2914868974 .color-B2{color:#CBA6f7;}
.d2-2914868974 .color-B3{color:#6C7086;}
.d2-2914868974 .color-B4{color:#585B70;}
.d2-2914868974 .color-B5{color:#45475A;}
.d2-2914868974 .color-B6{color:#313244;}
.d2-2914868974 .color-AA2{color:#f38BA8;}
.d2-2914868974 .color-AA4{color:#45475A;}
.d2-2914868974 .color-AA5{color:#313244;}
.d2-2914868974 .color-AB4{color:#45475A;}
.d2-2914868974 .color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal-d2-2914868974);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal-d2-2914868974);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark-d2-2914868974);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark-d2-2914868974);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker-d2-2914868974);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker-d2-2914868974);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal-d2-2914868974);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker-d2-2914868974);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker-d2-2914868974);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker-d2-2914868974);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker-d2-2914868974);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal-d2-2914868974);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal-d2-2914868974);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal-d2-2914868974);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark-d2-2914868974);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker-d2-2914868974);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker-d2-2914868974);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker-d2-2914868974);mix-blend-mode:lighten}.light-code{display: none}.dark-code{display: block}}]]></style><style type="text/css">.d2-2914868974 .md em,
.d2-2914868974 .md dfn {
font-family: "d2-2914868974-font-italic";
}
.d2-2914868974 .md b,
.d2-2914868974 .md strong {
font-family: "d2-2914868974-font-bold";
}
.d2-2914868974 .md code,
.d2-2914868974 .md kbd,
.d2-2914868974 .md pre,
.d2-2914868974 .md samp {
font-family: "d2-2914868974-font-mono";
font-size: 1em;
}
.d2-2914868974 .md {
tab-size: 4;
}
/* variables are provided in d2renderers/d2svg/d2svg.go */
.d2-2914868974 .md {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
margin: 0;
color: var(--color-fg-default);
background-color: transparent; /* we don't want to define the background color */
font-family: "d2-2914868974-font-regular";
font-size: 16px;
line-height: 1.5;
word-wrap: break-word;
}
.d2-2914868974 .md details,
.d2-2914868974 .md figcaption,
.d2-2914868974 .md figure {
display: block;
}
.d2-2914868974 .md summary {
display: list-item;
}
.d2-2914868974 .md [hidden] {
display: none !important;
}
.d2-2914868974 .md a {
background-color: transparent;
color: var(--color-accent-fg);
text-decoration: none;
}
.d2-2914868974 .md a:active,
.d2-2914868974 .md a:hover {
outline-width: 0;
}
.d2-2914868974 .md abbr[title] {
border-bottom: none;
text-decoration: underline dotted;
}
.d2-2914868974 .md dfn {
font-style: italic;
}
.d2-2914868974 .md h1 {
margin: 0.67em 0;
padding-bottom: 0.3em;
font-size: 2em;
border-bottom: 1px solid var(--color-border-muted);
}
.d2-2914868974 .md mark {
background-color: var(--color-attention-subtle);
color: var(--color-text-primary);
}
.d2-2914868974 .md small {
font-size: 90%;
}
.d2-2914868974 .md sub,
.d2-2914868974 .md sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
.d2-2914868974 .md sub {
bottom: -0.25em;
}
.d2-2914868974 .md sup {
top: -0.5em;
}
.d2-2914868974 .md img {
border-style: none;
max-width: 100%;
box-sizing: content-box;
background-color: var(--color-canvas-default);
}
.d2-2914868974 .md figure {
margin: 1em 40px;
}
.d2-2914868974 .md hr {
box-sizing: content-box;
overflow: hidden;
background: transparent;
border-bottom: 1px solid var(--color-border-muted);
height: 0.25em;
padding: 0;
margin: 24px 0;
background-color: var(--color-border-default);
border: 0;
}
.d2-2914868974 .md input {
font: inherit;
margin: 0;
overflow: visible;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
.d2-2914868974 .md [type="button"],
.d2-2914868974 .md [type="reset"],
.d2-2914868974 .md [type="submit"] {
-webkit-appearance: button;
}
.d2-2914868974 .md [type="button"]::-moz-focus-inner,
.d2-2914868974 .md [type="reset"]::-moz-focus-inner,
.d2-2914868974 .md [type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
.d2-2914868974 .md [type="button"]:-moz-focusring,
.d2-2914868974 .md [type="reset"]:-moz-focusring,
.d2-2914868974 .md [type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
.d2-2914868974 .md [type="checkbox"],
.d2-2914868974 .md [type="radio"] {
box-sizing: border-box;
padding: 0;
}
.d2-2914868974 .md [type="number"]::-webkit-inner-spin-button,
.d2-2914868974 .md [type="number"]::-webkit-outer-spin-button {
height: auto;
}
.d2-2914868974 .md [type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
.d2-2914868974 .md [type="search"]::-webkit-search-cancel-button,
.d2-2914868974 .md [type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
.d2-2914868974 .md ::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
.d2-2914868974 .md ::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
.d2-2914868974 .md a:hover {
text-decoration: underline;
}
.d2-2914868974 .md hr::before {
display: table;
content: "";
}
.d2-2914868974 .md hr::after {
display: table;
clear: both;
content: "";
}
.d2-2914868974 .md table {
border-spacing: 0;
border-collapse: collapse;
display: block;
width: max-content;
max-width: 100%;
overflow: auto;
}
.d2-2914868974 .md td,
.d2-2914868974 .md th {
padding: 0;
}
.d2-2914868974 .md details summary {
cursor: pointer;
}
.d2-2914868974 .md details:not([open]) > *:not(summary) {
display: none !important;
}
.d2-2914868974 .md kbd {
display: inline-block;
padding: 3px 5px;
color: var(--color-fg-default);
vertical-align: middle;
background-color: var(--color-canvas-subtle);
border: solid 1px var(--color-neutral-muted);
border-bottom-color: var(--color-neutral-muted);
border-radius: 6px;
box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
}
.d2-2914868974 .md h1,
.d2-2914868974 .md h2,
.d2-2914868974 .md h3,
.d2-2914868974 .md h4,
.d2-2914868974 .md h5,
.d2-2914868974 .md h6 {
margin-top: 24px;
margin-bottom: 16px;
font-weight: 400;
line-height: 1.25;
font-family: "d2-2914868974-font-semibold";
}
.d2-2914868974 .md h2 {
padding-bottom: 0.3em;
font-size: 1.5em;
border-bottom: 1px solid var(--color-border-muted);
}
.d2-2914868974 .md h3 {
font-size: 1.25em;
}
.d2-2914868974 .md h4 {
font-size: 1em;
}
.d2-2914868974 .md h5 {
font-size: 0.875em;
}
.d2-2914868974 .md h6 {
font-size: 0.85em;
color: var(--color-fg-muted);
}
.d2-2914868974 .md p {
margin-top: 0;
margin-bottom: 10px;
}
.d2-2914868974 .md blockquote {
margin: 0;
padding: 0 1em;
color: var(--color-fg-muted);
border-left: 0.25em solid var(--color-border-default);
}
.d2-2914868974 .md ul,
.d2-2914868974 .md ol {
margin-top: 0;
margin-bottom: 0;
padding-left: 2em;
}
.d2-2914868974 .md ol ol,
.d2-2914868974 .md ul ol {
list-style-type: lower-roman;
}
.d2-2914868974 .md ul ul ol,
.d2-2914868974 .md ul ol ol,
.d2-2914868974 .md ol ul ol,
.d2-2914868974 .md ol ol ol {
list-style-type: lower-alpha;
}
.d2-2914868974 .md dd {
margin-left: 0;
}
.d2-2914868974 .md pre {
margin-top: 0;
margin-bottom: 0;
word-wrap: normal;
}
.d2-2914868974 .md ::placeholder {
color: var(--color-fg-subtle);
opacity: 1;
}
.d2-2914868974 .md input::-webkit-outer-spin-button,
.d2-2914868974 .md input::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
appearance: none;
}
.d2-2914868974 .md::before {
display: table;
content: "";
}
.d2-2914868974 .md::after {
display: table;
clear: both;
content: "";
}
.d2-2914868974 .md > *:first-child {
margin-top: 0 !important;
}
.d2-2914868974 .md > *:last-child {
margin-bottom: 0 !important;
}
.d2-2914868974 .md a:not([href]) {
color: inherit;
text-decoration: none;
}
.d2-2914868974 .md .absent {
color: var(--color-danger-fg);
}
.d2-2914868974 .md .anchor {
float: left;
padding-right: 4px;
margin-left: -20px;
line-height: 1;
}
.d2-2914868974 .md .anchor:focus {
outline: none;
}
.d2-2914868974 .md p,
.d2-2914868974 .md blockquote,
.d2-2914868974 .md ul,
.d2-2914868974 .md ol,
.d2-2914868974 .md dl,
.d2-2914868974 .md table,
.d2-2914868974 .md pre,
.d2-2914868974 .md details {
margin-top: 0;
margin-bottom: 16px;
}
.d2-2914868974 .md blockquote > :first-child {
margin-top: 0;
}
.d2-2914868974 .md blockquote > :last-child {
margin-bottom: 0;
}
.d2-2914868974 .md sup > a::before {
content: "[";
}
.d2-2914868974 .md sup > a::after {
content: "]";
}
.d2-2914868974 .md h1:hover .anchor,
.d2-2914868974 .md h2:hover .anchor,
.d2-2914868974 .md h3:hover .anchor,
.d2-2914868974 .md h4:hover .anchor,
.d2-2914868974 .md h5:hover .anchor,
.d2-2914868974 .md h6:hover .anchor {
text-decoration: none;
}
.d2-2914868974 .md h1 tt,
.d2-2914868974 .md h1 code,
.d2-2914868974 .md h2 tt,
.d2-2914868974 .md h2 code,
.d2-2914868974 .md h3 tt,
.d2-2914868974 .md h3 code,
.d2-2914868974 .md h4 tt,
.d2-2914868974 .md h4 code,
.d2-2914868974 .md h5 tt,
.d2-2914868974 .md h5 code,
.d2-2914868974 .md h6 tt,
.d2-2914868974 .md h6 code {
padding: 0 0.2em;
font-size: inherit;
}
.d2-2914868974 .md ul.no-list,
.d2-2914868974 .md ol.no-list {
padding: 0;
list-style-type: none;
}
.d2-2914868974 .md ol[type="1"] {
list-style-type: decimal;
}
.d2-2914868974 .md ol[type="a"] {
list-style-type: lower-alpha;
}
.d2-2914868974 .md ol[type="i"] {
list-style-type: lower-roman;
}
.d2-2914868974 .md div > ol:not([type]) {
list-style-type: decimal;
}
.d2-2914868974 .md ul ul,
.d2-2914868974 .md ul ol,
.d2-2914868974 .md ol ol,
.d2-2914868974 .md ol ul {
margin-top: 0;
margin-bottom: 0;
}
.d2-2914868974 .md li > p {
margin-top: 16px;
}
.d2-2914868974 .md li + li {
margin-top: 0.25em;
}
.d2-2914868974 .md dl {
padding: 0;
}
.d2-2914868974 .md dl dt {
padding: 0;
margin-top: 16px;
font-size: 1em;
font-style: italic;
font-family: "d2-2914868974-font-semibold";
}
.d2-2914868974 .md dl dd {
padding: 0 16px;
margin-bottom: 16px;
}
.d2-2914868974 .md table th {
font-family: "d2-2914868974-font-semibold";
}
.d2-2914868974 .md table th,
.d2-2914868974 .md table td {
padding: 6px 13px;
border: 1px solid var(--color-border-default);
}
.d2-2914868974 .md table tr {
background-color: var(--color-canvas-default);
border-top: 1px solid var(--color-border-muted);
}
.d2-2914868974 .md table tr:nth-child(2n) {
background-color: var(--color-canvas-subtle);
}
.d2-2914868974 .md table img {
background-color: transparent;
}
.d2-2914868974 .md img[align="right"] {
padding-left: 20px;
}
.d2-2914868974 .md img[align="left"] {
padding-right: 20px;
}
.d2-2914868974 .md span.frame {
display: block;
overflow: hidden;
}
.d2-2914868974 .md span.frame > span {
display: block;
float: left;
width: auto;
padding: 7px;
margin: 13px 0 0;
overflow: hidden;
border: 1px solid var(--color-border-default);
}
.d2-2914868974 .md span.frame span img {
display: block;
float: left;
}
.d2-2914868974 .md span.frame span span {
display: block;
padding: 5px 0 0;
clear: both;
color: var(--color-fg-default);
}
.d2-2914868974 .md span.align-center {
display: block;
overflow: hidden;
clear: both;
}
.d2-2914868974 .md span.align-center > span {
display: block;
margin: 13px auto 0;
overflow: hidden;
text-align: center;
}
.d2-2914868974 .md span.align-center span img {
margin: 0 auto;
text-align: center;
}
.d2-2914868974 .md span.align-right {
display: block;
overflow: hidden;
clear: both;
}
.d2-2914868974 .md span.align-right > span {
display: block;
margin: 13px 0 0;
overflow: hidden;
text-align: right;
}
.d2-2914868974 .md span.align-right span img {
margin: 0;
text-align: right;
}
.d2-2914868974 .md span.float-left {
display: block;
float: left;
margin-right: 13px;
overflow: hidden;
}
.d2-2914868974 .md span.float-left span {
margin: 13px 0 0;
}
.d2-2914868974 .md span.float-right {
display: block;
float: right;
margin-left: 13px;
overflow: hidden;
}
.d2-2914868974 .md span.float-right > span {
display: block;
margin: 13px auto 0;
overflow: hidden;
text-align: right;
}
.d2-2914868974 .md code,
.d2-2914868974 .md tt {
padding: 0.2em 0.4em;
margin: 0;
font-size: 85%;
background-color: var(--color-neutral-muted);
border-radius: 6px;
}
.d2-2914868974 .md code br,
.d2-2914868974 .md tt br {
display: none;
}
.d2-2914868974 .md del code {
text-decoration: inherit;
}
.d2-2914868974 .md pre code {
font-size: 100%;
}
.d2-2914868974 .md pre > code {
padding: 0;
margin: 0;
word-break: normal;
white-space: pre;
background: transparent;
border: 0;
}
.d2-2914868974 .md .highlight {
margin-bottom: 16px;
}
.d2-2914868974 .md .highlight pre {
margin-bottom: 0;
word-break: normal;
}
.d2-2914868974 .md .highlight pre,
.d2-2914868974 .md pre {
padding: 16px;
overflow: auto;
font-size: 85%;
line-height: 1.45;
background-color: var(--color-canvas-subtle);
border-radius: 6px;
}
.d2-2914868974 .md pre code,
.d2-2914868974 .md pre tt {
display: inline;
max-width: auto;
padding: 0;
margin: 0;
overflow: visible;
line-height: inherit;
word-wrap: normal;
background-color: transparent;
border: 0;
}
.d2-2914868974 .md .csv-data td,
.d2-2914868974 .md .csv-data th {
padding: 5px;
overflow: hidden;
font-size: 12px;
line-height: 1;
text-align: left;
white-space: nowrap;
}
.d2-2914868974 .md .csv-data .blob-num {
padding: 10px 8px 9px;
text-align: right;
background: var(--color-canvas-default);
border: 0;
}
.d2-2914868974 .md .csv-data tr {
border-top: 0;
}
.d2-2914868974 .md .csv-data th {
font-family: "d2-2914868974-font-semibold";
background: var(--color-canvas-subtle);
border-top: 0;
}
.d2-2914868974 .md .footnotes {
font-size: 12px;
color: var(--color-fg-muted);
border-top: 1px solid var(--color-border-default);
}
.d2-2914868974 .md .footnotes ol {
padding-left: 16px;
}
.d2-2914868974 .md .footnotes li {
position: relative;
}
.d2-2914868974 .md .footnotes li:target::before {
position: absolute;
top: -8px;
right: -8px;
bottom: -8px;
left: -24px;
pointer-events: none;
content: "";
border: 2px solid var(--color-accent-emphasis);
border-radius: 6px;
}
.d2-2914868974 .md .footnotes li:target {
color: var(--color-fg-default);
}
.d2-2914868974 .md .task-list-item {
list-style-type: none;
}
.d2-2914868974 .md .task-list-item label {
font-weight: 400;
}
.d2-2914868974 .md .task-list-item.enabled label {
cursor: pointer;
}
.d2-2914868974 .md .task-list-item + .task-list-item {
margin-top: 3px;
}
.d2-2914868974 .md .task-list-item .handle {
display: none;
}
.d2-2914868974 .md .task-list-item-checkbox {
margin: 0 0.2em 0.25em -1.6em;
vertical-align: middle;
}
.d2-2914868974 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
margin: 0 -1.6em 0.25em 0.2em;
}
</style><g class="YQ=="><g class="shape" ><rect x="0.000000" y="0.000000" width="96.000000" height="96.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="22.500000" y="22.500000" width="51" height="51"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="background-color:B6"><h1>hey</h1>
</div></foreignObject></g></g><mask id="d2-2914868974" maskUnits="userSpaceOnUse" x="-1" y="-1" width="98" height="98">
<rect x="-1" y="-1" width="98" height="98" fill="white"></rect>
<rect x="22.500000" y="22.500000" width="51" height="51" fill="rgba(0,0,0,0.75)"></rect>
</mask></svg></svg>
Side by side

After

Width:  |  Height:  |  Size: 31 KiB

99
e2etests/testdata/txtar/dark-theme-shape/elk/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,99 @@
{
"name": "",
"config": {
"sketch": false,
"themeID": 0,
"darkThemeID": 200,
"pad": null,
"center": null,
"layoutEngine": null
},
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "a",
"type": "rectangle",
"pos": {
"x": 12,
"y": 12
},
"width": 96,
"height": 96,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B6",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "# hey",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "markdown",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 51,
"labelHeight": 51,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
}
],
"connections": [],
"root": {
"id": "",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 0,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "N7",
"stroke": "",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 0
}
}

908
e2etests/testdata/txtar/dark-theme-shape/elk/sketch.exp.svg vendored Normal file
View file

@ -0,0 +1,908 @@
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-d2-version="v0.6.9-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 98 98"><svg class="d2-3093086966 d2-svg" width="98" height="98" viewBox="11 11 98 98"><rect x="11.000000" y="11.000000" width="98.000000" height="98.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.d2-3093086966 .text {
font-family: "d2-3093086966-font-regular";
}
@font-face {
font-family: d2-3093086966-font-regular;
src: url("data:application/font-woff;base64,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");
}
@font-face {
font-family: d2-3093086966-font-semibold;
src: url("data:application/font-woff;base64,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");
}]]></style><style type="text/css"><![CDATA[.shape {
shape-rendering: geometricPrecision;
stroke-linejoin: round;
}
.connection {
stroke-linecap: round;
stroke-linejoin: round;
}
.blend {
mix-blend-mode: multiply;
opacity: 0.5;
}
.d2-3093086966 .fill-N1{fill:#0A0F25;}
.d2-3093086966 .fill-N2{fill:#676C7E;}
.d2-3093086966 .fill-N3{fill:#9499AB;}
.d2-3093086966 .fill-N4{fill:#CFD2DD;}
.d2-3093086966 .fill-N5{fill:#DEE1EB;}
.d2-3093086966 .fill-N6{fill:#EEF1F8;}
.d2-3093086966 .fill-N7{fill:#FFFFFF;}
.d2-3093086966 .fill-B1{fill:#0D32B2;}
.d2-3093086966 .fill-B2{fill:#0D32B2;}
.d2-3093086966 .fill-B3{fill:#E3E9FD;}
.d2-3093086966 .fill-B4{fill:#E3E9FD;}
.d2-3093086966 .fill-B5{fill:#EDF0FD;}
.d2-3093086966 .fill-B6{fill:#F7F8FE;}
.d2-3093086966 .fill-AA2{fill:#4A6FF3;}
.d2-3093086966 .fill-AA4{fill:#EDF0FD;}
.d2-3093086966 .fill-AA5{fill:#F7F8FE;}
.d2-3093086966 .fill-AB4{fill:#EDF0FD;}
.d2-3093086966 .fill-AB5{fill:#F7F8FE;}
.d2-3093086966 .stroke-N1{stroke:#0A0F25;}
.d2-3093086966 .stroke-N2{stroke:#676C7E;}
.d2-3093086966 .stroke-N3{stroke:#9499AB;}
.d2-3093086966 .stroke-N4{stroke:#CFD2DD;}
.d2-3093086966 .stroke-N5{stroke:#DEE1EB;}
.d2-3093086966 .stroke-N6{stroke:#EEF1F8;}
.d2-3093086966 .stroke-N7{stroke:#FFFFFF;}
.d2-3093086966 .stroke-B1{stroke:#0D32B2;}
.d2-3093086966 .stroke-B2{stroke:#0D32B2;}
.d2-3093086966 .stroke-B3{stroke:#E3E9FD;}
.d2-3093086966 .stroke-B4{stroke:#E3E9FD;}
.d2-3093086966 .stroke-B5{stroke:#EDF0FD;}
.d2-3093086966 .stroke-B6{stroke:#F7F8FE;}
.d2-3093086966 .stroke-AA2{stroke:#4A6FF3;}
.d2-3093086966 .stroke-AA4{stroke:#EDF0FD;}
.d2-3093086966 .stroke-AA5{stroke:#F7F8FE;}
.d2-3093086966 .stroke-AB4{stroke:#EDF0FD;}
.d2-3093086966 .stroke-AB5{stroke:#F7F8FE;}
.d2-3093086966 .background-color-N1{background-color:#0A0F25;}
.d2-3093086966 .background-color-N2{background-color:#676C7E;}
.d2-3093086966 .background-color-N3{background-color:#9499AB;}
.d2-3093086966 .background-color-N4{background-color:#CFD2DD;}
.d2-3093086966 .background-color-N5{background-color:#DEE1EB;}
.d2-3093086966 .background-color-N6{background-color:#EEF1F8;}
.d2-3093086966 .background-color-N7{background-color:#FFFFFF;}
.d2-3093086966 .background-color-B1{background-color:#0D32B2;}
.d2-3093086966 .background-color-B2{background-color:#0D32B2;}
.d2-3093086966 .background-color-B3{background-color:#E3E9FD;}
.d2-3093086966 .background-color-B4{background-color:#E3E9FD;}
.d2-3093086966 .background-color-B5{background-color:#EDF0FD;}
.d2-3093086966 .background-color-B6{background-color:#F7F8FE;}
.d2-3093086966 .background-color-AA2{background-color:#4A6FF3;}
.d2-3093086966 .background-color-AA4{background-color:#EDF0FD;}
.d2-3093086966 .background-color-AA5{background-color:#F7F8FE;}
.d2-3093086966 .background-color-AB4{background-color:#EDF0FD;}
.d2-3093086966 .background-color-AB5{background-color:#F7F8FE;}
.d2-3093086966 .color-N1{color:#0A0F25;}
.d2-3093086966 .color-N2{color:#676C7E;}
.d2-3093086966 .color-N3{color:#9499AB;}
.d2-3093086966 .color-N4{color:#CFD2DD;}
.d2-3093086966 .color-N5{color:#DEE1EB;}
.d2-3093086966 .color-N6{color:#EEF1F8;}
.d2-3093086966 .color-N7{color:#FFFFFF;}
.d2-3093086966 .color-B1{color:#0D32B2;}
.d2-3093086966 .color-B2{color:#0D32B2;}
.d2-3093086966 .color-B3{color:#E3E9FD;}
.d2-3093086966 .color-B4{color:#E3E9FD;}
.d2-3093086966 .color-B5{color:#EDF0FD;}
.d2-3093086966 .color-B6{color:#F7F8FE;}
.d2-3093086966 .color-AA2{color:#4A6FF3;}
.d2-3093086966 .color-AA4{color:#EDF0FD;}
.d2-3093086966 .color-AA5{color:#F7F8FE;}
.d2-3093086966 .color-AB4{color:#EDF0FD;}
.d2-3093086966 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker-d2-3093086966);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-3093086966);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-3093086966);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-3093086966);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-3093086966);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-3093086966);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-3093086966);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-3093086966);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-3093086966);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-3093086966);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-3093086966);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-3093086966);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-3093086966);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-3093086966);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-3093086966);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-3093086966);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-3093086966);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-3093086966);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}@media screen and (prefers-color-scheme:dark){
.d2-3093086966 .fill-N1{fill:#CDD6F4;}
.d2-3093086966 .fill-N2{fill:#BAC2DE;}
.d2-3093086966 .fill-N3{fill:#A6ADC8;}
.d2-3093086966 .fill-N4{fill:#585B70;}
.d2-3093086966 .fill-N5{fill:#45475A;}
.d2-3093086966 .fill-N6{fill:#313244;}
.d2-3093086966 .fill-N7{fill:#1E1E2E;}
.d2-3093086966 .fill-B1{fill:#CBA6f7;}
.d2-3093086966 .fill-B2{fill:#CBA6f7;}
.d2-3093086966 .fill-B3{fill:#6C7086;}
.d2-3093086966 .fill-B4{fill:#585B70;}
.d2-3093086966 .fill-B5{fill:#45475A;}
.d2-3093086966 .fill-B6{fill:#313244;}
.d2-3093086966 .fill-AA2{fill:#f38BA8;}
.d2-3093086966 .fill-AA4{fill:#45475A;}
.d2-3093086966 .fill-AA5{fill:#313244;}
.d2-3093086966 .fill-AB4{fill:#45475A;}
.d2-3093086966 .fill-AB5{fill:#313244;}
.d2-3093086966 .stroke-N1{stroke:#CDD6F4;}
.d2-3093086966 .stroke-N2{stroke:#BAC2DE;}
.d2-3093086966 .stroke-N3{stroke:#A6ADC8;}
.d2-3093086966 .stroke-N4{stroke:#585B70;}
.d2-3093086966 .stroke-N5{stroke:#45475A;}
.d2-3093086966 .stroke-N6{stroke:#313244;}
.d2-3093086966 .stroke-N7{stroke:#1E1E2E;}
.d2-3093086966 .stroke-B1{stroke:#CBA6f7;}
.d2-3093086966 .stroke-B2{stroke:#CBA6f7;}
.d2-3093086966 .stroke-B3{stroke:#6C7086;}
.d2-3093086966 .stroke-B4{stroke:#585B70;}
.d2-3093086966 .stroke-B5{stroke:#45475A;}
.d2-3093086966 .stroke-B6{stroke:#313244;}
.d2-3093086966 .stroke-AA2{stroke:#f38BA8;}
.d2-3093086966 .stroke-AA4{stroke:#45475A;}
.d2-3093086966 .stroke-AA5{stroke:#313244;}
.d2-3093086966 .stroke-AB4{stroke:#45475A;}
.d2-3093086966 .stroke-AB5{stroke:#313244;}
.d2-3093086966 .background-color-N1{background-color:#CDD6F4;}
.d2-3093086966 .background-color-N2{background-color:#BAC2DE;}
.d2-3093086966 .background-color-N3{background-color:#A6ADC8;}
.d2-3093086966 .background-color-N4{background-color:#585B70;}
.d2-3093086966 .background-color-N5{background-color:#45475A;}
.d2-3093086966 .background-color-N6{background-color:#313244;}
.d2-3093086966 .background-color-N7{background-color:#1E1E2E;}
.d2-3093086966 .background-color-B1{background-color:#CBA6f7;}
.d2-3093086966 .background-color-B2{background-color:#CBA6f7;}
.d2-3093086966 .background-color-B3{background-color:#6C7086;}
.d2-3093086966 .background-color-B4{background-color:#585B70;}
.d2-3093086966 .background-color-B5{background-color:#45475A;}
.d2-3093086966 .background-color-B6{background-color:#313244;}
.d2-3093086966 .background-color-AA2{background-color:#f38BA8;}
.d2-3093086966 .background-color-AA4{background-color:#45475A;}
.d2-3093086966 .background-color-AA5{background-color:#313244;}
.d2-3093086966 .background-color-AB4{background-color:#45475A;}
.d2-3093086966 .background-color-AB5{background-color:#313244;}
.d2-3093086966 .color-N1{color:#CDD6F4;}
.d2-3093086966 .color-N2{color:#BAC2DE;}
.d2-3093086966 .color-N3{color:#A6ADC8;}
.d2-3093086966 .color-N4{color:#585B70;}
.d2-3093086966 .color-N5{color:#45475A;}
.d2-3093086966 .color-N6{color:#313244;}
.d2-3093086966 .color-N7{color:#1E1E2E;}
.d2-3093086966 .color-B1{color:#CBA6f7;}
.d2-3093086966 .color-B2{color:#CBA6f7;}
.d2-3093086966 .color-B3{color:#6C7086;}
.d2-3093086966 .color-B4{color:#585B70;}
.d2-3093086966 .color-B5{color:#45475A;}
.d2-3093086966 .color-B6{color:#313244;}
.d2-3093086966 .color-AA2{color:#f38BA8;}
.d2-3093086966 .color-AA4{color:#45475A;}
.d2-3093086966 .color-AA5{color:#313244;}
.d2-3093086966 .color-AB4{color:#45475A;}
.d2-3093086966 .color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal-d2-3093086966);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal-d2-3093086966);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark-d2-3093086966);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark-d2-3093086966);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker-d2-3093086966);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker-d2-3093086966);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal-d2-3093086966);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker-d2-3093086966);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker-d2-3093086966);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker-d2-3093086966);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker-d2-3093086966);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal-d2-3093086966);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal-d2-3093086966);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal-d2-3093086966);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark-d2-3093086966);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker-d2-3093086966);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker-d2-3093086966);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker-d2-3093086966);mix-blend-mode:lighten}.light-code{display: none}.dark-code{display: block}}]]></style><style type="text/css">.d2-3093086966 .md em,
.d2-3093086966 .md dfn {
font-family: "d2-3093086966-font-italic";
}
.d2-3093086966 .md b,
.d2-3093086966 .md strong {
font-family: "d2-3093086966-font-bold";
}
.d2-3093086966 .md code,
.d2-3093086966 .md kbd,
.d2-3093086966 .md pre,
.d2-3093086966 .md samp {
font-family: "d2-3093086966-font-mono";
font-size: 1em;
}
.d2-3093086966 .md {
tab-size: 4;
}
/* variables are provided in d2renderers/d2svg/d2svg.go */
.d2-3093086966 .md {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
margin: 0;
color: var(--color-fg-default);
background-color: transparent; /* we don't want to define the background color */
font-family: "d2-3093086966-font-regular";
font-size: 16px;
line-height: 1.5;
word-wrap: break-word;
}
.d2-3093086966 .md details,
.d2-3093086966 .md figcaption,
.d2-3093086966 .md figure {
display: block;
}
.d2-3093086966 .md summary {
display: list-item;
}
.d2-3093086966 .md [hidden] {
display: none !important;
}
.d2-3093086966 .md a {
background-color: transparent;
color: var(--color-accent-fg);
text-decoration: none;
}
.d2-3093086966 .md a:active,
.d2-3093086966 .md a:hover {
outline-width: 0;
}
.d2-3093086966 .md abbr[title] {
border-bottom: none;
text-decoration: underline dotted;
}
.d2-3093086966 .md dfn {
font-style: italic;
}
.d2-3093086966 .md h1 {
margin: 0.67em 0;
padding-bottom: 0.3em;
font-size: 2em;
border-bottom: 1px solid var(--color-border-muted);
}
.d2-3093086966 .md mark {
background-color: var(--color-attention-subtle);
color: var(--color-text-primary);
}
.d2-3093086966 .md small {
font-size: 90%;
}
.d2-3093086966 .md sub,
.d2-3093086966 .md sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
.d2-3093086966 .md sub {
bottom: -0.25em;
}
.d2-3093086966 .md sup {
top: -0.5em;
}
.d2-3093086966 .md img {
border-style: none;
max-width: 100%;
box-sizing: content-box;
background-color: var(--color-canvas-default);
}
.d2-3093086966 .md figure {
margin: 1em 40px;
}
.d2-3093086966 .md hr {
box-sizing: content-box;
overflow: hidden;
background: transparent;
border-bottom: 1px solid var(--color-border-muted);
height: 0.25em;
padding: 0;
margin: 24px 0;
background-color: var(--color-border-default);
border: 0;
}
.d2-3093086966 .md input {
font: inherit;
margin: 0;
overflow: visible;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
.d2-3093086966 .md [type="button"],
.d2-3093086966 .md [type="reset"],
.d2-3093086966 .md [type="submit"] {
-webkit-appearance: button;
}
.d2-3093086966 .md [type="button"]::-moz-focus-inner,
.d2-3093086966 .md [type="reset"]::-moz-focus-inner,
.d2-3093086966 .md [type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
.d2-3093086966 .md [type="button"]:-moz-focusring,
.d2-3093086966 .md [type="reset"]:-moz-focusring,
.d2-3093086966 .md [type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
.d2-3093086966 .md [type="checkbox"],
.d2-3093086966 .md [type="radio"] {
box-sizing: border-box;
padding: 0;
}
.d2-3093086966 .md [type="number"]::-webkit-inner-spin-button,
.d2-3093086966 .md [type="number"]::-webkit-outer-spin-button {
height: auto;
}
.d2-3093086966 .md [type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
.d2-3093086966 .md [type="search"]::-webkit-search-cancel-button,
.d2-3093086966 .md [type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
.d2-3093086966 .md ::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
.d2-3093086966 .md ::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
.d2-3093086966 .md a:hover {
text-decoration: underline;
}
.d2-3093086966 .md hr::before {
display: table;
content: "";
}
.d2-3093086966 .md hr::after {
display: table;
clear: both;
content: "";
}
.d2-3093086966 .md table {
border-spacing: 0;
border-collapse: collapse;
display: block;
width: max-content;
max-width: 100%;
overflow: auto;
}
.d2-3093086966 .md td,
.d2-3093086966 .md th {
padding: 0;
}
.d2-3093086966 .md details summary {
cursor: pointer;
}
.d2-3093086966 .md details:not([open]) > *:not(summary) {
display: none !important;
}
.d2-3093086966 .md kbd {
display: inline-block;
padding: 3px 5px;
color: var(--color-fg-default);
vertical-align: middle;
background-color: var(--color-canvas-subtle);
border: solid 1px var(--color-neutral-muted);
border-bottom-color: var(--color-neutral-muted);
border-radius: 6px;
box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
}
.d2-3093086966 .md h1,
.d2-3093086966 .md h2,
.d2-3093086966 .md h3,
.d2-3093086966 .md h4,
.d2-3093086966 .md h5,
.d2-3093086966 .md h6 {
margin-top: 24px;
margin-bottom: 16px;
font-weight: 400;
line-height: 1.25;
font-family: "d2-3093086966-font-semibold";
}
.d2-3093086966 .md h2 {
padding-bottom: 0.3em;
font-size: 1.5em;
border-bottom: 1px solid var(--color-border-muted);
}
.d2-3093086966 .md h3 {
font-size: 1.25em;
}
.d2-3093086966 .md h4 {
font-size: 1em;
}
.d2-3093086966 .md h5 {
font-size: 0.875em;
}
.d2-3093086966 .md h6 {
font-size: 0.85em;
color: var(--color-fg-muted);
}
.d2-3093086966 .md p {
margin-top: 0;
margin-bottom: 10px;
}
.d2-3093086966 .md blockquote {
margin: 0;
padding: 0 1em;
color: var(--color-fg-muted);
border-left: 0.25em solid var(--color-border-default);
}
.d2-3093086966 .md ul,
.d2-3093086966 .md ol {
margin-top: 0;
margin-bottom: 0;
padding-left: 2em;
}
.d2-3093086966 .md ol ol,
.d2-3093086966 .md ul ol {
list-style-type: lower-roman;
}
.d2-3093086966 .md ul ul ol,
.d2-3093086966 .md ul ol ol,
.d2-3093086966 .md ol ul ol,
.d2-3093086966 .md ol ol ol {
list-style-type: lower-alpha;
}
.d2-3093086966 .md dd {
margin-left: 0;
}
.d2-3093086966 .md pre {
margin-top: 0;
margin-bottom: 0;
word-wrap: normal;
}
.d2-3093086966 .md ::placeholder {
color: var(--color-fg-subtle);
opacity: 1;
}
.d2-3093086966 .md input::-webkit-outer-spin-button,
.d2-3093086966 .md input::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
appearance: none;
}
.d2-3093086966 .md::before {
display: table;
content: "";
}
.d2-3093086966 .md::after {
display: table;
clear: both;
content: "";
}
.d2-3093086966 .md > *:first-child {
margin-top: 0 !important;
}
.d2-3093086966 .md > *:last-child {
margin-bottom: 0 !important;
}
.d2-3093086966 .md a:not([href]) {
color: inherit;
text-decoration: none;
}
.d2-3093086966 .md .absent {
color: var(--color-danger-fg);
}
.d2-3093086966 .md .anchor {
float: left;
padding-right: 4px;
margin-left: -20px;
line-height: 1;
}
.d2-3093086966 .md .anchor:focus {
outline: none;
}
.d2-3093086966 .md p,
.d2-3093086966 .md blockquote,
.d2-3093086966 .md ul,
.d2-3093086966 .md ol,
.d2-3093086966 .md dl,
.d2-3093086966 .md table,
.d2-3093086966 .md pre,
.d2-3093086966 .md details {
margin-top: 0;
margin-bottom: 16px;
}
.d2-3093086966 .md blockquote > :first-child {
margin-top: 0;
}
.d2-3093086966 .md blockquote > :last-child {
margin-bottom: 0;
}
.d2-3093086966 .md sup > a::before {
content: "[";
}
.d2-3093086966 .md sup > a::after {
content: "]";
}
.d2-3093086966 .md h1:hover .anchor,
.d2-3093086966 .md h2:hover .anchor,
.d2-3093086966 .md h3:hover .anchor,
.d2-3093086966 .md h4:hover .anchor,
.d2-3093086966 .md h5:hover .anchor,
.d2-3093086966 .md h6:hover .anchor {
text-decoration: none;
}
.d2-3093086966 .md h1 tt,
.d2-3093086966 .md h1 code,
.d2-3093086966 .md h2 tt,
.d2-3093086966 .md h2 code,
.d2-3093086966 .md h3 tt,
.d2-3093086966 .md h3 code,
.d2-3093086966 .md h4 tt,
.d2-3093086966 .md h4 code,
.d2-3093086966 .md h5 tt,
.d2-3093086966 .md h5 code,
.d2-3093086966 .md h6 tt,
.d2-3093086966 .md h6 code {
padding: 0 0.2em;
font-size: inherit;
}
.d2-3093086966 .md ul.no-list,
.d2-3093086966 .md ol.no-list {
padding: 0;
list-style-type: none;
}
.d2-3093086966 .md ol[type="1"] {
list-style-type: decimal;
}
.d2-3093086966 .md ol[type="a"] {
list-style-type: lower-alpha;
}
.d2-3093086966 .md ol[type="i"] {
list-style-type: lower-roman;
}
.d2-3093086966 .md div > ol:not([type]) {
list-style-type: decimal;
}
.d2-3093086966 .md ul ul,
.d2-3093086966 .md ul ol,
.d2-3093086966 .md ol ol,
.d2-3093086966 .md ol ul {
margin-top: 0;
margin-bottom: 0;
}
.d2-3093086966 .md li > p {
margin-top: 16px;
}
.d2-3093086966 .md li + li {
margin-top: 0.25em;
}
.d2-3093086966 .md dl {
padding: 0;
}
.d2-3093086966 .md dl dt {
padding: 0;
margin-top: 16px;
font-size: 1em;
font-style: italic;
font-family: "d2-3093086966-font-semibold";
}
.d2-3093086966 .md dl dd {
padding: 0 16px;
margin-bottom: 16px;
}
.d2-3093086966 .md table th {
font-family: "d2-3093086966-font-semibold";
}
.d2-3093086966 .md table th,
.d2-3093086966 .md table td {
padding: 6px 13px;
border: 1px solid var(--color-border-default);
}
.d2-3093086966 .md table tr {
background-color: var(--color-canvas-default);
border-top: 1px solid var(--color-border-muted);
}
.d2-3093086966 .md table tr:nth-child(2n) {
background-color: var(--color-canvas-subtle);
}
.d2-3093086966 .md table img {
background-color: transparent;
}
.d2-3093086966 .md img[align="right"] {
padding-left: 20px;
}
.d2-3093086966 .md img[align="left"] {
padding-right: 20px;
}
.d2-3093086966 .md span.frame {
display: block;
overflow: hidden;
}
.d2-3093086966 .md span.frame > span {
display: block;
float: left;
width: auto;
padding: 7px;
margin: 13px 0 0;
overflow: hidden;
border: 1px solid var(--color-border-default);
}
.d2-3093086966 .md span.frame span img {
display: block;
float: left;
}
.d2-3093086966 .md span.frame span span {
display: block;
padding: 5px 0 0;
clear: both;
color: var(--color-fg-default);
}
.d2-3093086966 .md span.align-center {
display: block;
overflow: hidden;
clear: both;
}
.d2-3093086966 .md span.align-center > span {
display: block;
margin: 13px auto 0;
overflow: hidden;
text-align: center;
}
.d2-3093086966 .md span.align-center span img {
margin: 0 auto;
text-align: center;
}
.d2-3093086966 .md span.align-right {
display: block;
overflow: hidden;
clear: both;
}
.d2-3093086966 .md span.align-right > span {
display: block;
margin: 13px 0 0;
overflow: hidden;
text-align: right;
}
.d2-3093086966 .md span.align-right span img {
margin: 0;
text-align: right;
}
.d2-3093086966 .md span.float-left {
display: block;
float: left;
margin-right: 13px;
overflow: hidden;
}
.d2-3093086966 .md span.float-left span {
margin: 13px 0 0;
}
.d2-3093086966 .md span.float-right {
display: block;
float: right;
margin-left: 13px;
overflow: hidden;
}
.d2-3093086966 .md span.float-right > span {
display: block;
margin: 13px auto 0;
overflow: hidden;
text-align: right;
}
.d2-3093086966 .md code,
.d2-3093086966 .md tt {
padding: 0.2em 0.4em;
margin: 0;
font-size: 85%;
background-color: var(--color-neutral-muted);
border-radius: 6px;
}
.d2-3093086966 .md code br,
.d2-3093086966 .md tt br {
display: none;
}
.d2-3093086966 .md del code {
text-decoration: inherit;
}
.d2-3093086966 .md pre code {
font-size: 100%;
}
.d2-3093086966 .md pre > code {
padding: 0;
margin: 0;
word-break: normal;
white-space: pre;
background: transparent;
border: 0;
}
.d2-3093086966 .md .highlight {
margin-bottom: 16px;
}
.d2-3093086966 .md .highlight pre {
margin-bottom: 0;
word-break: normal;
}
.d2-3093086966 .md .highlight pre,
.d2-3093086966 .md pre {
padding: 16px;
overflow: auto;
font-size: 85%;
line-height: 1.45;
background-color: var(--color-canvas-subtle);
border-radius: 6px;
}
.d2-3093086966 .md pre code,
.d2-3093086966 .md pre tt {
display: inline;
max-width: auto;
padding: 0;
margin: 0;
overflow: visible;
line-height: inherit;
word-wrap: normal;
background-color: transparent;
border: 0;
}
.d2-3093086966 .md .csv-data td,
.d2-3093086966 .md .csv-data th {
padding: 5px;
overflow: hidden;
font-size: 12px;
line-height: 1;
text-align: left;
white-space: nowrap;
}
.d2-3093086966 .md .csv-data .blob-num {
padding: 10px 8px 9px;
text-align: right;
background: var(--color-canvas-default);
border: 0;
}
.d2-3093086966 .md .csv-data tr {
border-top: 0;
}
.d2-3093086966 .md .csv-data th {
font-family: "d2-3093086966-font-semibold";
background: var(--color-canvas-subtle);
border-top: 0;
}
.d2-3093086966 .md .footnotes {
font-size: 12px;
color: var(--color-fg-muted);
border-top: 1px solid var(--color-border-default);
}
.d2-3093086966 .md .footnotes ol {
padding-left: 16px;
}
.d2-3093086966 .md .footnotes li {
position: relative;
}
.d2-3093086966 .md .footnotes li:target::before {
position: absolute;
top: -8px;
right: -8px;
bottom: -8px;
left: -24px;
pointer-events: none;
content: "";
border: 2px solid var(--color-accent-emphasis);
border-radius: 6px;
}
.d2-3093086966 .md .footnotes li:target {
color: var(--color-fg-default);
}
.d2-3093086966 .md .task-list-item {
list-style-type: none;
}
.d2-3093086966 .md .task-list-item label {
font-weight: 400;
}
.d2-3093086966 .md .task-list-item.enabled label {
cursor: pointer;
}
.d2-3093086966 .md .task-list-item + .task-list-item {
margin-top: 3px;
}
.d2-3093086966 .md .task-list-item .handle {
display: none;
}
.d2-3093086966 .md .task-list-item-checkbox {
margin: 0 0.2em 0.25em -1.6em;
vertical-align: middle;
}
.d2-3093086966 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
margin: 0 -1.6em 0.25em 0.2em;
}
</style><g class="YQ=="><g class="shape" ><rect x="12.000000" y="12.000000" width="96.000000" height="96.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="34.500000" y="34.500000" width="51" height="51"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="background-color:B6"><h1>hey</h1>
</div></foreignObject></g></g><mask id="d2-3093086966" maskUnits="userSpaceOnUse" x="11" y="11" width="98" height="98">
<rect x="11" y="11" width="98" height="98" fill="white"></rect>
<rect x="34.500000" y="34.500000" width="51" height="51" fill="rgba(0,0,0,0.75)"></rect>
</mask></svg></svg>
Side by side

After

Width:  |  Height:  |  Size: 31 KiB

99
e2etests/testdata/txtar/small-c4-person/dagre/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,99 @@
{
"name": "",
"config": {
"sketch": false,
"themeID": 0,
"darkThemeID": null,
"pad": null,
"center": null,
"layoutEngine": null
},
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "a",
"type": "c4-person",
"pos": {
"x": 0,
"y": 0
},
"width": 180,
"height": 114,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B3",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "c4-person",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 71,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
}
],
"connections": [],
"root": {
"id": "",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 0,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "N7",
"stroke": "",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 0
}
}

95
e2etests/testdata/txtar/small-c4-person/dagre/sketch.exp.svg vendored Normal file
View file

@ -0,0 +1,95 @@
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-d2-version="v0.6.9-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 182 136"><svg class="d2-1872684779 d2-svg" width="182" height="136" viewBox="-1 -21 182 136"><rect x="-1.000000" y="-21.000000" width="182.000000" height="136.000000" rx="0.000000" fill="#FFFFFF" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.d2-1872684779 .text-bold {
font-family: "d2-1872684779-font-bold";
}
@font-face {
font-family: d2-1872684779-font-bold;
src: url("data:application/font-woff;base64,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");
}]]></style><style type="text/css"><![CDATA[.shape {
shape-rendering: geometricPrecision;
stroke-linejoin: round;
}
.connection {
stroke-linecap: round;
stroke-linejoin: round;
}
.blend {
mix-blend-mode: multiply;
opacity: 0.5;
}
.d2-1872684779 .fill-N1{fill:#0A0F25;}
.d2-1872684779 .fill-N2{fill:#676C7E;}
.d2-1872684779 .fill-N3{fill:#9499AB;}
.d2-1872684779 .fill-N4{fill:#CFD2DD;}
.d2-1872684779 .fill-N5{fill:#DEE1EB;}
.d2-1872684779 .fill-N6{fill:#EEF1F8;}
.d2-1872684779 .fill-N7{fill:#FFFFFF;}
.d2-1872684779 .fill-B1{fill:#0D32B2;}
.d2-1872684779 .fill-B2{fill:#0D32B2;}
.d2-1872684779 .fill-B3{fill:#E3E9FD;}
.d2-1872684779 .fill-B4{fill:#E3E9FD;}
.d2-1872684779 .fill-B5{fill:#EDF0FD;}
.d2-1872684779 .fill-B6{fill:#F7F8FE;}
.d2-1872684779 .fill-AA2{fill:#4A6FF3;}
.d2-1872684779 .fill-AA4{fill:#EDF0FD;}
.d2-1872684779 .fill-AA5{fill:#F7F8FE;}
.d2-1872684779 .fill-AB4{fill:#EDF0FD;}
.d2-1872684779 .fill-AB5{fill:#F7F8FE;}
.d2-1872684779 .stroke-N1{stroke:#0A0F25;}
.d2-1872684779 .stroke-N2{stroke:#676C7E;}
.d2-1872684779 .stroke-N3{stroke:#9499AB;}
.d2-1872684779 .stroke-N4{stroke:#CFD2DD;}
.d2-1872684779 .stroke-N5{stroke:#DEE1EB;}
.d2-1872684779 .stroke-N6{stroke:#EEF1F8;}
.d2-1872684779 .stroke-N7{stroke:#FFFFFF;}
.d2-1872684779 .stroke-B1{stroke:#0D32B2;}
.d2-1872684779 .stroke-B2{stroke:#0D32B2;}
.d2-1872684779 .stroke-B3{stroke:#E3E9FD;}
.d2-1872684779 .stroke-B4{stroke:#E3E9FD;}
.d2-1872684779 .stroke-B5{stroke:#EDF0FD;}
.d2-1872684779 .stroke-B6{stroke:#F7F8FE;}
.d2-1872684779 .stroke-AA2{stroke:#4A6FF3;}
.d2-1872684779 .stroke-AA4{stroke:#EDF0FD;}
.d2-1872684779 .stroke-AA5{stroke:#F7F8FE;}
.d2-1872684779 .stroke-AB4{stroke:#EDF0FD;}
.d2-1872684779 .stroke-AB5{stroke:#F7F8FE;}
.d2-1872684779 .background-color-N1{background-color:#0A0F25;}
.d2-1872684779 .background-color-N2{background-color:#676C7E;}
.d2-1872684779 .background-color-N3{background-color:#9499AB;}
.d2-1872684779 .background-color-N4{background-color:#CFD2DD;}
.d2-1872684779 .background-color-N5{background-color:#DEE1EB;}
.d2-1872684779 .background-color-N6{background-color:#EEF1F8;}
.d2-1872684779 .background-color-N7{background-color:#FFFFFF;}
.d2-1872684779 .background-color-B1{background-color:#0D32B2;}
.d2-1872684779 .background-color-B2{background-color:#0D32B2;}
.d2-1872684779 .background-color-B3{background-color:#E3E9FD;}
.d2-1872684779 .background-color-B4{background-color:#E3E9FD;}
.d2-1872684779 .background-color-B5{background-color:#EDF0FD;}
.d2-1872684779 .background-color-B6{background-color:#F7F8FE;}
.d2-1872684779 .background-color-AA2{background-color:#4A6FF3;}
.d2-1872684779 .background-color-AA4{background-color:#EDF0FD;}
.d2-1872684779 .background-color-AA5{background-color:#F7F8FE;}
.d2-1872684779 .background-color-AB4{background-color:#EDF0FD;}
.d2-1872684779 .background-color-AB5{background-color:#F7F8FE;}
.d2-1872684779 .color-N1{color:#0A0F25;}
.d2-1872684779 .color-N2{color:#676C7E;}
.d2-1872684779 .color-N3{color:#9499AB;}
.d2-1872684779 .color-N4{color:#CFD2DD;}
.d2-1872684779 .color-N5{color:#DEE1EB;}
.d2-1872684779 .color-N6{color:#EEF1F8;}
.d2-1872684779 .color-N7{color:#FFFFFF;}
.d2-1872684779 .color-B1{color:#0D32B2;}
.d2-1872684779 .color-B2{color:#0D32B2;}
.d2-1872684779 .color-B3{color:#E3E9FD;}
.d2-1872684779 .color-B4{color:#E3E9FD;}
.d2-1872684779 .color-B5{color:#EDF0FD;}
.d2-1872684779 .color-B6{color:#F7F8FE;}
.d2-1872684779 .color-AA2{color:#4A6FF3;}
.d2-1872684779 .color-AA4{color:#EDF0FD;}
.d2-1872684779 .color-AA5{color:#F7F8FE;}
.d2-1872684779 .color-AB4{color:#EDF0FD;}
.d2-1872684779 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker-d2-1872684779);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-1872684779);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-1872684779);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-1872684779);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-1872684779);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-1872684779);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-1872684779);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-1872684779);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-1872684779);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-1872684779);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-1872684779);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-1872684779);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-1872684779);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-1872684779);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-1872684779);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-1872684779);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-1872684779);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-1872684779);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g class="YQ=="><g class="shape" ><path d="M 0 68 C 0 59 9 53 15 53 H 164 C 173 53 179 62 179 68 V 99 C 179 108 170 114 164 114 H 15 C 6 114 -0 105 -0 99 Z" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B3" style="stroke-width:2;" /><path d="M 90 -19 C 112 -19 130 -1 130 21 C 130 42 112 60 90 60 C 68 60 50 42 50 21 C 50 -1 68 -19 90 -19" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="90.000000" y="88.600000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c4-person</text></g><mask id="d2-1872684779" maskUnits="userSpaceOnUse" x="-1" y="-21" width="182" height="136">
<rect x="-1" y="-21" width="182" height="136" fill="white"></rect>
<rect x="54.500000" y="72.600000" width="71" height="21" fill="rgba(0,0,0,0.75)"></rect>
</mask></svg></svg>
Side by side

After

Width:  |  Height:  |  Size: 9.8 KiB

99
e2etests/testdata/txtar/small-c4-person/elk/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,99 @@
{
"name": "",
"config": {
"sketch": false,
"themeID": 0,
"darkThemeID": null,
"pad": null,
"center": null,
"layoutEngine": null
},
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "a",
"type": "c4-person",
"pos": {
"x": 12,
"y": 12
},
"width": 180,
"height": 114,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B3",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "c4-person",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 71,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
}
],
"connections": [],
"root": {
"id": "",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 0,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "N7",
"stroke": "",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 0
}
}

95
e2etests/testdata/txtar/small-c4-person/elk/sketch.exp.svg vendored Normal file
View file

@ -0,0 +1,95 @@
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-d2-version="v0.6.9-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 182 136"><svg class="d2-1815602595 d2-svg" width="182" height="136" viewBox="11 -9 182 136"><rect x="11.000000" y="-9.000000" width="182.000000" height="136.000000" rx="0.000000" fill="#FFFFFF" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.d2-1815602595 .text-bold {
font-family: "d2-1815602595-font-bold";
}
@font-face {
font-family: d2-1815602595-font-bold;
src: url("data:application/font-woff;base64,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");
}]]></style><style type="text/css"><![CDATA[.shape {
shape-rendering: geometricPrecision;
stroke-linejoin: round;
}
.connection {
stroke-linecap: round;
stroke-linejoin: round;
}
.blend {
mix-blend-mode: multiply;
opacity: 0.5;
}
.d2-1815602595 .fill-N1{fill:#0A0F25;}
.d2-1815602595 .fill-N2{fill:#676C7E;}
.d2-1815602595 .fill-N3{fill:#9499AB;}
.d2-1815602595 .fill-N4{fill:#CFD2DD;}
.d2-1815602595 .fill-N5{fill:#DEE1EB;}
.d2-1815602595 .fill-N6{fill:#EEF1F8;}
.d2-1815602595 .fill-N7{fill:#FFFFFF;}
.d2-1815602595 .fill-B1{fill:#0D32B2;}
.d2-1815602595 .fill-B2{fill:#0D32B2;}
.d2-1815602595 .fill-B3{fill:#E3E9FD;}
.d2-1815602595 .fill-B4{fill:#E3E9FD;}
.d2-1815602595 .fill-B5{fill:#EDF0FD;}
.d2-1815602595 .fill-B6{fill:#F7F8FE;}
.d2-1815602595 .fill-AA2{fill:#4A6FF3;}
.d2-1815602595 .fill-AA4{fill:#EDF0FD;}
.d2-1815602595 .fill-AA5{fill:#F7F8FE;}
.d2-1815602595 .fill-AB4{fill:#EDF0FD;}
.d2-1815602595 .fill-AB5{fill:#F7F8FE;}
.d2-1815602595 .stroke-N1{stroke:#0A0F25;}
.d2-1815602595 .stroke-N2{stroke:#676C7E;}
.d2-1815602595 .stroke-N3{stroke:#9499AB;}
.d2-1815602595 .stroke-N4{stroke:#CFD2DD;}
.d2-1815602595 .stroke-N5{stroke:#DEE1EB;}
.d2-1815602595 .stroke-N6{stroke:#EEF1F8;}
.d2-1815602595 .stroke-N7{stroke:#FFFFFF;}
.d2-1815602595 .stroke-B1{stroke:#0D32B2;}
.d2-1815602595 .stroke-B2{stroke:#0D32B2;}
.d2-1815602595 .stroke-B3{stroke:#E3E9FD;}
.d2-1815602595 .stroke-B4{stroke:#E3E9FD;}
.d2-1815602595 .stroke-B5{stroke:#EDF0FD;}
.d2-1815602595 .stroke-B6{stroke:#F7F8FE;}
.d2-1815602595 .stroke-AA2{stroke:#4A6FF3;}
.d2-1815602595 .stroke-AA4{stroke:#EDF0FD;}
.d2-1815602595 .stroke-AA5{stroke:#F7F8FE;}
.d2-1815602595 .stroke-AB4{stroke:#EDF0FD;}
.d2-1815602595 .stroke-AB5{stroke:#F7F8FE;}
.d2-1815602595 .background-color-N1{background-color:#0A0F25;}
.d2-1815602595 .background-color-N2{background-color:#676C7E;}
.d2-1815602595 .background-color-N3{background-color:#9499AB;}
.d2-1815602595 .background-color-N4{background-color:#CFD2DD;}
.d2-1815602595 .background-color-N5{background-color:#DEE1EB;}
.d2-1815602595 .background-color-N6{background-color:#EEF1F8;}
.d2-1815602595 .background-color-N7{background-color:#FFFFFF;}
.d2-1815602595 .background-color-B1{background-color:#0D32B2;}
.d2-1815602595 .background-color-B2{background-color:#0D32B2;}
.d2-1815602595 .background-color-B3{background-color:#E3E9FD;}
.d2-1815602595 .background-color-B4{background-color:#E3E9FD;}
.d2-1815602595 .background-color-B5{background-color:#EDF0FD;}
.d2-1815602595 .background-color-B6{background-color:#F7F8FE;}
.d2-1815602595 .background-color-AA2{background-color:#4A6FF3;}
.d2-1815602595 .background-color-AA4{background-color:#EDF0FD;}
.d2-1815602595 .background-color-AA5{background-color:#F7F8FE;}
.d2-1815602595 .background-color-AB4{background-color:#EDF0FD;}
.d2-1815602595 .background-color-AB5{background-color:#F7F8FE;}
.d2-1815602595 .color-N1{color:#0A0F25;}
.d2-1815602595 .color-N2{color:#676C7E;}
.d2-1815602595 .color-N3{color:#9499AB;}
.d2-1815602595 .color-N4{color:#CFD2DD;}
.d2-1815602595 .color-N5{color:#DEE1EB;}
.d2-1815602595 .color-N6{color:#EEF1F8;}
.d2-1815602595 .color-N7{color:#FFFFFF;}
.d2-1815602595 .color-B1{color:#0D32B2;}
.d2-1815602595 .color-B2{color:#0D32B2;}
.d2-1815602595 .color-B3{color:#E3E9FD;}
.d2-1815602595 .color-B4{color:#E3E9FD;}
.d2-1815602595 .color-B5{color:#EDF0FD;}
.d2-1815602595 .color-B6{color:#F7F8FE;}
.d2-1815602595 .color-AA2{color:#4A6FF3;}
.d2-1815602595 .color-AA4{color:#EDF0FD;}
.d2-1815602595 .color-AA5{color:#F7F8FE;}
.d2-1815602595 .color-AB4{color:#EDF0FD;}
.d2-1815602595 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker-d2-1815602595);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-1815602595);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-1815602595);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-1815602595);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-1815602595);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-1815602595);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-1815602595);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-1815602595);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-1815602595);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-1815602595);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-1815602595);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-1815602595);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-1815602595);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-1815602595);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-1815602595);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-1815602595);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-1815602595);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-1815602595);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g class="YQ=="><g class="shape" ><path d="M 12 80 C 12 71 21 65 27 65 H 176 C 185 65 191 74 191 80 V 111 C 191 120 182 126 176 126 H 27 C 18 126 12 117 12 111 Z" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B3" style="stroke-width:2;" /><path d="M 102 -7 C 124 -7 142 11 142 33 C 142 54 124 72 102 72 C 80 72 62 54 62 33 C 62 11 80 -7 102 -7" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="102.000000" y="100.600000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c4-person</text></g><mask id="d2-1815602595" maskUnits="userSpaceOnUse" x="11" y="-9" width="182" height="136">
<rect x="11" y="-9" width="182" height="136" fill="white"></rect>
<rect x="66.500000" y="84.600000" width="71" height="21" fill="rgba(0,0,0,0.75)"></rect>
</mask></svg></svg>
Side by side

After

Width:  |  Height:  |  Size: 9.8 KiB

18
e2etests/txtar.txt
View file

@ -1169,3 +1169,21 @@ api-1 <-> api-2: {
api-1 -> api-3: {
target-arrowhead.shape: circle
}
-- dark-theme-md --
vars: {
d2-config: {
dark-theme-id: 200
}
}
a.shape: rectangle
a: |md
# hey
|
-- small-c4-person --
a.shape: c4-person
a: c4-person
a.width: 180

4
lib/shape/shape_c4_person.go
View file

@ -61,7 +61,9 @@ func bodyPath(box *geo.Box) *svg.SvgPathContext {
bodyWidth := width
bodyHeight := height - bodyTop
bodyLeft := 0
cornerRadius := width * 0.175
// Ensure cornerRadius is constrained to a portion of the shortest dimension
// This prevents distorted corners when width is large compared to height
cornerRadius := math.Min(width*0.175, bodyHeight*0.25)
pc.StartAt(pc.Absolute(float64(bodyLeft), bodyTop+cornerRadius))