Structurizr

Upload

workspace { model { # people editor = person "Editor" "A person that views, creates and modify documents" "User" reviewer = person "Reviewer" "A person that reviews documents" "User" # external systems email_system = softwareSystem "Email System" "Email sending system provider, e.g. Mailgun or any system implementing SMTP protocol" "External System" { } drs = softwareSystem "Document Registry System (DRS)" "External system to keep documents" "External System" { } # internal systems my_docs = softwareSystem "MyDocs" "System for managing and reviewing documents" { backend = container "Backend Application" "Serves HTTP requests and implements system business logic" "python / flask" { graphql_api = component "GraphQL API" "Expose GraphQL API endpint that accepts queries and mutations" "python / flask graphene" user_signin_service = component "User Sign In Service" "Enables user log in functionality using CSU" "python" user_signup_service = component "User Sign Up Service" "Enables user account registration functionality using CSU" "python" document_management_service = component "Document Management Service" "Implements logic for viewing, creating and editing documents by editors" "python" document_exporter = component "Document Export Component" "Enables exporting documents to doc/docx files and as a json/xml file in a format provided by 'Aktywne Formularze'" "python" document_review_service = component "Document Review Service" "Implements logic for reviewing documents by reviewers" "python" notification_sender = component "Notification Sender" "Provides notification templates, calls email system API" "python" searcher = component "Search Engine" "Component that provides functionality of robust searching for documents" } frontend_spa = container "Singe Page Application" "Frontend application that provides functionalities for Editors and Reviews" "Javascript React / Apollo GraphQL" { } database = container "Relational Database" "Relational Database Management System for storing documents" "PostgreSQL" "DB" { } elastic_search = container "Searcher Database" "Elastic Search Database System" "ElasticSearch" "DB" { } } # relationships editor -> frontend_spa "Uses" reviewer -> frontend_spa "Uses" frontend_spa -> graphql_api "Make API calls" "HTTPS/JSON" "GraphQL" graphql_api -> user_signin_service "Use" graphql_api -> user_signup_service "Use" graphql_api -> document_management_service "Use" graphql_api -> document_review_service "Use" user_signup_service -> database "Read and write data" "psycopg2" user_signup_service -> notification_sender "Uses" notification_sender -> email_system "Make API calls to send emails" "HTTPS/JSON" "REST" user_signin_service -> database "Read and write data" "psycopg2" document_management_service -> database "Read and write data" "psycopg" document_management_service -> document_exporter "Uses" document_management_service -> searcher "Send document" document_management_service -> searcher "Find document" document_exporter -> drs "Make API calls to store document in the registry" "HTTPS/JSON" "REST" document_review_service -> database "Read and write data" "psycopg" document_review_service -> searcher "Find document" searcher -> elastic_search "Read and write data" "" } views { systemLandscape { include * autoLayout } systemContext my_docs { include * autoLayout } container my_docs "Containers" { include * # autoLayout } component backend "Components" { include * # autoLayout } styles { element "User" { shape Person } element "DB" { shape Cylinder } element "Software System" { fontSize 30 } element "External System" { background #999999 # color #999999 } relationship "Event" { color #08427b fontSize 30 } relationship "RPC" { color #08427b fontSize 30 } relationship "GraphQL" { color #08427b fontSize 30 } relationship "Webhook" { color #08427b fontSize 30 } relationship "Websocket" { color #08427b fontSize 30 } } theme default } }

Structurizr DSL v3.0.0 - some features (e.g. !docs, !adrs, !script, etc) are unavailable via this demo page; see DSL for details.

Examples: Big Bank plc | Microservices | Amazon Web Services

Structurizr

Diagram

Structurizr

Graph

Export

PlantUML

Export

C4-PlantUML

Export

Mermaid

Export

DOT

Export

WebSequenceDiagrams

Export

Ilograph

PlantUML definitions are available via the Structurizr CLI export command, using the -format plantuml parameter. See StructurizrPlantUMLExporter for customisation options.

@startuml
set separator none
title MyDocs - Backend Application - Components

top to bottom direction

skinparam {
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}

hide stereotype

skinparam rectangle<<MyDocs.BackendApplication.DocumentExportComponent>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5d82a8
  roundCorner 20
  shadowing false
}
skinparam rectangle<<MyDocs.BackendApplication.DocumentManagementService>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5d82a8
  roundCorner 20
  shadowing false
}
skinparam rectangle<<DocumentRegistrySystemDRS>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
  roundCorner 20
  shadowing false
}
skinparam rectangle<<MyDocs.BackendApplication.DocumentReviewService>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5d82a8
  roundCorner 20
  shadowing false
}
skinparam rectangle<<EmailSystem>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
  roundCorner 20
  shadowing false
}
skinparam rectangle<<MyDocs.BackendApplication.GraphQLAPI>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5d82a8
  roundCorner 20
  shadowing false
}
skinparam rectangle<<MyDocs.BackendApplication.NotificationSender>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5d82a8
  roundCorner 20
  shadowing false
}
skinparam database<<MyDocs.RelationalDatabase>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
  shadowing false
}
skinparam rectangle<<MyDocs.BackendApplication.SearchEngine>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5d82a8
  roundCorner 20
  shadowing false
}
skinparam database<<MyDocs.SearcherDatabase>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
  shadowing false
}
skinparam rectangle<<MyDocs.SingePageApplication>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
  roundCorner 20
  shadowing false
}
skinparam rectangle<<MyDocs.BackendApplication.UserSignInService>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5d82a8
  roundCorner 20
  shadowing false
}
skinparam rectangle<<MyDocs.BackendApplication.UserSignUpService>> {
  BackgroundColor #85bbf0
  FontColor #000000
  BorderColor #5d82a8
  roundCorner 20
  shadowing false
}
skinparam rectangle<<MyDocs.BackendApplication>> {
  BorderColor #2e6295
  FontColor #2e6295
  shadowing false
}

rectangle "==Email System\n<size:10>[Software System]</size>\n\nEmail sending system provider, e.g. Mailgun or any system implementing SMTP protocol" <<EmailSystem>> as EmailSystem
rectangle "==Document Registry System (DRS)\n<size:10>[Software System]</size>\n\nExternal system to keep documents" <<DocumentRegistrySystemDRS>> as DocumentRegistrySystemDRS
rectangle "==Singe Page Application\n<size:10>[Container: Javascript React / Apollo GraphQL]</size>\n\nFrontend application that provides functionalities for Editors and Reviews" <<MyDocs.SingePageApplication>> as MyDocs.SingePageApplication
database "==Relational Database\n<size:10>[Container: PostgreSQL]</size>\n\nRelational Database Management System for storing documents" <<MyDocs.RelationalDatabase>> as MyDocs.RelationalDatabase
database "==Searcher Database\n<size:10>[Container: ElasticSearch]</size>\n\nElastic Search Database System" <<MyDocs.SearcherDatabase>> as MyDocs.SearcherDatabase

