c4 theme
This commit is contained in:
Alexander Wang
parent
60ed1dc13e
commit
a7540203a5
12 changed files with 3914 additions and 1 deletions
|
|
@ -79,6 +79,46 @@ func applyTheme(shape *d2target.Shape, obj *d2graph.Object, theme *d2themes.Them
|
||||||
if theme.SpecialRules.Mono {
|
if theme.SpecialRules.Mono {
|
||||||
shape.FontFamily = "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)
|
applyStyles(shape, obj)
|
||||||
applyTheme(shape, obj, g.Theme)
|
applyTheme(shape, obj, g.Theme)
|
||||||
shape.Color = text.GetColor(shape.Italic)
|
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)
|
applyStyles(shape, obj)
|
||||||
|
|
||||||
switch strings.ToLower(obj.Shape.Value) {
|
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.Src = edge.Src.AbsID()
|
||||||
connection.Dst = edge.Dst.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
|
return *connection
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -565,7 +565,7 @@ func (obj *Object) GetFill() string {
|
||||||
return color.AB5
|
return color.AB5
|
||||||
}
|
}
|
||||||
|
|
||||||
if strings.EqualFold(shape, d2target.ShapePerson) {
|
if strings.EqualFold(shape, d2target.ShapePerson) || strings.EqualFold(shape, d2target.ShapeC4Person) {
|
||||||
return color.B3
|
return color.B3
|
||||||
}
|
}
|
||||||
if strings.EqualFold(shape, d2target.ShapeDiamond) {
|
if strings.EqualFold(shape, d2target.ShapeDiamond) {
|
||||||
|
|
|
||||||
|
|
@ -1483,6 +1483,8 @@ func drawShape(writer, appendixWriter io.Writer, diagramHash string, targetShape
|
||||||
}
|
}
|
||||||
if !color.IsThemeColor(targetShape.Color) {
|
if !color.IsThemeColor(targetShape.Color) {
|
||||||
styles = append(styles, fmt.Sprintf(`color:%s`, 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, ";")
|
mdEl.Style = strings.Join(styles, ";")
|
||||||
|
|
|
||||||
|
|
@ -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.)))
|
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.)))
|
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 != "" {
|
if targetShape.Tooltip != "" || targetShape.Link != "" {
|
||||||
// 16 is the icon radius
|
// 16 is the icon radius
|
||||||
y1 = go2.Min(y1, targetShape.Pos.Y-targetShape.StrokeWidth-16)
|
y1 = go2.Min(y1, targetShape.Pos.Y-targetShape.StrokeWidth-16)
|
||||||
|
|
|
||||||
|
|
@ -21,6 +21,7 @@ type SpecialRules struct {
|
||||||
OuterContainerDoubleBorder bool `json:"outerContainerDoubleBorder"`
|
OuterContainerDoubleBorder bool `json:"outerContainerDoubleBorder"`
|
||||||
ContainerDots bool `json:"containerDots"`
|
ContainerDots bool `json:"containerDots"`
|
||||||
CapsLock bool `json:"capsLock"`
|
CapsLock bool `json:"capsLock"`
|
||||||
|
C4 bool `json:"c4"`
|
||||||
|
|
||||||
AllPaper bool `json:"allPaper"`
|
AllPaper bool `json:"allPaper"`
|
||||||
}
|
}
|
||||||
|
|
|
||||||
38
d2themes/d2themescatalog/c4.go
Normal file
38
d2themes/d2themescatalog/c4.go
Normal 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,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
@ -25,6 +25,7 @@ var LightCatalog = []d2themes.Theme{
|
||||||
Terminal,
|
Terminal,
|
||||||
TerminalGrayscale,
|
TerminalGrayscale,
|
||||||
Origami,
|
Origami,
|
||||||
|
C4,
|
||||||
}
|
}
|
||||||
|
|
||||||
var DarkCatalog = []d2themes.Theme{
|
var DarkCatalog = []d2themes.Theme{
|
||||||
|
|
|
||||||
1048
e2etests/testdata/txtar/c4-theme/dagre/board.exp.json
generated
vendored
Normal file
1048
e2etests/testdata/txtar/c4-theme/dagre/board.exp.json
generated
vendored
Normal file
File diff suppressed because it is too large
Load diff
886
e2etests/testdata/txtar/c4-theme/dagre/sketch.exp.svg
vendored
Normal file
886
e2etests/testdata/txtar/c4-theme/dagre/sketch.exp.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 54 KiB |
882
e2etests/testdata/txtar/c4-theme/elk/board.exp.json
generated
vendored
Normal file
882
e2etests/testdata/txtar/c4-theme/elk/board.exp.json
generated
vendored
Normal 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
886
e2etests/testdata/txtar/c4-theme/elk/sketch.exp.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 53 KiB |
|
|
@ -1026,3 +1026,104 @@ c4person -> styling.c4styled -> styling.c4sized
|
||||||
style.font-color: white
|
style.font-color: white
|
||||||
style.stroke-width: 1
|
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]"
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue