From a7540203a504a473c87f5218ef18159d6fcec34a Mon Sep 17 00:00:00 2001 From: Alexander Wang Date: Mon, 3 Mar 2025 18:33:00 -0700 Subject: [PATCH] c4 theme --- d2exporter/export.go | 61 + d2graph/d2graph.go | 2 +- d2renderers/d2svg/d2svg.go | 2 + d2target/d2target.go | 7 + d2themes/d2themes.go | 1 + d2themes/d2themescatalog/c4.go | 38 + d2themes/d2themescatalog/catalog.go | 1 + .../txtar/c4-theme/dagre/board.exp.json | 1048 +++++++++++++++++ .../txtar/c4-theme/dagre/sketch.exp.svg | 886 ++++++++++++++ .../txtar/c4-theme/elk/board.exp.json | 882 ++++++++++++++ .../txtar/c4-theme/elk/sketch.exp.svg | 886 ++++++++++++++ e2etests/txtar.txt | 101 ++ 12 files changed, 3914 insertions(+), 1 deletion(-) create mode 100644 d2themes/d2themescatalog/c4.go create mode 100644 e2etests/testdata/txtar/c4-theme/dagre/board.exp.json create mode 100644 e2etests/testdata/txtar/c4-theme/dagre/sketch.exp.svg create mode 100644 e2etests/testdata/txtar/c4-theme/elk/board.exp.json create mode 100644 e2etests/testdata/txtar/c4-theme/elk/sketch.exp.svg diff --git a/d2exporter/export.go b/d2exporter/export.go index faf026c6f..ce65c2278 100644 --- a/d2exporter/export.go +++ b/d2exporter/export.go @@ -79,6 +79,46 @@ func applyTheme(shape *d2target.Shape, obj *d2graph.Object, theme *d2themes.Them if theme.SpecialRules.Mono { shape.FontFamily = "mono" } + if theme.SpecialRules.C4 && len(obj.ChildrenArray) > 0 { + if obj.Style.Fill == nil { + shape.Fill = "transparent" + } + if obj.Style.Stroke == nil { + shape.Stroke = color.AA2 + } + if obj.Style.StrokeDash == nil { + shape.StrokeDash = 5 + } + if obj.Style.FontColor == nil { + shape.Color = color.N1 + } + } + } + if theme.SpecialRules.C4 && obj.Level() == 1 && len(obj.ChildrenArray) == 0 && + obj.Shape.Value != d2target.ShapePerson && obj.Shape.Value != d2target.ShapeC4Person { + if obj.Style.Fill == nil { + shape.Fill = color.B6 + } + if obj.Style.Stroke == nil { + shape.Stroke = color.B5 + } + } + if theme.SpecialRules.C4 && (obj.Shape.Value == d2target.ShapePerson || obj.Shape.Value == d2target.ShapeC4Person) { + if obj.Style.Fill == nil { + shape.Fill = color.B2 + } + if obj.Style.Stroke == nil { + shape.Stroke = color.B1 + } + } + if theme.SpecialRules.C4 && obj.Level() > 1 && len(obj.ChildrenArray) == 0 && + obj.Shape.Value != d2target.ShapePerson && obj.Shape.Value != d2target.ShapeC4Person { + if obj.Style.Fill == nil { + shape.Fill = color.B4 + } + if obj.Style.Stroke == nil { + shape.Stroke = color.B3 + } } } @@ -165,6 +205,15 @@ func toShape(obj *d2graph.Object, g *d2graph.Graph) d2target.Shape { applyStyles(shape, obj) applyTheme(shape, obj, g.Theme) shape.Color = text.GetColor(shape.Italic) + if g.Theme.SpecialRules.C4 { + if obj.Style.FontColor == nil { + if len(obj.ChildrenArray) > 0 { + shape.Color = color.N1 + } else { + shape.Color = color.N7 + } + } + } applyStyles(shape, obj) switch strings.ToLower(obj.Shape.Value) { @@ -393,5 +442,17 @@ func toConnection(edge *d2graph.Edge, theme *d2themes.Theme) d2target.Connection connection.Src = edge.Src.AbsID() connection.Dst = edge.Dst.AbsID() + if theme != nil && theme.SpecialRules.C4 { + if edge.Style.StrokeDash == nil { + connection.StrokeDash = 5 + } + if edge.Style.Stroke == nil { + connection.Stroke = color.AA4 + } + if edge.Style.FontColor == nil { + connection.Color = color.N2 + } + } + return *connection } diff --git a/d2graph/d2graph.go b/d2graph/d2graph.go index 1c6cfd63f..c89a7d58d 100644 --- a/d2graph/d2graph.go +++ b/d2graph/d2graph.go @@ -565,7 +565,7 @@ func (obj *Object) GetFill() string { return color.AB5 } - if strings.EqualFold(shape, d2target.ShapePerson) { + if strings.EqualFold(shape, d2target.ShapePerson) || strings.EqualFold(shape, d2target.ShapeC4Person) { return color.B3 } if strings.EqualFold(shape, d2target.ShapeDiamond) { diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go index 974ac60aa..8c28b9e5e 100644 --- a/d2renderers/d2svg/d2svg.go +++ b/d2renderers/d2svg/d2svg.go @@ -1483,6 +1483,8 @@ func drawShape(writer, appendixWriter io.Writer, diagramHash string, targetShape } if !color.IsThemeColor(targetShape.Color) { styles = append(styles, fmt.Sprintf(`color:%s`, targetShape.Color)) + } else { + styles = append(styles, fmt.Sprintf(`color:%s`, d2themes.ResolveThemeColor(*inlineTheme, targetShape.Color))) } mdEl.Style = strings.Join(styles, ";") diff --git a/d2target/d2target.go b/d2target/d2target.go index d8db1c5e9..82a28c315 100644 --- a/d2target/d2target.go +++ b/d2target/d2target.go @@ -280,6 +280,13 @@ func (diagram Diagram) BoundingBox() (topLeft, bottomRight Point) { x2 = go2.Max(x2, targetShape.Pos.X+targetShape.Width+int(math.Ceil(float64(targetShape.StrokeWidth)/2.))) y2 = go2.Max(y2, targetShape.Pos.Y+targetShape.Height+int(math.Ceil(float64(targetShape.StrokeWidth)/2.))) + if targetShape.Type == ShapeC4Person { + headRadius := int(float64(targetShape.Width) * 0.22) + headCenterY := int(float64(targetShape.Height) * 0.18) + headTop := targetShape.Pos.Y + headCenterY - headRadius + y1 = go2.Min(y1, headTop-targetShape.StrokeWidth) + } + if targetShape.Tooltip != "" || targetShape.Link != "" { // 16 is the icon radius y1 = go2.Min(y1, targetShape.Pos.Y-targetShape.StrokeWidth-16) diff --git a/d2themes/d2themes.go b/d2themes/d2themes.go index 48313e3ff..8cfbf92ac 100644 --- a/d2themes/d2themes.go +++ b/d2themes/d2themes.go @@ -21,6 +21,7 @@ type SpecialRules struct { OuterContainerDoubleBorder bool `json:"outerContainerDoubleBorder"` ContainerDots bool `json:"containerDots"` CapsLock bool `json:"capsLock"` + C4 bool `json:"c4"` AllPaper bool `json:"allPaper"` } diff --git a/d2themes/d2themescatalog/c4.go b/d2themes/d2themescatalog/c4.go new file mode 100644 index 000000000..fb6a3b0ba --- /dev/null +++ b/d2themes/d2themescatalog/c4.go @@ -0,0 +1,38 @@ +package d2themescatalog + +import "oss.terrastruct.com/d2/d2themes" + +var C4 = d2themes.Theme{ + ID: 303, + Name: "C4", + Colors: d2themes.ColorPalette{ + Neutrals: d2themes.Neutral{ + N1: "#0f5eaa", // Container font color + N2: "#707070", // Connection font color + N3: "#FFFFFF", + N4: "#073b6f", // Person stroke + N5: "#999999", // Root level objects + N6: "#FFFFFF", + N7: "#FFFFFF", + }, + + // Primary colors + B1: "#073b6f", // Person stroke + B2: "#08427b", // Person fill + B3: "#3c7fc0", // Inner objects stroke + B4: "#438dd5", // Inner objects fill + B5: "#8a8a8a", // Root level objects stroke + B6: "#999999", // Root level objects fill + + // Accent colors + AA2: "#0f5eaa", // Container stroke + AA4: "#707070", // Connection stroke + AA5: "#f5f5f5", // Light background + + AB4: "#e1e1e1", + AB5: "#f0f0f0", + }, + SpecialRules: d2themes.SpecialRules{ + C4: true, + }, +} diff --git a/d2themes/d2themescatalog/catalog.go b/d2themes/d2themescatalog/catalog.go index 72cf8d10f..6341399dd 100644 --- a/d2themes/d2themescatalog/catalog.go +++ b/d2themes/d2themescatalog/catalog.go @@ -25,6 +25,7 @@ var LightCatalog = []d2themes.Theme{ Terminal, TerminalGrayscale, Origami, + C4, } var DarkCatalog = []d2themes.Theme{ diff --git a/e2etests/testdata/txtar/c4-theme/dagre/board.exp.json b/e2etests/testdata/txtar/c4-theme/dagre/board.exp.json new file mode 100644 index 000000000..bdb6871ab --- /dev/null +++ b/e2etests/testdata/txtar/c4-theme/dagre/board.exp.json @@ -0,0 +1,1048 @@ +{ + "name": "", + "config": { + "sketch": false, + "themeID": 303, + "darkThemeID": null, + "pad": null, + "center": null, + "layoutEngine": null + }, + "isFolderOnly": false, + "fontFamily": "SourceSansPro", + "shapes": [ + { + "id": "customer", + "type": "c4-person", + "pos": { + "x": 1105, + "y": 0 + }, + "width": 383, + "height": 429, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B2", + "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": "## Personal Banking Customer\n[person]\n\nA customer of the bank, with personal bank accounts.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "N7", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 358, + "labelHeight": 119, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "internet_banking_system", + "type": "rectangle", + "pos": { + "x": 147, + "y": 586 + }, + "width": 2407, + "height": 915, + "opacity": 1, + "strokeDash": 5, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "transparent", + "stroke": "AA2", + "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": "## Internet Banking System\n[Software System]", + "fontSize": 28, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 447, + "labelHeight": 125, + "labelPosition": "INSIDE_BOTTOM_LEFT", + "zIndex": 0, + "level": 1 + }, + { + "id": "internet_banking_system.web_app", + "type": "rectangle", + "pos": { + "x": 177, + "y": 616 + }, + "width": 550, + "height": 164, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B4", + "stroke": "B3", + "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": "## Web Application\n[Container: Java and Spring MVC]\n\nDelivers the static content and the Internet banking single page application.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "N7", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 505, + "labelHeight": 119, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "internet_banking_system.spa", + "type": "rectangle", + "pos": { + "x": 390, + "y": 901 + }, + "width": 609, + "height": 164, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B4", + "stroke": "B3", + "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": "## Single-Page Application\n[Container: JavaScript and Angular]\n\nProvides all of the Internet banking functionality to customers via their web browser.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "N7", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 564, + "labelHeight": 119, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "internet_banking_system.mobile_app", + "type": "rectangle", + "pos": { + "x": 1123, + "y": 901 + }, + "width": 707, + "height": 164, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B4", + "stroke": "B3", + "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": "## Mobile App\n[Container: Xamarin]\n\nProvides a limited subset of the Internet banking functionality to customers via their mobile device.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "N7", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 662, + "labelHeight": 119, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "internet_banking_system.api_app", + "type": "rectangle", + "pos": { + "x": 1246, + "y": 1202 + }, + "width": 461, + "height": 164, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B4", + "stroke": "B3", + "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": "## API Application\n[Container: Java and Spring MVC]\n\nProvides Internet banking functionality via a JSON/HTTPS API.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "N7", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 416, + "labelHeight": 119, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "internet_banking_system.database", + "type": "rectangle", + "pos": { + "x": 1890, + "y": 901 + }, + "width": 634, + "height": 164, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B4", + "stroke": "B3", + "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": "## Database\n[Container: Oracle Database Schema]\n\nStores user registration information, hashed authentication credentials, access logs, etc.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "N7", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 589, + "labelHeight": 119, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "email_system", + "type": "rectangle", + "pos": { + "x": 2410, + "y": 1638 + }, + "width": 360, + "height": 164, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B5", + "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": "## E-mail System\n[Software System]\n\nThe internal Microsoft Exchange e-mail system.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "N7", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 315, + "labelHeight": 119, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "mainframe", + "type": "rectangle", + "pos": { + "x": 0, + "y": 1638 + }, + "width": 629, + "height": 164, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B5", + "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": "## Mainframe Banking System\n[Software System]\n\nStores all of the core banking information about customers, accounts, transactions, etc.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "N7", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 584, + "labelHeight": 119, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + } + ], + "connections": [ + { + "id": "(customer -> internet_banking_system.web_app)[0]", + "src": "customer", + "srcArrow": "none", + "dst": "internet_banking_system.web_app", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 5, + "strokeWidth": 2, + "stroke": "AA4", + "borderRadius": 10, + "label": "Visits bigbank.com/ib using\n[HTTPS]", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 179, + "labelHeight": 37, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "link": "", + "route": [ + { + "x": 1105, + "y": 279 + }, + { + "x": 582.5999755859375, + "y": 453.79998779296875 + }, + { + "x": 452, + "y": 576 + }, + { + "x": 452, + "y": 616 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "internet_banking_system.(web_app -> spa)[0]", + "src": "internet_banking_system.web_app", + "srcArrow": "none", + "dst": "internet_banking_system.spa", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 5, + "strokeWidth": 2, + "stroke": "AA4", + "borderRadius": 10, + "label": "Delivers to the customer's web browser", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 257, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "link": "", + "route": [ + { + "x": 452, + "y": 779.5 + }, + { + "x": 452, + "y": 828.2999877929688 + }, + { + "x": 472.3999938964844, + "y": 852.7000122070312 + }, + { + "x": 554, + "y": 901.5 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(customer -> internet_banking_system.spa)[0]", + "src": "customer", + "srcArrow": "none", + "dst": "internet_banking_system.spa", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 5, + "strokeWidth": 2, + "stroke": "AA4", + "borderRadius": 10, + "label": "Views account balances, and makes payments using", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 340, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "link": "", + "route": [ + { + "x": 1105, + "y": 365 + }, + { + "x": 970.5999755859375, + "y": 471 + }, + { + "x": 937, + "y": 511.20001220703125 + }, + { + "x": 937, + "y": 531.75 + }, + { + "x": 937, + "y": 552.2999877929688 + }, + { + "x": 937, + "y": 592.4000244140625 + }, + { + "x": 937, + "y": 632 + }, + { + "x": 937, + "y": 671.5999755859375 + }, + { + "x": 916.5999755859375, + "y": 852.7000122070312 + }, + { + "x": 835, + "y": 901.5 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(customer -> internet_banking_system.mobile_app)[0]", + "src": "customer", + "srcArrow": "none", + "dst": "internet_banking_system.mobile_app", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 5, + "strokeWidth": 2, + "stroke": "AA4", + "borderRadius": 10, + "label": "Views account balances, and makes payments using", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 340, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "link": "", + "route": [ + { + "x": 1432, + "y": 428 + }, + { + "x": 1467.199951171875, + "y": 483.6000061035156 + }, + { + "x": 1476, + "y": 511.20001220703125 + }, + { + "x": 1476, + "y": 531.75 + }, + { + "x": 1476, + "y": 552.2999877929688 + }, + { + "x": 1476, + "y": 592.4000244140625 + }, + { + "x": 1476, + "y": 632 + }, + { + "x": 1476, + "y": 671.5999755859375 + }, + { + "x": 1476, + "y": 852.7000122070312 + }, + { + "x": 1476, + "y": 901.5 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "internet_banking_system.(spa -> api_app)[0]", + "src": "internet_banking_system.spa", + "srcArrow": "none", + "dst": "internet_banking_system.api_app", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 5, + "strokeWidth": 2, + "stroke": "AA4", + "borderRadius": 10, + "label": "Makes API calls to\n[JSON/HTTPS]", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 116, + "labelHeight": 37, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "link": "", + "route": [ + { + "x": 694.5, + "y": 1064.5 + }, + { + "x": 694.5, + "y": 1119.699951171875 + }, + { + "x": 804.7000122070312, + "y": 1154.7220458984375 + }, + { + "x": 1245.5, + "y": 1239.6099853515625 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "internet_banking_system.(mobile_app -> api_app)[0]", + "src": "internet_banking_system.mobile_app", + "srcArrow": "none", + "dst": "internet_banking_system.api_app", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 5, + "strokeWidth": 2, + "stroke": "AA4", + "borderRadius": 10, + "label": "Makes API calls to\n[JSON/HTTPS]", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 116, + "labelHeight": 37, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "link": "", + "route": [ + { + "x": 1476, + "y": 1064.5 + }, + { + "x": 1476, + "y": 1119.699951171875 + }, + { + "x": 1476, + "y": 1147.300048828125 + }, + { + "x": 1476, + "y": 1202.5 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(internet_banking_system.api_app -> mainframe)[0]", + "src": "internet_banking_system.api_app", + "srcArrow": "none", + "dst": "mainframe", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 5, + "strokeWidth": 2, + "stroke": "AA4", + "borderRadius": 10, + "label": "Makes API calls to\n[XML/HTTPS]", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 116, + "labelHeight": 37, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "link": "", + "route": [ + { + "x": 1245.5, + "y": 1310.1949462890625 + }, + { + "x": 500.6990051269531, + "y": 1462.8389892578125 + }, + { + "x": 314.5, + "y": 1583.300048828125 + }, + { + "x": 314.5, + "y": 1638.5 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(customer -> email_system)[0]", + "src": "customer", + "srcArrow": "none", + "dst": "email_system", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 5, + "strokeWidth": 2, + "stroke": "AA4", + "borderRadius": 10, + "label": "Sends e-mails to", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 107, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "link": "", + "route": [ + { + "x": 1488, + "y": 255 + }, + { + "x": 2407.199951171875, + "y": 449 + }, + { + "x": 2637, + "y": 511.20001220703125 + }, + { + "x": 2637, + "y": 531.75 + }, + { + "x": 2637, + "y": 552.2999877929688 + }, + { + "x": 2637, + "y": 592.4000244140625 + }, + { + "x": 2637, + "y": 632 + }, + { + "x": 2637, + "y": 671.5999755859375 + }, + { + "x": 2637, + "y": 726.5 + }, + { + "x": 2637, + "y": 769.25 + }, + { + "x": 2637, + "y": 812 + }, + { + "x": 2637, + "y": 869 + }, + { + "x": 2637, + "y": 911.75 + }, + { + "x": 2637, + "y": 954.5 + }, + { + "x": 2637, + "y": 1013.0999755859375 + }, + { + "x": 2637, + "y": 1058.25 + }, + { + "x": 2637, + "y": 1103.4000244140625 + }, + { + "x": 2637, + "y": 1163.5999755859375 + }, + { + "x": 2637, + "y": 1208.75 + }, + { + "x": 2637, + "y": 1253.9000244140625 + }, + { + "x": 2637, + "y": 1327.4000244140625 + }, + { + "x": 2637, + "y": 1392.5 + }, + { + "x": 2637, + "y": 1457.5999755859375 + }, + { + "x": 2632.800048828125, + "y": 1583.300048828125 + }, + { + "x": 2616, + "y": 1638.5 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(internet_banking_system.api_app -> email_system)[0]", + "src": "internet_banking_system.api_app", + "srcArrow": "none", + "dst": "email_system", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 5, + "strokeWidth": 2, + "stroke": "AA4", + "borderRadius": 10, + "label": "Sends e-mail using", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 123, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "link": "", + "route": [ + { + "x": 1707.5, + "y": 1317.843994140625 + }, + { + "x": 2241.5, + "y": 1464.3680419921875 + }, + { + "x": 2394.39990234375, + "y": 1583.300048828125 + }, + { + "x": 2472, + "y": 1638.5 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "internet_banking_system.(database <-> api_app)[0]", + "src": "internet_banking_system.database", + "srcArrow": "triangle", + "dst": "internet_banking_system.api_app", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 5, + "strokeWidth": 2, + "stroke": "AA4", + "borderRadius": 10, + "label": "Reads from and writes to\n[SQL/TCP]", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 163, + "labelHeight": 37, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "link": "", + "route": [ + { + "x": 2206.5, + "y": 1064.5 + }, + { + "x": 2206.5, + "y": 1119.699951171875 + }, + { + "x": 2106.5, + "y": 1154.0999755859375 + }, + { + "x": 1706.5, + "y": 1236.5 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + } + ], + "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 + } +} diff --git a/e2etests/testdata/txtar/c4-theme/dagre/sketch.exp.svg b/e2etests/testdata/txtar/c4-theme/dagre/sketch.exp.svg new file mode 100644 index 000000000..1982bf242 --- /dev/null +++ b/e2etests/testdata/txtar/c4-theme/dagre/sketch.exp.svg @@ -0,0 +1,886 @@ +

Personal Banking Customer

+

[person]

+

A customer of the bank, with personal bank accounts.

+

Internet Banking System

+

[Software System]

+

E-mail System

+

[Software System]

+

The internal Microsoft Exchange e-mail system.

+

Mainframe Banking System

+

[Software System]

+

Stores all of the core banking information about customers, accounts, transactions, etc.

+

Web Application

+

[Container: Java and Spring MVC]

+

Delivers the static content and the Internet banking single page application.

+

Single-Page Application

+

[Container: JavaScript and Angular]

+

Provides all of the Internet banking functionality to customers via their web browser.

+

Mobile App

+

[Container: Xamarin]

+

Provides a limited subset of the Internet banking functionality to customers via their mobile device.

+

API Application

+

[Container: Java and Spring MVC]

+

Provides Internet banking functionality via a JSON/HTTPS API.

+

Database

+

[Container: Oracle Database Schema]

+

Stores user registration information, hashed authentication credentials, access logs, etc.

+
 Visits bigbank.com/ib using[HTTPS]Delivers to the customer's web browserViews account balances, and makes payments usingViews account balances, and makes payments usingMakes API calls to[JSON/HTTPS]Makes API calls to[JSON/HTTPS]Makes API calls to[XML/HTTPS]Sends e-mails toSends e-mail using Reads from and writes to[SQL/TCP] + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/e2etests/testdata/txtar/c4-theme/elk/board.exp.json b/e2etests/testdata/txtar/c4-theme/elk/board.exp.json new file mode 100644 index 000000000..d2a3bd3f0 --- /dev/null +++ b/e2etests/testdata/txtar/c4-theme/elk/board.exp.json @@ -0,0 +1,882 @@ +{ + "name": "", + "config": { + "sketch": false, + "themeID": 303, + "darkThemeID": null, + "pad": null, + "center": null, + "layoutEngine": null + }, + "isFolderOnly": false, + "fontFamily": "SourceSansPro", + "shapes": [ + { + "id": "customer", + "type": "c4-person", + "pos": { + "x": 720, + "y": 12 + }, + "width": 383, + "height": 429, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B2", + "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": "## Personal Banking Customer\n[person]\n\nA customer of the bank, with personal bank accounts.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "N7", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 358, + "labelHeight": 119, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "internet_banking_system", + "type": "rectangle", + "pos": { + "x": 12, + "y": 693 + }, + "width": 2218, + "height": 1035, + "opacity": 1, + "strokeDash": 5, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "transparent", + "stroke": "AA2", + "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": "## Internet Banking System\n[Software System]", + "fontSize": 28, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 447, + "labelHeight": 125, + "labelPosition": "INSIDE_BOTTOM_LEFT", + "zIndex": 0, + "level": 1 + }, + { + "id": "internet_banking_system.web_app", + "type": "rectangle", + "pos": { + "x": 62, + "y": 743 + }, + "width": 550, + "height": 164, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B4", + "stroke": "B3", + "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": "## Web Application\n[Container: Java and Spring MVC]\n\nDelivers the static content and the Internet banking single page application.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "N7", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 505, + "labelHeight": 119, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "internet_banking_system.spa", + "type": "rectangle", + "pos": { + "x": 190, + "y": 1078 + }, + "width": 609, + "height": 164, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B4", + "stroke": "B3", + "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": "## Single-Page Application\n[Container: JavaScript and Angular]\n\nProvides all of the Internet banking functionality to customers via their web browser.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "N7", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 564, + "labelHeight": 119, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "internet_banking_system.mobile_app", + "type": "rectangle", + "pos": { + "x": 819, + "y": 1078 + }, + "width": 707, + "height": 164, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B4", + "stroke": "B3", + "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": "## Mobile App\n[Container: Xamarin]\n\nProvides a limited subset of the Internet banking functionality to customers via their mobile device.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "N7", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 662, + "labelHeight": 119, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "internet_banking_system.api_app", + "type": "rectangle", + "pos": { + "x": 942, + "y": 1429 + }, + "width": 461, + "height": 164, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B4", + "stroke": "B3", + "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": "## API Application\n[Container: Java and Spring MVC]\n\nProvides Internet banking functionality via a JSON/HTTPS API.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "N7", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 416, + "labelHeight": 119, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "internet_banking_system.database", + "type": "rectangle", + "pos": { + "x": 1546, + "y": 1078 + }, + "width": 634, + "height": 164, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B4", + "stroke": "B3", + "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": "## Database\n[Container: Oracle Database Schema]\n\nStores user registration information, hashed authentication credentials, access logs, etc.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "N7", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 589, + "labelHeight": 119, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "email_system", + "type": "rectangle", + "pos": { + "x": 1746, + "y": 1930 + }, + "width": 360, + "height": 164, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B5", + "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": "## E-mail System\n[Software System]\n\nThe internal Microsoft Exchange e-mail system.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "N7", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 315, + "labelHeight": 119, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "mainframe", + "type": "rectangle", + "pos": { + "x": 781, + "y": 1930 + }, + "width": 629, + "height": 164, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B5", + "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": "## Mainframe Banking System\n[Software System]\n\nStores all of the core banking information about customers, accounts, transactions, etc.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "N7", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 584, + "labelHeight": 119, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + } + ], + "connections": [ + { + "id": "(customer -> internet_banking_system.web_app)[0]", + "src": "customer", + "srcArrow": "none", + "dst": "internet_banking_system.web_app", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 5, + "strokeWidth": 2, + "stroke": "AA4", + "borderRadius": 10, + "label": "Visits bigbank.com/ib using\n[HTTPS]", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 179, + "labelHeight": 37, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "link": "", + "route": [ + { + "x": 797, + "y": 441 + }, + { + "x": 797.3499755859375, + "y": 481 + }, + { + "x": 359.25, + "y": 481 + }, + { + "x": 359.25, + "y": 743 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "internet_banking_system.(web_app -> spa)[0]", + "src": "internet_banking_system.web_app", + "srcArrow": "none", + "dst": "internet_banking_system.spa", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 5, + "strokeWidth": 2, + "stroke": "AA4", + "borderRadius": 10, + "label": "Delivers to the customer's web browser", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 257, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "link": "", + "route": [ + { + "x": 393, + "y": 907 + }, + { + "x": 393, + "y": 1078 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(customer -> internet_banking_system.spa)[0]", + "src": "customer", + "srcArrow": "none", + "dst": "internet_banking_system.spa", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 5, + "strokeWidth": 2, + "stroke": "AA4", + "borderRadius": 10, + "label": "Views account balances, and makes payments using", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 340, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "link": "", + "route": [ + { + "x": 874, + "y": 441 + }, + { + "x": 873.9500122070312, + "y": 531 + }, + { + "x": 652, + "y": 531 + }, + { + "x": 652, + "y": 1078 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(customer -> internet_banking_system.mobile_app)[0]", + "src": "customer", + "srcArrow": "none", + "dst": "internet_banking_system.mobile_app", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 5, + "strokeWidth": 2, + "stroke": "AA4", + "borderRadius": 10, + "label": "Views account balances, and makes payments using", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 340, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "link": "", + "route": [ + { + "x": 951, + "y": 441 + }, + { + "x": 950.5499877929688, + "y": 1078 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "internet_banking_system.(spa -> api_app)[0]", + "src": "internet_banking_system.spa", + "srcArrow": "none", + "dst": "internet_banking_system.api_app", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 5, + "strokeWidth": 2, + "stroke": "AA4", + "borderRadius": 10, + "label": "Makes API calls to\n[JSON/HTTPS]", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 116, + "labelHeight": 37, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "link": "", + "route": [ + { + "x": 494.5, + "y": 1242 + }, + { + "x": 494.5, + "y": 1389 + }, + { + "x": 1057.25, + "y": 1389 + }, + { + "x": 1057.25, + "y": 1429 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "internet_banking_system.(mobile_app -> api_app)[0]", + "src": "internet_banking_system.mobile_app", + "srcArrow": "none", + "dst": "internet_banking_system.api_app", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 5, + "strokeWidth": 2, + "stroke": "AA4", + "borderRadius": 10, + "label": "Makes API calls to\n[JSON/HTTPS]", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 116, + "labelHeight": 37, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "link": "", + "route": [ + { + "x": 1172.5, + "y": 1242 + }, + { + "x": 1172.5, + "y": 1429 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(internet_banking_system.api_app -> mainframe)[0]", + "src": "internet_banking_system.api_app", + "srcArrow": "none", + "dst": "mainframe", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 5, + "strokeWidth": 2, + "stroke": "AA4", + "borderRadius": 10, + "label": "Makes API calls to\n[XML/HTTPS]", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 116, + "labelHeight": 37, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "link": "", + "route": [ + { + "x": 1095.666015625, + "y": 1593 + }, + { + "x": 1095.666015625, + "y": 1930 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(customer -> email_system)[0]", + "src": "customer", + "srcArrow": "none", + "dst": "email_system", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 5, + "strokeWidth": 2, + "stroke": "AA4", + "borderRadius": 10, + "label": "Sends e-mails to", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 107, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "link": "", + "route": [ + { + "x": 1027, + "y": 441 + }, + { + "x": 1027.1500244140625, + "y": 481 + }, + { + "x": 2303.5, + "y": 481 + }, + { + "x": 2303.5, + "y": 1890 + }, + { + "x": 1986.8330078125, + "y": 1890 + }, + { + "x": 1986.8330078125, + "y": 1930 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(internet_banking_system.api_app -> email_system)[0]", + "src": "internet_banking_system.api_app", + "srcArrow": "none", + "dst": "email_system", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 5, + "strokeWidth": 2, + "stroke": "AA4", + "borderRadius": 10, + "label": "Sends e-mail using", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 123, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "link": "", + "route": [ + { + "x": 1249.3330078125, + "y": 1593 + }, + { + "x": 1249.3330078125, + "y": 1890 + }, + { + "x": 1866.8330078125, + "y": 1890 + }, + { + "x": 1866.8330078125, + "y": 1930 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "internet_banking_system.(database <-> api_app)[0]", + "src": "internet_banking_system.database", + "srcArrow": "triangle", + "dst": "internet_banking_system.api_app", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 5, + "strokeWidth": 2, + "stroke": "AA4", + "borderRadius": 10, + "label": "Reads from and writes to\n[SQL/TCP]", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 163, + "labelHeight": 37, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "link": "", + "route": [ + { + "x": 1863, + "y": 1242 + }, + { + "x": 1863, + "y": 1389 + }, + { + "x": 1287.75, + "y": 1389 + }, + { + "x": 1287.75, + "y": 1429 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + } + ], + "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 + } +} diff --git a/e2etests/testdata/txtar/c4-theme/elk/sketch.exp.svg b/e2etests/testdata/txtar/c4-theme/elk/sketch.exp.svg new file mode 100644 index 000000000..52d5d51f4 --- /dev/null +++ b/e2etests/testdata/txtar/c4-theme/elk/sketch.exp.svg @@ -0,0 +1,886 @@ +

Personal Banking Customer

+

[person]

+

A customer of the bank, with personal bank accounts.

+

Internet Banking System

+

[Software System]

+

E-mail System

+

[Software System]

+

The internal Microsoft Exchange e-mail system.

+

Mainframe Banking System

+

[Software System]

+

Stores all of the core banking information about customers, accounts, transactions, etc.

+

Web Application

+

[Container: Java and Spring MVC]

+

Delivers the static content and the Internet banking single page application.

+

Single-Page Application

+

[Container: JavaScript and Angular]

+

Provides all of the Internet banking functionality to customers via their web browser.

+

Mobile App

+

[Container: Xamarin]

+

Provides a limited subset of the Internet banking functionality to customers via their mobile device.

+

API Application

+

[Container: Java and Spring MVC]

+

Provides Internet banking functionality via a JSON/HTTPS API.

+

Database

+

[Container: Oracle Database Schema]

+

Stores user registration information, hashed authentication credentials, access logs, etc.

+
 Visits bigbank.com/ib using[HTTPS]Delivers to the customer's web browserViews account balances, and makes payments usingViews account balances, and makes payments usingMakes API calls to[JSON/HTTPS]Makes API calls to[JSON/HTTPS]Makes API calls to[XML/HTTPS]Sends e-mails toSends e-mail using Reads from and writes to[SQL/TCP] + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/e2etests/txtar.txt b/e2etests/txtar.txt index 85b1e141e..ec6be2ce9 100644 --- a/e2etests/txtar.txt +++ b/e2etests/txtar.txt @@ -1026,3 +1026,104 @@ c4person -> styling.c4styled -> styling.c4sized style.font-color: white style.stroke-width: 1 } + +-- c4-theme -- + +vars: { + d2-config: { + theme-id: 303 + } +} + +customer: |md + ## Personal Banking Customer + [person] + + A customer of the bank, with personal bank accounts. +| { + shape: c4-person +} + +internet_banking_system: |md + ## Internet Banking System + [Software System] +| { + shape: rectangle + label.near: bottom-left +} + +internet_banking_system.web_app: |md + ## Web Application + [Container: Java and Spring MVC] + + Delivers the static content and the Internet banking single page application. +| { + shape: rectangle +} + +internet_banking_system.spa: |md + ## Single-Page Application + [Container: JavaScript and Angular] + + Provides all of the Internet banking functionality to customers via their web browser. +| { + shape: rectangle +} + +internet_banking_system.mobile_app: |md + ## Mobile App + [Container: Xamarin] + + Provides a limited subset of the Internet banking functionality to customers via their mobile device. +| { + shape: rectangle +} + +internet_banking_system.api_app: |md + ## API Application + [Container: Java and Spring MVC] + + Provides Internet banking functionality via a JSON/HTTPS API. +| { + shape: rectangle +} + +internet_banking_system.database: |md + ## Database + [Container: Oracle Database Schema] + + Stores user registration information, hashed authentication credentials, access logs, etc. +| { + shape: rectangle +} + +email_system: |md + ## E-mail System + [Software System] + + The internal Microsoft Exchange e-mail system. +| { + shape: rectangle +} + +mainframe: |md + ## Mainframe Banking System + [Software System] + + Stores all of the core banking information about customers, accounts, transactions, etc. +| { + shape: rectangle +} + +# Connections +customer -> internet_banking_system.web_app: "Visits bigbank.com/ib using\n[HTTPS]" +internet_banking_system.web_app -> internet_banking_system.spa: "Delivers to the customer's web browser" +customer -> internet_banking_system.spa: "Views account balances, and makes payments using" +customer -> internet_banking_system.mobile_app: "Views account balances, and makes payments using" +internet_banking_system.spa -> internet_banking_system.api_app: "Makes API calls to\n[JSON/HTTPS]" +internet_banking_system.mobile_app -> internet_banking_system.api_app: "Makes API calls to\n[JSON/HTTPS]" +internet_banking_system.api_app -> mainframe: "Makes API calls to\n[XML/HTTPS]" +customer -> email_system: "Sends e-mails to" +internet_banking_system.api_app -> email_system: "Sends e-mail using" +internet_banking_system.database <-> internet_banking_system.api_app: "Reads from and writes to\n[SQL/TCP]" +