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

c4 theme

Browse source
This commit is contained in:
Alexander Wang 2025-03-03 18:33:00 -07:00
parent 60ed1dc13e
commit a7540203a5
No known key found for this signature in database
GPG key ID: BE3937D0D52D8927
12 changed files with 3914 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
d2exporter/export.go
View file

@ -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
}

2
d2graph/d2graph.go
View file

@ -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) {

2
d2renderers/d2svg/d2svg.go
View file

@ -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, ";")

7
d2target/d2target.go
View file

@ -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)

1
d2themes/d2themes.go
View file

@ -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"`
}

38
d2themes/d2themescatalog/c4.go Normal file
View file

@ -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,
},
}

1
d2themes/d2themescatalog/catalog.go
View file

@ -25,6 +25,7 @@ var LightCatalog = []d2themes.Theme{
Terminal,
TerminalGrayscale,
Origami,
C4,
}
var DarkCatalog = []d2themes.Theme{

1048
e2etests/testdata/txtar/c4-theme/dagre/board.exp.json generated vendored Normal file
View file

File diff suppressed because it is too large Load diff

886
e2etests/testdata/txtar/c4-theme/dagre/sketch.exp.svg vendored Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 54 KiB

882
e2etests/testdata/txtar/c4-theme/elk/board.exp.json generated vendored Normal file
View file

@ -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
}
}

886
e2etests/testdata/txtar/c4-theme/elk/sketch.exp.svg vendored Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 53 KiB

101
e2etests/txtar.txt
View file

@ -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]"