out/docs/C4_Context/C4_Elements.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="761px" preserveAspectRatio="none" style="width:1127px;height:761px;" version="1.1" viewBox="0 0 1127 761" width="1127px" zoomAndPan="magnify"><defs/><g><!--cluster read_side--><rect fill="#FFFFFF" height="410" style="stroke: #444444; stroke-width: 1.0; stroke-dasharray: 7.0,7.0;" width="466" x="22" y="340"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="80" x="215" y="355.5352">«boundary»</text><text fill="#444444" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="79" x="215.5" y="373.957">Read Side</text><text fill="#444444" font-family="sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="53" x="228.5" y="388.9336">[System]</text><!--cluster write_side--><rect fill="#FFFFFF" height="418" style="stroke: #444444; stroke-width: 1.0; stroke-dasharray: 7.0,7.0;" width="436" x="680" y="332"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="80" x="858" y="347.5352">«boundary»</text><text fill="#444444" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="80" x="858" y="365.957">Write Side</text><text fill="#444444" font-family="sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="53" x="871.5" y="380.9336">[System]</text><!--entity read_model_db--><path d="M114.5,635 C114.5,625 200,625 200,625 C200,625 285.5,625 285.5,635 L285.5,724.0859 C285.5,734.0859 200,734.0859 200,734.0859 C200,734.0859 114.5,734.0859 114.5,724.0859 L114.5,635 " fill="#438DD5" style="stroke: #3C7FC0; stroke-width: 1.5;"/><path d="M114.5,635 C114.5,645 200,645 200,645 C200,645 285.5,645 285.5,635 " fill="none" style="stroke: #3C7FC0; stroke-width: 1.5;"/><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="65" x="167.5" y="660.6016">«container»</text><text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="95" x="152.5" y="678.6016">Read Model</text><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="57" x="171.5" y="693.5781">[Postgres]</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="0" x="202" y="709.6445"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="151" x="124.5" y="726.1328">Stores the read model</text><!--entity read_model_api--><rect fill="#438DD5" height="116.5742" style="stroke: #3C7FC0; stroke-width: 1.5;" width="199" x="38.5" y="408"/><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="65" x="105.5" y="429.6016">«container»</text><text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="81" x="97.5" y="447.6016">Query API</text><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="49" x="113.5" y="462.5781">[Hasura]</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="0" x="140" y="478.6445"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="175" x="48.5" y="495.1328">GraphQL API for querying</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="104" x="86" y="511.6211">the read model</text><!--entity projection--><rect fill="#438DD5" height="116.5742" style="stroke: #3C7FC0; stroke-width: 1.5;" width="199" x="272.5" y="408"/><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="65" x="339.5" y="429.6016">«container»</text><text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="144" x="300" y="447.6016">Projection Service</text><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="50" x="347" y="462.5781">[Haskell]</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="0" x="374" y="478.6445"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="175" x="282.5" y="495.1328">Listens to new events and</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="163" x="290.5" y="511.6211">updates the read model</text><!--entity event_store--><path d="M795.5,635 C795.5,625 879,625 879,625 C879,625 962.5,625 962.5,635 L962.5,724.0859 C962.5,734.0859 879,734.0859 879,734.0859 C879,734.0859 795.5,734.0859 795.5,724.0859 L795.5,635 " fill="#438DD5" style="stroke: #3C7FC0; stroke-width: 1.5;"/><path d="M795.5,635 C795.5,645 879,645 879,645 C879,645 962.5,645 962.5,635 " fill="none" style="stroke: #3C7FC0; stroke-width: 1.5;"/><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="65" x="846.5" y="660.6016">«container»</text><text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="91" x="833.5" y="678.6016">Event Store</text><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="57" x="850.5" y="693.5781">[Postgres]</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="0" x="881" y="709.6445"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="147" x="805.5" y="726.1328">Stores domain events</text><!--entity cmd_api--><rect fill="#438DD5" height="133.0625" style="stroke: #3C7FC0; stroke-width: 1.5;" width="187" x="912.5" y="400"/><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="65" x="973.5" y="421.6016">«container»</text><text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="116" x="948" y="439.6016">Command API</text><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="98" x="957" y="454.5781">[Haskell/Servant]</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="0" x="1008" y="470.6445"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="163" x="922.5" y="487.1328">HTTP/JSON API exposes</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="131" x="938.5" y="503.6211">endpoints for write</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="74" x="969" y="520.1094">operations</text><!--entity pub--><rect fill="#438DD5" height="116.5742" style="stroke: #3C7FC0; stroke-width: 1.5;" width="181" x="696.5" y="408"/><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="65" x="754.5" y="429.6016">«container»</text><text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="78" x="748" y="447.6016">Publisher</text><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="66" x="754" y="462.5781">[PureScript]</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="0" x="789" y="478.6445"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="157" x="706.5" y="495.1328">Publishes events to the</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="89" x="742.5" y="511.6211">message bus</text><!--entity user--><rect fill="#08427B" height="52.9766" style="stroke: #073B6F; stroke-width: 1.5;" width="72" x="535" y="8"/><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="52" x="545" y="29.6016">«person»</text><text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="37" x="552.5" y="47.6016">User</text><!--entity web_app--><rect fill="#438DD5" height="116.5742" style="stroke: #3C7FC0; stroke-width: 1.5;" width="219" x="461.5" y="138"/><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="65" x="538.5" y="159.6016">«container»</text><text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="159" x="491.5" y="177.6016">Web Application/UI</text><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="29" x="556.5" y="192.5781">[Elm]</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="0" x="573" y="208.6445"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="199" x="471.5" y="225.1328">Responsive user interface for</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="190" x="476" y="241.6211">playing or observing games</text><!--entity message_bus--><rect fill="#438DD5" height="100.0859" style="stroke: #3C7FC0; stroke-width: 1.5;" width="160" x="504" y="629.5"/><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="65" x="551.5" y="651.1016">«container»</text><text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="106" x="531" y="669.1016">Message Bus</text><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="40" x="564" y="684.0781">[Redis]</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="0" x="586" y="700.1445"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="140" x="514" y="716.6328">Transport for events</text><!--link user to web_app--><path d="M571,61.21 C571,80.42 571,107.55 571,132.4 " fill="none" id="user-&gt;web_app" style="stroke: #666666; stroke-width: 1.0;"/><polygon fill="#666666" points="571,137.66,575,128.66,571,132.66,567,128.66,571,137.66" style="stroke: #666666; stroke-width: 1.0;"/><text fill="#666666" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="32" x="572" y="104.5684">Uses</text><!--link web_app to read_model_api--><path d="M461.43,226.48 C397.27,246.93 316.94,278.81 255,324 C225.42,345.58 198.84,376.28 178.51,403.57 " fill="none" id="web_app-&gt;read_model_api" style="stroke: #666666; stroke-width: 1.0;"/><polygon fill="#666666" points="175.3,407.92,183.8501,403.0318,178.2587,403.8893,177.4011,398.2979,175.3,407.92" style="stroke: #666666; stroke-width: 1.0;"/><text fill="#666666" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="32" x="351.5" y="298.5684">Uses</text><text fill="#666666" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="97" x="319" y="312.9121">[GraphQL/HTTP]</text><!--link web_app to cmd_api--><path d="M680.75,224.44 C747.19,244.44 831.14,276.56 895,324 C921.06,343.36 944.27,370.34 962.63,395.55 " fill="none" id="web_app-&gt;cmd_api" style="stroke: #666666; stroke-width: 1.0;"/><polygon fill="#666666" points="965.77,399.91,963.7458,390.2714,962.8436,395.8559,957.2591,394.9537,965.77,399.91" style="stroke: #666666; stroke-width: 1.0;"/><text fill="#666666" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="32" x="901" y="298.5684">Uses</text><text fill="#666666" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="74" x="880" y="312.9121">[HTTP/JSON]</text><!--link read_model_api to read_model_db--><path d="M131.02,525.21 C130.22,547.52 131.7,572.93 139,595 C141.85,603.63 145.96,612.11 150.72,620.17 " fill="none" id="read_model_api-&gt;read_model_db" style="stroke: #666666; stroke-width: 1.0;"/><polygon fill="#666666" points="153.43,624.59,152.1673,614.8224,150.8303,620.319,145.3337,618.982,153.43,624.59" style="stroke: #666666; stroke-width: 1.0;"/><text fill="#666666" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="77" x="140" y="584.0684">Reads from</text><!--link cmd_api to event_store--><path d="M974.47,533.1 C964.12,553.31 952.14,575.4 940,595 C934.72,603.53 928.84,612.31 922.88,620.83 " fill="none" id="cmd_api-&gt;event_store" style="stroke: #666666; stroke-width: 1.0;"/><polygon fill="#666666" points="919.94,624.99,928.3994,619.9463,922.8245,620.906,921.8649,615.3311,919.94,624.99" style="stroke: #666666; stroke-width: 1.0;"/><text fill="#666666" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="107" x="958" y="576.5684">Reads from and</text><text fill="#666666" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="107" x="960" y="591.8789">writes events to</text><!--link projection to message_bus--><path d="M429.93,525.16 C461.5,556.58 500.29,595.19 531.05,625.8 " fill="none" id="projection-&gt;message_bus" style="stroke: #666666; stroke-width: 1.0;"/><polygon fill="#666666" points="534.76,629.5,531.2059,620.3148,531.2173,625.9716,525.5605,625.983,534.76,629.5" style="stroke: #666666; stroke-width: 1.0;"/><text fill="#666666" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="126" x="497" y="584.0684">Reads events from</text><!--link projection to read_model_db--><path d="M295.37,525.02 C282.34,536.75 269.62,549.62 259,563 C245.39,580.16 233.6,600.95 224.22,620.13 " fill="none" id="projection-&gt;read_model_db" style="stroke: #666666; stroke-width: 1.0;"/><polygon fill="#666666" points="221.89,624.97,229.3959,618.5934,224.0574,620.4642,222.1866,615.1256,221.89,624.97" style="stroke: #666666; stroke-width: 1.0;"/><text fill="#666666" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="107" x="260" y="576.5684">Reads from and</text><text fill="#666666" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="58" x="286.5" y="591.8789">writes to</text><!--link pub to message_bus--><path d="M718.65,525 C705.14,537.17 691.34,550.21 679,563 C660.24,582.44 641.03,605.16 624.84,625.29 " fill="none" id="pub-&gt;message_bus" style="stroke: #666666; stroke-width: 1.0;"/><polygon fill="#666666" points="621.65,629.27,630.4018,624.7527,624.7787,625.3698,624.1615,619.7468,621.65,629.27" style="stroke: #666666; stroke-width: 1.0;"/><text fill="#666666" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="108" x="680" y="584.0684">Writes events to</text><!--link pub to event_store--><path d="M789.88,525.3 C792.68,547.86 798,573.42 808,595 C812.05,603.74 817.28,612.29 823.05,620.38 " fill="none" id="pub-&gt;event_store" style="stroke: #666666; stroke-width: 1.0;"/><polygon fill="#666666" points="826.31,624.83,824.2089,615.2079,823.3513,620.7993,817.7599,619.9418,826.31,624.83" style="stroke: #666666; stroke-width: 1.0;"/><text fill="#666666" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="126" x="809" y="584.0684">Reads events from</text><!--
@startuml C4_Elements