rectangle "Backend Application\n<size:10>[Container: python / flask]</size>" <<MyDocs.BackendApplication>> {
  rectangle "==Document Management Service\n<size:10>[Component: python]</size>\n\nImplements logic for viewing, creating and editing documents by editors" <<MyDocs.BackendApplication.DocumentManagementService>> as MyDocs.BackendApplication.DocumentManagementService
  rectangle "==Document Export Component\n<size:10>[Component: python]</size>\n\nEnables exporting documents to doc/docx files and as a json/xml file in a format provided by 'Aktywne Formularze'" <<MyDocs.BackendApplication.DocumentExportComponent>> as MyDocs.BackendApplication.DocumentExportComponent
  rectangle "==Document Review Service\n<size:10>[Component: python]</size>\n\nImplements logic for reviewing documents by reviewers" <<MyDocs.BackendApplication.DocumentReviewService>> as MyDocs.BackendApplication.DocumentReviewService
  rectangle "==Notification Sender\n<size:10>[Component: python]</size>\n\nProvides notification templates, calls email system API" <<MyDocs.BackendApplication.NotificationSender>> as MyDocs.BackendApplication.NotificationSender
  rectangle "==Search Engine\n<size:10>[Component]</size>\n\nComponent that provides functionality of robust searching for documents" <<MyDocs.BackendApplication.SearchEngine>> as MyDocs.BackendApplication.SearchEngine
  rectangle "==GraphQL API\n<size:10>[Component: python / flask graphene]</size>\n\nExpose GraphQL API endpint that accepts queries and mutations" <<MyDocs.BackendApplication.GraphQLAPI>> as MyDocs.BackendApplication.GraphQLAPI
  rectangle "==User Sign In Service\n<size:10>[Component: python]</size>\n\nEnables user log in functionality using CSU" <<MyDocs.BackendApplication.UserSignInService>> as MyDocs.BackendApplication.UserSignInService
  rectangle "==User Sign Up Service\n<size:10>[Component: python]</size>\n\nEnables user account registration functionality using CSU" <<MyDocs.BackendApplication.UserSignUpService>> as MyDocs.BackendApplication.UserSignUpService
}