skinparam defaultTextAlignment center

skinparam wrapWidth 200
skinparam maxMessageSize 150

skinparam rectangle {
    StereotypeFontSize 12
    shadowing false
}

skinparam database {
    StereotypeFontSize 12
    shadowing false
}

skinparam Arrow {
    Color #666666
    FontColor #666666
    FontSize 12
}

skinparam rectangle<<boundary>> {
    Shadowing false
    StereotypeFontSize 0
    FontColor #444444
    BorderColor #444444
    BorderStyle dashed
}






















skinparam rectangle<<person>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #08427B
    BorderColor #073B6F
}

skinparam rectangle<<external_person>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #686868
    BorderColor #8A8A8A
}

skinparam rectangle<<system>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #1168BD
    BorderColor #3C7FC0
}

skinparam rectangle<<external_system>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #999999
    BorderColor #8A8A8A
}

skinparam database<<system>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #1168BD
    BorderColor #3C7FC0
}

skinparam database<<external_system>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #999999
    BorderColor #8A8A8A
}
















skinparam rectangle<<container>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #438DD5
    BorderColor #3C7FC0
}

skinparam database<<container>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #438DD5
    BorderColor #3C7FC0
}








top to bottom direction

rectangle "==User" <<person>> as user

rectangle "==Web Application/UI\n//<size:12>[Elm]</size>//\n\n Responsive user interface for playing or observing games" <<container>> as web_app