MyDocs.SingePageApplication .[#08427b,thickness=2].> MyDocs.BackendApplication.GraphQLAPI : "<color:#08427b>Make API calls\n<color:#08427b><size:8>[HTTPS/JSON]</size>"
MyDocs.BackendApplication.GraphQLAPI .[#707070,thickness=2].> MyDocs.BackendApplication.UserSignInService : "<color:#707070>Use"
MyDocs.BackendApplication.GraphQLAPI .[#707070,thickness=2].> MyDocs.BackendApplication.UserSignUpService : "<color:#707070>Use"
MyDocs.BackendApplication.GraphQLAPI .[#707070,thickness=2].> MyDocs.BackendApplication.DocumentManagementService : "<color:#707070>Use"
MyDocs.BackendApplication.GraphQLAPI .[#707070,thickness=2].> MyDocs.BackendApplication.DocumentReviewService : "<color:#707070>Use"
MyDocs.BackendApplication.UserSignUpService .[#707070,thickness=2].> MyDocs.RelationalDatabase : "<color:#707070>Read and write data\n<color:#707070><size:8>[psycopg2]</size>"
MyDocs.BackendApplication.UserSignUpService .[#707070,thickness=2].> MyDocs.BackendApplication.NotificationSender : "<color:#707070>Uses"
MyDocs.BackendApplication.NotificationSender .[#707070,thickness=2].> EmailSystem : "<color:#707070>Make API calls to send emails\n<color:#707070><size:8>[HTTPS/JSON]</size>"
MyDocs.BackendApplication.UserSignInService .[#707070,thickness=2].> MyDocs.RelationalDatabase : "<color:#707070>Read and write data\n<color:#707070><size:8>[psycopg2]</size>"
MyDocs.BackendApplication.DocumentManagementService .[#707070,thickness=2].> MyDocs.RelationalDatabase : "<color:#707070>Read and write data\n<color:#707070><size:8>[psycopg]</size>"
MyDocs.BackendApplication.DocumentManagementService .[#707070,thickness=2].> MyDocs.BackendApplication.DocumentExportComponent : "<color:#707070>Uses"
MyDocs.BackendApplication.DocumentManagementService .[#707070,thickness=2].> MyDocs.BackendApplication.SearchEngine : "<color:#707070>Send document"
MyDocs.BackendApplication.DocumentManagementService .[#707070,thickness=2].> MyDocs.BackendApplication.SearchEngine : "<color:#707070>Find document"
MyDocs.BackendApplication.DocumentExportComponent .[#707070,thickness=2].> DocumentRegistrySystemDRS : "<color:#707070>Make API calls to store document in the registry\n<color:#707070><size:8>[HTTPS/JSON]</size>"
MyDocs.BackendApplication.DocumentReviewService .[#707070,thickness=2].> MyDocs.RelationalDatabase : "<color:#707070>Read and write data\n<color:#707070><size:8>[psycopg]</size>"
MyDocs.BackendApplication.DocumentReviewService .[#707070,thickness=2].> MyDocs.BackendApplication.SearchEngine : "<color:#707070>Find document"
MyDocs.BackendApplication.SearchEngine .[#707070,thickness=2].> MyDocs.SearcherDatabase : "<color:#707070>Read and write data"
@enduml

(this will send your diagram content to https://plantuml.com/plantuml)

@startuml
set separator none
title MyDocs - Containers

top to bottom direction

skinparam {
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}

hide stereotype

skinparam rectangle<<MyDocs.BackendApplication>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
  roundCorner 20
  shadowing false
}
skinparam rectangle<<DocumentRegistrySystemDRS>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
  roundCorner 20
  shadowing false
}
skinparam person<<Editor>> {
  BackgroundColor #08427b
  FontColor #ffffff
  BorderColor #052e56
  shadowing false
}
skinparam rectangle<<EmailSystem>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
  roundCorner 20
  shadowing false
}
skinparam database<<MyDocs.RelationalDatabase>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
  shadowing false
}
skinparam person<<Reviewer>> {
  BackgroundColor #08427b
  FontColor #ffffff
  BorderColor #052e56
  shadowing false
}
skinparam database<<MyDocs.SearcherDatabase>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
  shadowing false
}
skinparam rectangle<<MyDocs.SingePageApplication>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
  roundCorner 20
  shadowing false
}
skinparam rectangle<<MyDocs>> {
  BorderColor #0b4884
  FontColor #0b4884
  shadowing false
}

person "==Editor\n<size:10>[Person]</size>\n\nA person that views, creates and modify documents" <<Editor>> as Editor
person "==Reviewer\n<size:10>[Person]</size>\n\nA person that reviews documents" <<Reviewer>> as Reviewer
rectangle "==Email System\n<size:10>[Software System]</size>\n\nEmail sending system provider, e.g. Mailgun or any system implementing SMTP protocol" <<EmailSystem>> as EmailSystem
rectangle "==Document Registry System (DRS)\n<size:10>[Software System]</size>\n\nExternal system to keep documents" <<DocumentRegistrySystemDRS>> as DocumentRegistrySystemDRS

rectangle "MyDocs\n<size:10>[Software System]</size>" <<MyDocs>> {
  rectangle "==Singe Page Application\n<size:10>[Container: Javascript React / Apollo GraphQL]</size>\n\nFrontend application that provides functionalities for Editors and Reviews" <<MyDocs.SingePageApplication>> as MyDocs.SingePageApplication
  database "==Relational Database\n<size:10>[Container: PostgreSQL]</size>\n\nRelational Database Management System for storing documents" <<MyDocs.RelationalDatabase>> as MyDocs.RelationalDatabase
  database "==Searcher Database\n<size:10>[Container: ElasticSearch]</size>\n\nElastic Search Database System" <<MyDocs.SearcherDatabase>> as MyDocs.SearcherDatabase
  rectangle "==Backend Application\n<size:10>[Container: python / flask]</size>\n\nServes HTTP requests and implements system business logic" <<MyDocs.BackendApplication>> as MyDocs.BackendApplication
}

Editor .[#707070,thickness=2].> MyDocs.SingePageApplication : "<color:#707070>Uses"
Reviewer .[#707070,thickness=2].> MyDocs.SingePageApplication : "<color:#707070>Uses"
MyDocs.SingePageApplication .[#08427b,thickness=2].> MyDocs.BackendApplication : "<color:#08427b>Make API calls\n<color:#08427b><size:8>[HTTPS/JSON]</size>"
MyDocs.BackendApplication .[#707070,thickness=2].> MyDocs.RelationalDatabase : "<color:#707070>Read and write data\n<color:#707070><size:8>[psycopg2]</size>"
MyDocs.BackendApplication .[#707070,thickness=2].> EmailSystem : "<color:#707070>Make API calls to send emails\n<color:#707070><size:8>[HTTPS/JSON]</size>"
MyDocs.BackendApplication .[#707070,thickness=2].> DocumentRegistrySystemDRS : "<color:#707070>Make API calls to store document in the registry\n<color:#707070><size:8>[HTTPS/JSON]</size>"
MyDocs.BackendApplication .[#707070,thickness=2].> MyDocs.SearcherDatabase : "<color:#707070>Read and write data"
@enduml

(this will send your diagram content to https://plantuml.com/plantuml)

@startuml
set separator none
title MyDocs - System Context

top to bottom direction

skinparam {
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}

hide stereotype

skinparam rectangle<<DocumentRegistrySystemDRS>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
  roundCorner 20
  shadowing false
}
skinparam person<<Editor>> {
  BackgroundColor #08427b
  FontColor #ffffff
  BorderColor #052e56
  shadowing false
}
skinparam rectangle<<EmailSystem>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
  roundCorner 20
  shadowing false
}
skinparam rectangle<<MyDocs>> {
  BackgroundColor #1168bd
  FontColor #ffffff
  BorderColor #0b4884
  roundCorner 20
  shadowing false
}
skinparam person<<Reviewer>> {
  BackgroundColor #08427b
  FontColor #ffffff
  BorderColor #052e56
  shadowing false
}

person "==Editor\n<size:10>[Person]</size>\n\nA person that views, creates and modify documents" <<Editor>> as Editor
person "==Reviewer\n<size:10>[Person]</size>\n\nA person that reviews documents" <<Reviewer>> as Reviewer
rectangle "==Email System\n<size:10>[Software System]</size>\n\nEmail sending system provider, e.g. Mailgun or any system implementing SMTP protocol" <<EmailSystem>> as EmailSystem
rectangle "==Document Registry System (DRS)\n<size:10>[Software System]</size>\n\nExternal system to keep documents" <<DocumentRegistrySystemDRS>> as DocumentRegistrySystemDRS
rectangle "==MyDocs\n<size:10>[Software System]</size>\n\nSystem for managing and reviewing documents" <<MyDocs>> as MyDocs

Editor .[#707070,thickness=2].> MyDocs : "<color:#707070>Uses"
Reviewer .[#707070,thickness=2].> MyDocs : "<color:#707070>Uses"
MyDocs .[#707070,thickness=2].> EmailSystem : "<color:#707070>Make API calls to send emails\n<color:#707070><size:8>[HTTPS/JSON]</size>"
MyDocs .[#707070,thickness=2].> DocumentRegistrySystemDRS : "<color:#707070>Make API calls to store document in the registry\n<color:#707070><size:8>[HTTPS/JSON]</size>"
@enduml

(this will send your diagram content to https://plantuml.com/plantuml)

@startuml
set separator none
title System Landscape

top to bottom direction

skinparam {
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}

hide stereotype

skinparam rectangle<<DocumentRegistrySystemDRS>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
  roundCorner 20
  shadowing false
}
skinparam person<<Editor>> {
  BackgroundColor #08427b
  FontColor #ffffff
  BorderColor #052e56
  shadowing false
}
skinparam rectangle<<EmailSystem>> {
  BackgroundColor #999999
  FontColor #ffffff
  BorderColor #6b6b6b
  roundCorner 20
  shadowing false
}
skinparam rectangle<<MyDocs>> {
  BackgroundColor #1168bd
  FontColor #ffffff
  BorderColor #0b4884
  roundCorner 20
  shadowing false
}
skinparam person<<Reviewer>> {
  BackgroundColor #08427b
  FontColor #ffffff
  BorderColor #052e56
  shadowing false
}

person "==Editor\n<size:10>[Person]</size>\n\nA person that views, creates and modify documents" <<Editor>> as Editor
person "==Reviewer\n<size:10>[Person]</size>\n\nA person that reviews documents" <<Reviewer>> as Reviewer
rectangle "==Email System\n<size:10>[Software System]</size>\n\nEmail sending system provider, e.g. Mailgun or any system implementing SMTP protocol" <<EmailSystem>> as EmailSystem
rectangle "==Document Registry System (DRS)\n<size:10>[Software System]</size>\n\nExternal system to keep documents" <<DocumentRegistrySystemDRS>> as DocumentRegistrySystemDRS
rectangle "==MyDocs\n<size:10>[Software System]</size>\n\nSystem for managing and reviewing documents" <<MyDocs>> as MyDocs

Editor .[#707070,thickness=2].> MyDocs : "<color:#707070>Uses"
Reviewer .[#707070,thickness=2].> MyDocs : "<color:#707070>Uses"
MyDocs .[#707070,thickness=2].> EmailSystem : "<color:#707070>Make API calls to send emails\n<color:#707070><size:8>[HTTPS/JSON]</size>"
MyDocs .[#707070,thickness=2].> DocumentRegistrySystemDRS : "<color:#707070>Make API calls to store document in the registry\n<color:#707070><size:8>[HTTPS/JSON]</size>"
@enduml

(this will send your diagram content to https://plantuml.com/plantuml)

C4-PlantUML definitions are available via the Structurizr CLI export command, using the -format plantuml/c4plantuml parameter. See C4PlantUMLExporter for customisation options.

@startuml
set separator none
title MyDocs - Backend Application - Components

top to bottom direction

!include <C4/C4>
!include <C4/C4_Context>
!include <C4/C4_Container>
!include <C4/C4_Component>

System(EmailSystem, "Email System", $descr="Email sending system provider, e.g. Mailgun or any system implementing SMTP protocol", $tags="", $link="")
System(DocumentRegistrySystemDRS, "Document Registry System (DRS)", $descr="External system to keep documents", $tags="", $link="")
Container(MyDocs.SingePageApplication, "Singe Page Application", $techn="Javascript React / Apollo GraphQL", $descr="Frontend application that provides functionalities for Editors and Reviews", $tags="", $link="")
ContainerDb(MyDocs.RelationalDatabase, "Relational Database", $techn="PostgreSQL", $descr="Relational Database Management System for storing documents", $tags="", $link="")
ContainerDb(MyDocs.SearcherDatabase, "Searcher Database", $techn="ElasticSearch", $descr="Elastic Search Database System", $tags="", $link="")

Container_Boundary("MyDocs.BackendApplication_boundary", "Backend Application", $tags="") {
  Component(MyDocs.BackendApplication.DocumentManagementService, "Document Management Service", $techn="python", $descr="Implements logic for viewing, creating and editing documents by editors", $tags="", $link="")
  Component(MyDocs.BackendApplication.DocumentExportComponent, "Document Export Component", $techn="python", $descr="Enables exporting documents to doc/docx files and as a json/xml file in a format provided by 'Aktywne Formularze'", $tags="", $link="")
  Component(MyDocs.BackendApplication.DocumentReviewService, "Document Review Service", $techn="python", $descr="Implements logic for reviewing documents by reviewers", $tags="", $link="")
  Component(MyDocs.BackendApplication.NotificationSender, "Notification Sender", $techn="python", $descr="Provides notification templates, calls email system API", $tags="", $link="")
  Component(MyDocs.BackendApplication.SearchEngine, "Search Engine", $techn="", $descr="Component that provides functionality of robust searching for documents", $tags="", $link="")
  Component(MyDocs.BackendApplication.GraphQLAPI, "GraphQL API", $techn="python / flask graphene", $descr="Expose GraphQL API endpint that accepts queries and mutations", $tags="", $link="")
  Component(MyDocs.BackendApplication.UserSignInService, "User Sign In Service", $techn="python", $descr="Enables user log in functionality using CSU", $tags="", $link="")
  Component(MyDocs.BackendApplication.UserSignUpService, "User Sign Up Service", $techn="python", $descr="Enables user account registration functionality using CSU", $tags="", $link="")
}

Rel(MyDocs.SingePageApplication, MyDocs.BackendApplication.GraphQLAPI, "Make API calls", $techn="HTTPS/JSON", $tags="", $link="")
Rel(MyDocs.BackendApplication.GraphQLAPI, MyDocs.BackendApplication.UserSignInService, "Use", $techn="", $tags="", $link="")
Rel(MyDocs.BackendApplication.GraphQLAPI, MyDocs.BackendApplication.UserSignUpService, "Use", $techn="", $tags="", $link="")
Rel(MyDocs.BackendApplication.GraphQLAPI, MyDocs.BackendApplication.DocumentManagementService, "Use", $techn="", $tags="", $link="")
Rel(MyDocs.BackendApplication.GraphQLAPI, MyDocs.BackendApplication.DocumentReviewService, "Use", $techn="", $tags="", $link="")
Rel(MyDocs.BackendApplication.UserSignUpService, MyDocs.RelationalDatabase, "Read and write data", $techn="psycopg2", $tags="", $link="")
Rel(MyDocs.BackendApplication.UserSignUpService, MyDocs.BackendApplication.NotificationSender, "Uses", $techn="", $tags="", $link="")
Rel(MyDocs.BackendApplication.NotificationSender, EmailSystem, "Make API calls to send emails", $techn="HTTPS/JSON", $tags="", $link="")
Rel(MyDocs.BackendApplication.UserSignInService, MyDocs.RelationalDatabase, "Read and write data", $techn="psycopg2", $tags="", $link="")
Rel(MyDocs.BackendApplication.DocumentManagementService, MyDocs.RelationalDatabase, "Read and write data", $techn="psycopg", $tags="", $link="")
Rel(MyDocs.BackendApplication.DocumentManagementService, MyDocs.BackendApplication.DocumentExportComponent, "Uses", $techn="", $tags="", $link="")
Rel(MyDocs.BackendApplication.DocumentManagementService, MyDocs.BackendApplication.SearchEngine, "Send document", $techn="", $tags="", $link="")
Rel(MyDocs.BackendApplication.DocumentManagementService, MyDocs.BackendApplication.SearchEngine, "Find document", $techn="", $tags="", $link="")
Rel(MyDocs.BackendApplication.DocumentExportComponent, DocumentRegistrySystemDRS, "Make API calls to store document in the registry", $techn="HTTPS/JSON", $tags="", $link="")
Rel(MyDocs.BackendApplication.DocumentReviewService, MyDocs.RelationalDatabase, "Read and write data", $techn="psycopg", $tags="", $link="")
Rel(MyDocs.BackendApplication.DocumentReviewService, MyDocs.BackendApplication.SearchEngine, "Find document", $techn="", $tags="", $link="")
Rel(MyDocs.BackendApplication.SearchEngine, MyDocs.SearcherDatabase, "Read and write data", $techn="", $tags="", $link="")

SHOW_LEGEND(true)
@enduml

(this will send your diagram content to https://plantuml.com/plantuml)

@startuml
set separator none
title MyDocs - Containers

top to bottom direction

!include <C4/C4>
!include <C4/C4_Context>
!include <C4/C4_Container>

Person(Editor, "Editor", $descr="A person that views, creates and modify documents", $tags="", $link="")
Person(Reviewer, "Reviewer", $descr="A person that reviews documents", $tags="", $link="")
System(EmailSystem, "Email System", $descr="Email sending system provider, e.g. Mailgun or any system implementing SMTP protocol", $tags="", $link="")
System(DocumentRegistrySystemDRS, "Document Registry System (DRS)", $descr="External system to keep documents", $tags="", $link="")

System_Boundary("MyDocs_boundary", "MyDocs", $tags="") {
  Container(MyDocs.SingePageApplication, "Singe Page Application", $techn="Javascript React / Apollo GraphQL", $descr="Frontend application that provides functionalities for Editors and Reviews", $tags="", $link="")
  ContainerDb(MyDocs.RelationalDatabase, "Relational Database", $techn="PostgreSQL", $descr="Relational Database Management System for storing documents", $tags="", $link="")
  ContainerDb(MyDocs.SearcherDatabase, "Searcher Database", $techn="ElasticSearch", $descr="Elastic Search Database System", $tags="", $link="")
  Container(MyDocs.BackendApplication, "Backend Application", $techn="python / flask", $descr="Serves HTTP requests and implements system business logic", $tags="", $link="")
}

Rel(Editor, MyDocs.SingePageApplication, "Uses", $techn="", $tags="", $link="")
Rel(Reviewer, MyDocs.SingePageApplication, "Uses", $techn="", $tags="", $link="")
Rel(MyDocs.SingePageApplication, MyDocs.BackendApplication, "Make API calls", $techn="HTTPS/JSON", $tags="", $link="")
Rel(MyDocs.BackendApplication, MyDocs.RelationalDatabase, "Read and write data", $techn="psycopg2", $tags="", $link="")
Rel(MyDocs.BackendApplication, EmailSystem, "Make API calls to send emails", $techn="HTTPS/JSON", $tags="", $link="")
Rel(MyDocs.BackendApplication, DocumentRegistrySystemDRS, "Make API calls to store document in the registry", $techn="HTTPS/JSON", $tags="", $link="")
Rel(MyDocs.BackendApplication, MyDocs.SearcherDatabase, "Read and write data", $techn="", $tags="", $link="")

SHOW_LEGEND(true)
@enduml

(this will send your diagram content to https://plantuml.com/plantuml)

Mermaid definitions are available via the Structurizr CLI export command, using the -format mermaid parameter. Your Mermaid configuration will need to include "securityLevel": "loose" to render this definition correctly.

graph TB
  linkStyle default fill:#ffffff

  subgraph diagram ["MyDocs - Backend Application - Components"]
    style diagram fill:#ffffff,stroke:#ffffff

    3("<div style='font-weight: bold'>Email System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Email sending system<br />provider, e.g. Mailgun or any<br />system implementing SMTP<br />protocol</div>")
    style 3 fill:#999999,stroke:#6b6b6b,color:#ffffff
    4("<div style='font-weight: bold'>Document Registry System (DRS)</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>External system to keep<br />documents</div>")
    style 4 fill:#999999,stroke:#6b6b6b,color:#ffffff
    15("<div style='font-weight: bold'>Singe Page Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: Javascript React / Apollo GraphQL]</div><div style='font-size: 80%; margin-top:10px'>Frontend application that<br />provides functionalities for<br />Editors and Reviews</div>")
    style 15 fill:#438dd5,stroke:#2e6295,color:#ffffff
    16[("<div style='font-weight: bold'>Relational Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: PostgreSQL]</div><div style='font-size: 80%; margin-top:10px'>Relational Database<br />Management System for storing<br />documents</div>")]
    style 16 fill:#438dd5,stroke:#2e6295,color:#ffffff
    17[("<div style='font-weight: bold'>Searcher Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: ElasticSearch]</div><div style='font-size: 80%; margin-top:10px'>Elastic Search Database<br />System</div>")]
    style 17 fill:#438dd5,stroke:#2e6295,color:#ffffff

    subgraph 6 ["Backend Application"]
      style 6 fill:#ffffff,stroke:#2e6295,color:#2e6295

      10("<div style='font-weight: bold'>Document Management Service</div><div style='font-size: 70%; margin-top: 0px'>[Component: python]</div><div style='font-size: 80%; margin-top:10px'>Implements logic for viewing,<br />creating and editing<br />documents by editors</div>")
      style 10 fill:#85bbf0,stroke:#5d82a8,color:#000000
      11("<div style='font-weight: bold'>Document Export Component</div><div style='font-size: 70%; margin-top: 0px'>[Component: python]</div><div style='font-size: 80%; margin-top:10px'>Enables exporting documents<br />to doc/docx files and as a<br />json/xml file in a format<br />provided by 'Aktywne<br />Formularze'</div>")
      style 11 fill:#85bbf0,stroke:#5d82a8,color:#000000
      12("<div style='font-weight: bold'>Document Review Service</div><div style='font-size: 70%; margin-top: 0px'>[Component: python]</div><div style='font-size: 80%; margin-top:10px'>Implements logic for<br />reviewing documents by<br />reviewers</div>")
      style 12 fill:#85bbf0,stroke:#5d82a8,color:#000000
      13("<div style='font-weight: bold'>Notification Sender</div><div style='font-size: 70%; margin-top: 0px'>[Component: python]</div><div style='font-size: 80%; margin-top:10px'>Provides notification<br />templates, calls email system<br />API</div>")
      style 13 fill:#85bbf0,stroke:#5d82a8,color:#000000
      14("<div style='font-weight: bold'>Search Engine</div><div style='font-size: 70%; margin-top: 0px'>[Component]</div><div style='font-size: 80%; margin-top:10px'>Component that provides<br />functionality of robust<br />searching for documents</div>")
      style 14 fill:#85bbf0,stroke:#5d82a8,color:#000000
      7("<div style='font-weight: bold'>GraphQL API</div><div style='font-size: 70%; margin-top: 0px'>[Component: python / flask graphene]</div><div style='font-size: 80%; margin-top:10px'>Expose GraphQL API endpint<br />that accepts queries and<br />mutations</div>")
      style 7 fill:#85bbf0,stroke:#5d82a8,color:#000000
      8("<div style='font-weight: bold'>User Sign In Service</div><div style='font-size: 70%; margin-top: 0px'>[Component: python]</div><div style='font-size: 80%; margin-top:10px'>Enables user log in<br />functionality using CSU</div>")
      style 8 fill:#85bbf0,stroke:#5d82a8,color:#000000
      9("<div style='font-weight: bold'>User Sign Up Service</div><div style='font-size: 70%; margin-top: 0px'>[Component: python]</div><div style='font-size: 80%; margin-top:10px'>Enables user account<br />registration functionality<br />using CSU</div>")
      style 9 fill:#85bbf0,stroke:#5d82a8,color:#000000
    end

    15-. "<div>Make API calls</div><div style='font-size: 70%'>[HTTPS/JSON]</div>" .->7
    7-. "<div>Use</div><div style='font-size: 70%'></div>" .->8
    7-. "<div>Use</div><div style='font-size: 70%'></div>" .->9
    7-. "<div>Use</div><div style='font-size: 70%'></div>" .->10
    7-. "<div>Use</div><div style='font-size: 70%'></div>" .->12
    9-. "<div>Read and write data</div><div style='font-size: 70%'>[psycopg2]</div>" .->16
    9-. "<div>Uses</div><div style='font-size: 70%'></div>" .->13
    13-. "<div>Make API calls to send emails</div><div style='font-size: 70%'>[HTTPS/JSON]</div>" .->3
    8-. "<div>Read and write data</div><div style='font-size: 70%'>[psycopg2]</div>" .->16
    10-. "<div>Read and write data</div><div style='font-size: 70%'>[psycopg]</div>" .->16
    10-. "<div>Uses</div><div style='font-size: 70%'></div>" .->11
    10-. "<div>Send document</div><div style='font-size: 70%'></div>" .->14
    10-. "<div>Find document</div><div style='font-size: 70%'></div>" .->14
    11-. "<div>Make API calls to store<br />document in the registry</div><div style='font-size: 70%'>[HTTPS/JSON]</div>" .->4
    12-. "<div>Read and write data</div><div style='font-size: 70%'>[psycopg]</div>" .->16
    12-. "<div>Find document</div><div style='font-size: 70%'></div>" .->14
    14-. "<div>Read and write data</div><div style='font-size: 70%'></div>" .->17
  end

(this will send your diagram content to https://mermaid.ink)

graph TB
  linkStyle default fill:#ffffff

  subgraph diagram ["MyDocs - Containers"]
    style diagram fill:#ffffff,stroke:#ffffff

    1["<div style='font-weight: bold'>Editor</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>A person that views, creates<br />and modify documents</div>"]
    style 1 fill:#08427b,stroke:#052e56,color:#ffffff
    2["<div style='font-weight: bold'>Reviewer</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>A person that reviews<br />documents</div>"]
    style 2 fill:#08427b,stroke:#052e56,color:#ffffff
    3("<div style='font-weight: bold'>Email System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Email sending system<br />provider, e.g. Mailgun or any<br />system implementing SMTP<br />protocol</div>")
    style 3 fill:#999999,stroke:#6b6b6b,color:#ffffff
    4("<div style='font-weight: bold'>Document Registry System (DRS)</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>External system to keep<br />documents</div>")
    style 4 fill:#999999,stroke:#6b6b6b,color:#ffffff

    subgraph 5 ["MyDocs"]
      style 5 fill:#ffffff,stroke:#0b4884,color:#0b4884

      15("<div style='font-weight: bold'>Singe Page Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: Javascript React / Apollo GraphQL]</div><div style='font-size: 80%; margin-top:10px'>Frontend application that<br />provides functionalities for<br />Editors and Reviews</div>")
      style 15 fill:#438dd5,stroke:#2e6295,color:#ffffff
      16[("<div style='font-weight: bold'>Relational Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: PostgreSQL]</div><div style='font-size: 80%; margin-top:10px'>Relational Database<br />Management System for storing<br />documents</div>")]
      style 16 fill:#438dd5,stroke:#2e6295,color:#ffffff
      17[("<div style='font-weight: bold'>Searcher Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: ElasticSearch]</div><div style='font-size: 80%; margin-top:10px'>Elastic Search Database<br />System</div>")]
      style 17 fill:#438dd5,stroke:#2e6295,color:#ffffff
      6("<div style='font-weight: bold'>Backend Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: python / flask]</div><div style='font-size: 80%; margin-top:10px'>Serves HTTP requests and<br />implements system business<br />logic</div>")
      style 6 fill:#438dd5,stroke:#2e6295,color:#ffffff
    end

    1-. "<div>Uses</div><div style='font-size: 70%'></div>" .->15
    2-. "<div>Uses</div><div style='font-size: 70%'></div>" .->15
    15-. "<div>Make API calls</div><div style='font-size: 70%'>[HTTPS/JSON]</div>" .->6
    6-. "<div>Read and write data</div><div style='font-size: 70%'>[psycopg2]</div>" .->16
    6-. "<div>Make API calls to send emails</div><div style='font-size: 70%'>[HTTPS/JSON]</div>" .->3
    6-. "<div>Make API calls to store<br />document in the registry</div><div style='font-size: 70%'>[HTTPS/JSON]</div>" .->4
    6-. "<div>Read and write data</div><div style='font-size: 70%'></div>" .->17
  end

(this will send your diagram content to https://mermaid.ink)

graph TB
  linkStyle default fill:#ffffff

  subgraph diagram ["MyDocs - System Context"]
    style diagram fill:#ffffff,stroke:#ffffff

    1["<div style='font-weight: bold'>Editor</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>A person that views, creates<br />and modify documents</div>"]
    style 1 fill:#08427b,stroke:#052e56,color:#ffffff
    2["<div style='font-weight: bold'>Reviewer</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>A person that reviews<br />documents</div>"]
    style 2 fill:#08427b,stroke:#052e56,color:#ffffff
    3("<div style='font-weight: bold'>Email System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Email sending system<br />provider, e.g. Mailgun or any<br />system implementing SMTP<br />protocol</div>")
    style 3 fill:#999999,stroke:#6b6b6b,color:#ffffff
    4("<div style='font-weight: bold'>Document Registry System (DRS)</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>External system to keep<br />documents</div>")
    style 4 fill:#999999,stroke:#6b6b6b,color:#ffffff
    5("<div style='font-weight: bold'>MyDocs</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>System for managing and<br />reviewing documents</div>")
    style 5 fill:#1168bd,stroke:#0b4884,color:#ffffff

    1-. "<div>Uses</div><div style='font-size: 70%'></div>" .->5
    2-. "<div>Uses</div><div style='font-size: 70%'></div>" .->5
    5-. "<div>Make API calls to send emails</div><div style='font-size: 70%'>[HTTPS/JSON]</div>" .->3
    5-. "<div>Make API calls to store<br />document in the registry</div><div style='font-size: 70%'>[HTTPS/JSON]</div>" .->4
  end

(this will send your diagram content to https://mermaid.ink)

graph TB
  linkStyle default fill:#ffffff

  subgraph diagram ["System Landscape"]
    style diagram fill:#ffffff,stroke:#ffffff

    1["<div style='font-weight: bold'>Editor</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>A person that views, creates<br />and modify documents</div>"]
    style 1 fill:#08427b,stroke:#052e56,color:#ffffff
    2["<div style='font-weight: bold'>Reviewer</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>A person that reviews<br />documents</div>"]
    style 2 fill:#08427b,stroke:#052e56,color:#ffffff
    3("<div style='font-weight: bold'>Email System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Email sending system<br />provider, e.g. Mailgun or any<br />system implementing SMTP<br />protocol</div>")
    style 3 fill:#999999,stroke:#6b6b6b,color:#ffffff
    4("<div style='font-weight: bold'>Document Registry System (DRS)</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>External system to keep<br />documents</div>")
    style 4 fill:#999999,stroke:#6b6b6b,color:#ffffff
    5("<div style='font-weight: bold'>MyDocs</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>System for managing and<br />reviewing documents</div>")
    style 5 fill:#1168bd,stroke:#0b4884,color:#ffffff

    1-. "<div>Uses</div><div style='font-size: 70%'></div>" .->5
    2-. "<div>Uses</div><div style='font-size: 70%'></div>" .->5
    5-. "<div>Make API calls to send emails</div><div style='font-size: 70%'>[HTTPS/JSON]</div>" .->3
    5-. "<div>Make API calls to store<br />document in the registry</div><div style='font-size: 70%'>[HTTPS/JSON]</div>" .->4
  end

(this will send your diagram content to https://mermaid.ink)

DOT definitions are available via the Structurizr CLI export command, using the -format dot parameter.

digraph {
  compound=true
  graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0]
  node [fontname="Arial", shape=box, margin="0.4,0.3"]
  edge [fontname="Arial"]
  label=<<br /><font point-size="34">MyDocs - Backend Application - Components</font>>

  3 [id=3,shape=rect, label=<<font point-size="40">Email System</font><br /><font point-size="25">[Software System]</font><br /><br /><font point-size="30">Email sending system<br />provider, e.g. Mailgun<br />or any system<br />implementing SMTP<br />protocol</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
  4 [id=4,shape=rect, label=<<font point-size="40">Document Registry<br />System (DRS)</font><br /><font point-size="25">[Software System]</font><br /><br /><font point-size="30">External system to keep<br />documents</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
  15 [id=15,shape=rect, label=<<font point-size="34">Singe Page<br />Application</font><br /><font point-size="19">[Container: Javascript React / Apollo GraphQL]</font><br /><br /><font point-size="24">Frontend application that<br />provides functionalities for<br />Editors and Reviews</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
  16 [id=16,shape=cylinder, label=<<font point-size="34">Relational Database</font><br /><font point-size="19">[Container: PostgreSQL]</font><br /><br /><font point-size="24">Relational Database Management<br />System for storing documents</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
  17 [id=17,shape=cylinder, label=<<font point-size="34">Searcher Database</font><br /><font point-size="19">[Container: ElasticSearch]</font><br /><br /><font point-size="24">Elastic Search Database System</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]

  subgraph cluster_6 {
    margin=25
    label=<<font point-size="24"><br />Backend Application</font><br /><font point-size="19">[Container: python / flask]</font>>
    labelloc=b
    color="#444444"
    fontcolor="#444444"
    fillcolor="#444444"

    10 [id=10,shape=rect, label=<<font point-size="34">Document Management<br />Service</font><br /><font point-size="19">[Component: python]</font><br /><br /><font point-size="24">Implements logic for viewing,<br />creating and editing documents<br />by editors</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"]
    11 [id=11,shape=rect, label=<<font point-size="34">Document Export<br />Component</font><br /><font point-size="19">[Component: python]</font><br /><br /><font point-size="24">Enables exporting documents to<br />doc/docx files and as a<br />json/xml file in a format<br />provided by 'Aktywne<br />Formularze'</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"]
    12 [id=12,shape=rect, label=<<font point-size="34">Document Review<br />Service</font><br /><font point-size="19">[Component: python]</font><br /><br /><font point-size="24">Implements logic for reviewing<br />documents by reviewers</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"]
    13 [id=13,shape=rect, label=<<font point-size="34">Notification Sender</font><br /><font point-size="19">[Component: python]</font><br /><br /><font point-size="24">Provides notification<br />templates, calls email system<br />API</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"]
    14 [id=14,shape=rect, label=<<font point-size="34">Search Engine</font><br /><font point-size="19">[Component]</font><br /><br /><font point-size="24">Component that provides<br />functionality of robust<br />searching for documents</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"]
    7 [id=7,shape=rect, label=<<font point-size="34">GraphQL API</font><br /><font point-size="19">[Component: python / flask graphene]</font><br /><br /><font point-size="24">Expose GraphQL API endpint<br />that accepts queries and<br />mutations</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"]
    8 [id=8,shape=rect, label=<<font point-size="34">User Sign In Service</font><br /><font point-size="19">[Component: python]</font><br /><br /><font point-size="24">Enables user log in<br />functionality using CSU</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"]
    9 [id=9,shape=rect, label=<<font point-size="34">User Sign Up Service</font><br /><font point-size="19">[Component: python]</font><br /><br /><font point-size="24">Enables user account<br />registration functionality<br />using CSU</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"]
  }

  15 -> 7 [id=22, label=<<font point-size="30">Make API calls</font><br /><font point-size="25">[HTTPS/JSON]</font>>, style="dashed", color="#08427b", fontcolor="#08427b"]
  7 -> 8 [id=24, label=<<font point-size="24">Use</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  7 -> 9 [id=25, label=<<font point-size="24">Use</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  7 -> 10 [id=26, label=<<font point-size="24">Use</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  7 -> 12 [id=27, label=<<font point-size="24">Use</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  9 -> 16 [id=28, label=<<font point-size="24">Read and write data</font><br /><font point-size="19">[psycopg2]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  9 -> 13 [id=30, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  13 -> 3 [id=31, label=<<font point-size="24">Make API calls to send<br />emails</font><br /><font point-size="19">[HTTPS/JSON]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  8 -> 16 [id=34, label=<<font point-size="24">Read and write data</font><br /><font point-size="19">[psycopg2]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  10 -> 16 [id=35, label=<<font point-size="24">Read and write data</font><br /><font point-size="19">[psycopg]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  10 -> 11 [id=36, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  10 -> 14 [id=37, label=<<font point-size="24">Send document</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  10 -> 14 [id=38, label=<<font point-size="24">Find document</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  11 -> 4 [id=39, label=<<font point-size="24">Make API calls to store<br />document in the registry</font><br /><font point-size="19">[HTTPS/JSON]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  12 -> 16 [id=42, label=<<font point-size="24">Read and write data</font><br /><font point-size="19">[psycopg]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  12 -> 14 [id=43, label=<<font point-size="24">Find document</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  14 -> 17 [id=44, label=<<font point-size="24">Read and write data</font>>, style="dashed", color="#707070", fontcolor="#707070"]
}

digraph {
  compound=true
  graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0]
  node [fontname="Arial", shape=box, margin="0.4,0.3"]
  edge [fontname="Arial"]
  label=<<br /><font point-size="34">MyDocs - Containers</font>>

  1 [id=1,shape=rect, label=<<font point-size="34">Editor</font><br /><font point-size="19">[Person]</font><br /><br /><font point-size="24">A person that views,<br />creates and modify<br />documents</font>>, style=filled, color="#052e56", fillcolor="#08427b", fontcolor="#ffffff"]
  2 [id=2,shape=rect, label=<<font point-size="34">Reviewer</font><br /><font point-size="19">[Person]</font><br /><br /><font point-size="24">A person that reviews<br />documents</font>>, style=filled, color="#052e56", fillcolor="#08427b", fontcolor="#ffffff"]
  3 [id=3,shape=rect, label=<<font point-size="40">Email System</font><br /><font point-size="25">[Software System]</font><br /><br /><font point-size="30">Email sending system<br />provider, e.g. Mailgun<br />or any system<br />implementing SMTP<br />protocol</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
  4 [id=4,shape=rect, label=<<font point-size="40">Document Registry<br />System (DRS)</font><br /><font point-size="25">[Software System]</font><br /><br /><font point-size="30">External system to keep<br />documents</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]

  subgraph cluster_5 {
    margin=25
    label=<<font point-size="24"><br />MyDocs</font><br /><font point-size="19">[Software System]</font>>
    labelloc=b
    color="#444444"
    fontcolor="#444444"
    fillcolor="#444444"

    15 [id=15,shape=rect, label=<<font point-size="34">Singe Page<br />Application</font><br /><font point-size="19">[Container: Javascript React / Apollo GraphQL]</font><br /><br /><font point-size="24">Frontend application that<br />provides functionalities for<br />Editors and Reviews</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
    16 [id=16,shape=cylinder, label=<<font point-size="34">Relational Database</font><br /><font point-size="19">[Container: PostgreSQL]</font><br /><br /><font point-size="24">Relational Database Management<br />System for storing documents</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
    17 [id=17,shape=cylinder, label=<<font point-size="34">Searcher Database</font><br /><font point-size="19">[Container: ElasticSearch]</font><br /><br /><font point-size="24">Elastic Search Database System</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
    6 [id=6,shape=rect, label=<<font point-size="34">Backend Application</font><br /><font point-size="19">[Container: python / flask]</font><br /><br /><font point-size="24">Serves HTTP requests and<br />implements system business<br />logic</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
  }

  1 -> 15 [id=18, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  2 -> 15 [id=20, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  15 -> 6 [id=23, label=<<font point-size="30">Make API calls</font><br /><font point-size="25">[HTTPS/JSON]</font>>, style="dashed", color="#08427b", fontcolor="#08427b"]
  6 -> 16 [id=29, label=<<font point-size="24">Read and write data</font><br /><font point-size="19">[psycopg2]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  6 -> 3 [id=32, label=<<font point-size="24">Make API calls to send<br />emails</font><br /><font point-size="19">[HTTPS/JSON]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  6 -> 4 [id=40, label=<<font point-size="24">Make API calls to store<br />document in the registry</font><br /><font point-size="19">[HTTPS/JSON]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  6 -> 17 [id=45, label=<<font point-size="24">Read and write data</font>>, style="dashed", color="#707070", fontcolor="#707070"]
}

digraph {
  compound=true
  graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0]
  node [fontname="Arial", shape=box, margin="0.4,0.3"]
  edge [fontname="Arial"]
  label=<<br /><font point-size="34">MyDocs - System Context</font>>

  1 [id=1,shape=rect, label=<<font point-size="34">Editor</font><br /><font point-size="19">[Person]</font><br /><br /><font point-size="24">A person that views,<br />creates and modify<br />documents</font>>, style=filled, color="#052e56", fillcolor="#08427b", fontcolor="#ffffff"]
  2 [id=2,shape=rect, label=<<font point-size="34">Reviewer</font><br /><font point-size="19">[Person]</font><br /><br /><font point-size="24">A person that reviews<br />documents</font>>, style=filled, color="#052e56", fillcolor="#08427b", fontcolor="#ffffff"]
  3 [id=3,shape=rect, label=<<font point-size="40">Email System</font><br /><font point-size="25">[Software System]</font><br /><br /><font point-size="30">Email sending system<br />provider, e.g. Mailgun<br />or any system<br />implementing SMTP<br />protocol</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
  4 [id=4,shape=rect, label=<<font point-size="40">Document Registry<br />System (DRS)</font><br /><font point-size="25">[Software System]</font><br /><br /><font point-size="30">External system to keep<br />documents</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
  5 [id=5,shape=rect, label=<<font point-size="40">MyDocs</font><br /><font point-size="25">[Software System]</font><br /><br /><font point-size="30">System for managing and<br />reviewing documents</font>>, style=filled, color="#0b4884", fillcolor="#1168bd", fontcolor="#ffffff"]

  1 -> 5 [id=19, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  2 -> 5 [id=21, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  5 -> 3 [id=33, label=<<font point-size="24">Make API calls to send<br />emails</font><br /><font point-size="19">[HTTPS/JSON]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  5 -> 4 [id=41, label=<<font point-size="24">Make API calls to store<br />document in the registry</font><br /><font point-size="19">[HTTPS/JSON]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
}

digraph {
  compound=true
  graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0]
  node [fontname="Arial", shape=box, margin="0.4,0.3"]
  edge [fontname="Arial"]
  label=<<br /><font point-size="34">System Landscape</font>>

  1 [id=1,shape=rect, label=<<font point-size="34">Editor</font><br /><font point-size="19">[Person]</font><br /><br /><font point-size="24">A person that views,<br />creates and modify<br />documents</font>>, style=filled, color="#052e56", fillcolor="#08427b", fontcolor="#ffffff"]
  2 [id=2,shape=rect, label=<<font point-size="34">Reviewer</font><br /><font point-size="19">[Person]</font><br /><br /><font point-size="24">A person that reviews<br />documents</font>>, style=filled, color="#052e56", fillcolor="#08427b", fontcolor="#ffffff"]
  3 [id=3,shape=rect, label=<<font point-size="40">Email System</font><br /><font point-size="25">[Software System]</font><br /><br /><font point-size="30">Email sending system<br />provider, e.g. Mailgun<br />or any system<br />implementing SMTP<br />protocol</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
  4 [id=4,shape=rect, label=<<font point-size="40">Document Registry<br />System (DRS)</font><br /><font point-size="25">[Software System]</font><br /><br /><font point-size="30">External system to keep<br />documents</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"]
  5 [id=5,shape=rect, label=<<font point-size="40">MyDocs</font><br /><font point-size="25">[Software System]</font><br /><br /><font point-size="30">System for managing and<br />reviewing documents</font>>, style=filled, color="#0b4884", fillcolor="#1168bd", fontcolor="#ffffff"]

  1 -> 5 [id=19, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  2 -> 5 [id=21, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  5 -> 3 [id=33, label=<<font point-size="24">Make API calls to send<br />emails</font><br /><font point-size="19">[HTTPS/JSON]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  5 -> 4 [id=41, label=<<font point-size="24">Make API calls to store<br />document in the registry</font><br /><font point-size="19">[HTTPS/JSON]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
}

Ilograph definitions are available via the Structurizr CLI export command, using the -format ilograph parameter. A single Ilograph export contains the model and all views.

resources:
  - id: "1"
    name: "Editor"
    subtitle: "[Person]"
    description: "A person that views, creates and modify documents"
    backgroundColor: "#08427b"
    color: "#ffffff"

  - id: "2"
    name: "Reviewer"
    subtitle: "[Person]"
    description: "A person that reviews documents"
    backgroundColor: "#08427b"
    color: "#ffffff"

  - id: "3"
    name: "Email System"
    subtitle: "[Software System]"
    description: "Email sending system provider, e.g. Mailgun or any system implementing SMTP protocol"
    backgroundColor: "#999999"
    color: "#ffffff"

  - id: "4"
    name: "Document Registry System (DRS)"
    subtitle: "[Software System]"
    description: "External system to keep documents"
    backgroundColor: "#999999"
    color: "#ffffff"

  - id: "5"
    name: "MyDocs"
    subtitle: "[Software System]"
    description: "System for managing and reviewing documents"
    backgroundColor: "#1168bd"
    color: "#ffffff"

    children:
      - id: "15"
        name: "Singe Page Application"
        subtitle: "[Container: Javascript React / Apollo GraphQL]"
        description: "Frontend application that provides functionalities for Editors and Reviews"
        backgroundColor: "#438dd5"
        color: "#ffffff"

      - id: "16"
        name: "Relational Database"
        subtitle: "[Container: PostgreSQL]"
        description: "Relational Database Management System for storing documents"
        backgroundColor: "#438dd5"
        color: "#ffffff"

      - id: "17"
        name: "Searcher Database"
        subtitle: "[Container: ElasticSearch]"
        description: "Elastic Search Database System"
        backgroundColor: "#438dd5"
        color: "#ffffff"

      - id: "6"
        name: "Backend Application"
        subtitle: "[Container: python / flask]"
        description: "Serves HTTP requests and implements system business logic"
        backgroundColor: "#438dd5"
        color: "#ffffff"

        children:
          - id: "10"
            name: "Document Management Service"
            subtitle: "[Component: python]"
            description: "Implements logic for viewing, creating and editing documents by editors"
            backgroundColor: "#85bbf0"
            color: "#000000"

          - id: "11"
            name: "Document Export Component"
            subtitle: "[Component: python]"
            description: "Enables exporting documents to doc/docx files and as a json/xml file in a format provided by 'Aktywne Formularze'"
            backgroundColor: "#85bbf0"
            color: "#000000"

          - id: "12"
            name: "Document Review Service"
            subtitle: "[Component: python]"
            description: "Implements logic for reviewing documents by reviewers"
            backgroundColor: "#85bbf0"
            color: "#000000"

          - id: "13"
            name: "Notification Sender"
            subtitle: "[Component: python]"
            description: "Provides notification templates, calls email system API"
            backgroundColor: "#85bbf0"
            color: "#000000"

          - id: "14"
            name: "Search Engine"
            subtitle: "[Component]"
            description: "Component that provides functionality of robust searching for documents"
            backgroundColor: "#85bbf0"
            color: "#000000"

          - id: "7"
            name: "GraphQL API"
            subtitle: "[Component: python / flask graphene]"
            description: "Expose GraphQL API endpint that accepts queries and mutations"
            backgroundColor: "#85bbf0"
            color: "#000000"

          - id: "8"
            name: "User Sign In Service"
            subtitle: "[Component: python]"
            description: "Enables user log in functionality using CSU"
            backgroundColor: "#85bbf0"
            color: "#000000"

          - id: "9"
            name: "User Sign Up Service"
            subtitle: "[Component: python]"
            description: "Enables user account registration functionality using CSU"
            backgroundColor: "#85bbf0"
            color: "#000000"

perspectives:
  - name: Static Structure
    relations:
      - from: "1"
        to: "5"
        label: "Uses"
        color: "#707070"

      - from: "2"
        to: "5"
        label: "Uses"
        color: "#707070"

      - from: "5"
        to: "3"
        label: "Make API calls to send emails"
        description: "HTTPS/JSON"
        color: "#707070"

      - from: "5"
        to: "4"
        label: "Make API calls to store document in the registry"
        description: "HTTPS/JSON"
        color: "#707070"

      - from: "1"
        to: "15"
        label: "Uses"
        color: "#707070"

      - from: "2"
        to: "15"
        label: "Uses"
        color: "#707070"

      - from: "15"
        to: "6"
        label: "Make API calls"
        description: "HTTPS/JSON"
        color: "#08427b"

      - from: "6"
        to: "16"
        label: "Read and write data"
        description: "psycopg2"
        color: "#707070"

      - from: "6"
        to: "3"
        label: "Make API calls to send emails"
        description: "HTTPS/JSON"
        color: "#707070"

      - from: "6"
        to: "4"
        label: "Make API calls to store document in the registry"
        description: "HTTPS/JSON"
        color: "#707070"

      - from: "6"
        to: "17"
        label: "Read and write data"
        color: "#707070"

      - from: "15"
        to: "7"
        label: "Make API calls"
        description: "HTTPS/JSON"
        color: "#08427b"

      - from: "10"
        to: "16"
        label: "Read and write data"
        description: "psycopg"
        color: "#707070"

      - from: "10"
        to: "11"
        label: "Uses"
        color: "#707070"

      - from: "10"
        to: "14"
        label: "Send document"
        color: "#707070"

      - from: "10"
        to: "14"
        label: "Find document"
        color: "#707070"

      - from: "11"
        to: "4"
        label: "Make API calls to store document in the registry"
        description: "HTTPS/JSON"
        color: "#707070"

      - from: "12"
        to: "16"
        label: "Read and write data"
        description: "psycopg"
        color: "#707070"

      - from: "12"
        to: "14"
        label: "Find document"
        color: "#707070"

      - from: "13"
        to: "3"
        label: "Make API calls to send emails"
        description: "HTTPS/JSON"
        color: "#707070"

      - from: "14"
        to: "17"
        label: "Read and write data"
        color: "#707070"

      - from: "7"
        to: "8"
        label: "Use"
        color: "#707070"

      - from: "7"
        to: "9"
        label: "Use"
        color: "#707070"

      - from: "7"
        to: "10"
        label: "Use"
        color: "#707070"

      - from: "7"
        to: "12"
        label: "Use"
        color: "#707070"

      - from: "8"
        to: "16"
        label: "Read and write data"
        description: "psycopg2"
        color: "#707070"

      - from: "9"
        to: "16"
        label: "Read and write data"
        description: "psycopg2"
        color: "#707070"

      - from: "9"
        to: "13"
        label: "Uses"
        color: "#707070"