rectangle "==Read Side\n<size:12>[System]</size>" <<boundary>> as read_side {
  database "==Read Model\n//<size:12>[Postgres]</size>//\n\n Stores the read model" <<container>> as read_model_db
  rectangle "==Query API\n//<size:12>[Hasura]</size>//\n\n GraphQL API for querying the read model" <<container>> as read_model_api
  rectangle "==Projection Service\n//<size:12>[Haskell]</size>//\n\n Listens to new events and updates the read model" <<container>> as projection
}

rectangle "==Message Bus\n//<size:12>[Redis]</size>//\n\n Transport for events" <<container>> as message_bus

rectangle "==Write Side\n<size:12>[System]</size>" <<boundary>> as write_side {
  database "==Event Store\n//<size:12>[Postgres]</size>//\n\n Stores domain events" <<container>> as event_store
  rectangle "==Command API\n//<size:12>[Haskell/Servant]</size>//\n\n HTTP/JSON API exposes endpoints for write operations" <<container>> as cmd_api
  rectangle "==Publisher\n//<size:12>[PureScript]</size>//\n\n Publishes events to the message bus" <<container>> as pub
}

user - -> web_app : "===Uses"

web_app - -> read_model_api : "===Uses\n//<size:12>[GraphQL/HTTP]</size>//"
web_app - -> cmd_api : "===Uses\n//<size:12>[HTTP/JSON]</size>//"

read_model_api - -> read_model_db : "===Reads from"
cmd_api - -> event_store : "===Reads from and writes events to"

projection - -> message_bus : "===Reads events from"
projection - -> read_model_db : "===Reads from and writes to"

pub - -> message_bus : "===Writes events to"
pub - -> event_store : "===Reads events from"

@enduml

PlantUML version 1.2019.09(Mon Aug 26 18:19:51 CEST 2019)
(GPL source distribution)
Java Runtime: OpenJDK Runtime Environment
JVM: OpenJDK 64-Bit Server VM
Java Version: 1.8.0_242-b08
Operating System: Mac OS X
OS Version: 10.15.4
Default Encoding: UTF-8
Language: en
Country: DE
--></g></svg>