diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 00000000..0f947ebe --- /dev/null +++ b/.gitattributes @@ -0,0 +1,9 @@ +# define GitHub repository languages +*.puml linguist-language=PlantUML +*.iuml linguist-language=PlantUML +*.plantuml linguist-language=PlantUML + +*.puml linguist-detectable=true +*.iuml linguist-detectable=true +*.plantuml linguist-detectable=true +*.md linguist-detectable=false diff --git a/.github/stale.yml b/.github/stale.yml new file mode 100644 index 00000000..1bb37ed9 --- /dev/null +++ b/.github/stale.yml @@ -0,0 +1,18 @@ +# Number of days of inactivity before an issue becomes stale +daysUntilStale: 60 +# Number of days of inactivity before a stale issue is closed +daysUntilClose: 7 +# Issues with these labels will never be considered stale +exemptLabels: + - not-stale + - pinned + - security +# Label to use when marking an issue as stale +staleLabel: stale +# Comment to post when marking an issue as stale. Set to `false` to disable +markComment: > + This issue has been automatically marked as stale because it has not had + activity in the past 60 days. It will be closed in seven days if no + further activity occurs. Thank you for your contributions. +# Comment to post when closing a stale issue. Set to `false` to disable +closeComment: false diff --git a/.github/workflows/run-percy-tests.yml b/.github/workflows/run-percy-tests.yml new file mode 100644 index 00000000..c89b75af --- /dev/null +++ b/.github/workflows/run-percy-tests.yml @@ -0,0 +1,26 @@ +name: Percy Tests +on: + push: + paths: + - '*.puml' + - 'percy/**' + - '.github/workflows/run-percy-tests.yml' + pull_request: + branches: + - '**' +jobs: + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@master + - name: Setup Graphviz + uses: ts-graphviz/setup-graphviz@v2 + - name: Process diagrams + uses: Timmy/plantuml-action@v1 + with: + args: '-v percy -o _parsed -DRELATIVE_INCLUDE="./.."' + - name: Upload + run: npx @percy/cli upload percy/_parsed + env: + PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }} diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..c48545c6 --- /dev/null +++ b/.gitignore @@ -0,0 +1,7 @@ +################################################################################ +# This .gitignore file was automatically created by Microsoft(R) Visual Studio. +################################################################################ + +/.idea +/.vs +/.vscode diff --git a/.scripts/HowToCreateANewRelease.md b/.scripts/HowToCreateANewRelease.md new file mode 100644 index 00000000..1fb835e4 --- /dev/null +++ b/.scripts/HowToCreateANewRelease.md @@ -0,0 +1,200 @@ +# How to create a new release (WIP) + +The idea is to +- create a new release in the "release/$release_version" branch (tagged with `$release_version` and `latest`) +- and a MR that the master branch can be updated with next beta version +- create in PlantUML/PlantUML-stdlib a MR with the released version + +## 0. Preparation + +The process requires following 3 versions: + +- **$release_version**: version which should be created (e.g. `v2.6.0`) +- **$next_version**: version of the next beta which should be stared + as soon the release is created (e.g. `v2.7.0`). + The master branch will be updated with a `beta1` of this version and C4Version() returns `2.7.0beta1`. + If it is unknown/undefined it is calculated via the release_version. It is the next patch (release patch!=0) or subversion (release patch==0). +- **$deployed_version**: this is the next "plantuml(/plantuml-stdlib)" version + which should be updated with this release (e.g. "V1.2023.2") + If it is unknown/undefined it is calculated via the running PlantUML web service + +### 0.0 Create a new issue with the title `Release $release_version` \(e.g. `Release v2.6.0`) + +and a body like in https://github.com/plantuml-stdlib/C4-PlantUML/issues/248 + +### 0.1 Check that all open issues of the related `$release_version milestone` are fixed + +### 0.2 Check that all other open changes are done + +Update copyright year, contrib files, URLS, .... if required + +### 0.* ... + +### 0.x Check which is the next released version of the PlantUML(/PlantUML-stdlib) + +it is used as $deployed_version and written in the released README.md +If it is unknown it can be calculated via `CalculateDeployedVersion` (details see below) + +## 1. create new release in branch `release/$release_version` (based on master) + +Atm following steps are semi-automated and can be executed in a bash shell: + +### 1.0. define the relevant versions as environment variabels and create the `release/$release_version` branch + +\(in following sample the `release_version` = `v2.6.0`; `next_version` = `v2.7.0` and `deployed_version` = `V1.2022.15`) + +```bash +export release_version=v2.6.0 +export next_version=v2.7.0 +export deployed_version=V1.2022.15 +``` + +If the deployed_version is unknown it can be calculate via following (don't forget to set the environment variable after the call) + +```bash +python ./.scripts/transform_files.py CalculateDeployedVersion +``` + +As soon all versions are defined the `release/$release_version` branch \(e.g. `release/v2.6.0`) can be created based on master branch + +```bash +git pull +git checkout master +git branch release/$release_version +git checkout release/$release_version +``` + +### 1.1. Update `C4Version()` in C4.puml with the new release (e.g. `2.6.0`; without `v`) + +```bash +python ./.scripts/transform_files.py UpdateC4WithReleaseVersion +``` + +### 1.2. Update all include paths and create a release version of the README.md + +Following script calls + +- Update all include paths with the release version tag based branch +- Update includes of all image urls with the release version tag based in *.md + (after that images displays the correct C4Version() number and uses only the release-tag path in all includes) +- Update README.md with the new release header and title (based on the `readme_release_header.txt` template) + +```bash +python ./.scripts/transform_files.py UpdateAllIncludes +python ./.scripts/transform_files.py UpdateAllImages +python ./.scripts/transform_files.py ReplaceREADMEHeader +``` + +These changes can/should be checked and if everything is ok it can be committed. + +Following commit all changes and tag it locally with `$release_version` (e.g. `v2.5.0`) + +```bash +git checkout release/$release_version +git add -u *.md +git add -u *.puml +git add -u **/*.md +git add -u **/*.puml +git commit -m "Create release (branch) $release_version" +git tag "$release_version" +``` + +And if everything is ok it can be pushed too + +```bash +git checkout release/$release_version +git push -u origin release/$release_version +``` + +## 2. Create `Release $release_version` \(e.g. `Release v2.6.0`) itself + +This is done manually \(incl. an additional check...) + +**Important:** As soon the release is finished check that +- 'latest' tag is re-assigned to the new release branch +- and '$release_version' tag is assigned to the new release branch + +As soon the version is released the release branch has to be write protected + +## 3. Update master branch with $next_version beta1 version + +### 3.1. create a `start-$next_version-beta1` branch \(e.g. `start-v2.7.0-beta1`) based on master branch + +```bash +git pull +git checkout master +git branch start-$next_version-beta1 +git checkout start-$next_version-beta1 +``` + +Following script update `C4Version()` in C4.puml with the next beta release (e.g. `2.7.0beta1`; without `v`) + +```bash +python ./.scripts/transform_files.py UpdateC4WithNextBeta +``` + +Following commit all changes + +```bash +git checkout start-$next_version-beta1 +git add -u C4.puml +git commit -m "Update version with first beta of $next_version ($release_version was created based on previous commit)" +``` + +And if everything is ok it can be pushed too + +```bash +git checkout start-$next_version-beta1 +git push -u origin start-$next_version-beta1 +``` + +### 3.2. Create a MR into master + +This is done manually \(incl. an additional check...) + +## 4. Create in PlantUML/PlantUML-stdlib a MR based on `release/$release_version` branch + +> !!! CHECK that the correct release branch is activated !!! + +> It is assumed that following calls are started in "C4-PlantUML repository" folder +(and not in the "plantuml-stdlib repository" folder) + +The process requires following information too: + +- **$deploy_repository_folder**: folder with the local `PlantUML/PlantUML-stdlib` git repositiory. + E.g. if it is parallel to the C4-PlantUML repository the it could be `../plantuml-stdlib`. + +### 4.1. create in a PlantUML/PlantUML-stdlib fork a `C4$release_version` branch (e.g. `C4v2.6.0`) + +```bash +export release_version=v2.6.0 +export next_version=v2.7.0 +export deployed_version=V1.2022.15 + +export deploy_repository_folder=../plantuml-stdlib + +git pull +git checkout release/$release_version + +git -C $deploy_repository_folder pull +git -C $deploy_repository_folder checkout master +git -C $deploy_repository_folder branch C4$release_version +git -C $deploy_repository_folder checkout C4$release_version +``` + +### 4.2. prepare the C4_*.puml and INFO file + +```bash +python ./.scripts/transform_files.py CreatePlantUMLStdlibC4Folder $deploy_repository_folder/C4 +``` + +### 4.3. Commit changes with comment "Update C4-PlantUML to $release_version" + +```bash +git -C $deploy_repository_folder add -u C4/** +git -C $deploy_repository_folder commit -m "Update C4-PlantUML to $release_version" +``` + +### 4.4. create a MR "Update C4-PlantUML to $next_version" + +This is done manually \(incl. an additional check...) diff --git a/.scripts/plantuml_stdlib_info.txt b/.scripts/plantuml_stdlib_info.txt new file mode 100644 index 00000000..dd71640a --- /dev/null +++ b/.scripts/plantuml_stdlib_info.txt @@ -0,0 +1,2 @@ +VERSION={release version without v} +SOURCE=https://github.com/plantuml-stdlib/C4-PlantUML diff --git a/.scripts/readme_release_header.txt b/.scripts/readme_release_header.txt new file mode 100644 index 00000000..2b74c2b9 --- /dev/null +++ b/.scripts/readme_release_header.txt @@ -0,0 +1,18 @@ +[![release][Release Badge]][Release Page] +[![license MIT][License Badge]][License Page] +       +[![integrated in PlantUML][Integrated Badge]][Integrated Page] +       +[![commits since][Commits Since Badge]][Commit Page] + +[Release Badge]: https://img.shields.io/badge/release-{release version}-blue +[Release Page]: https://github.com/plantuml-stdlib/C4-PlantUML/releases/{release version} +[License Badge]: https://img.shields.io/github/license/plantuml-stdlib/C4-PlantUML +[License Page]: https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/LICENSE +[Integrated Badge]: https://img.shields.io/badge/C4--PlantUML%20%20{release version}%20integrated%20in%20PlantUML%20Standard%20Library-{deploy into version}-orange +[Integrated Page]: https://plantuml.com/stdlib#062f75176513a666 + +[Commits Since Badge]: https://img.shields.io/github/commits-since/plantuml-stdlib/C4-PlantUML/latest?label=new%20unreleased%20changes%20in%20master%20branch +[Commit Page]: https://github.com/plantuml-stdlib/C4-PlantUML/commits + +# C4-PlantUML ({release version}) \ No newline at end of file diff --git a/.scripts/transform_files.py b/.scripts/transform_files.py new file mode 100644 index 00000000..569fb327 --- /dev/null +++ b/.scripts/transform_files.py @@ -0,0 +1,460 @@ +#!/usr/bin/python + +# If a new version is released, version number and other topics of the source +# has to be updated. +# This script simplifies the update from master to a specific release (branch/tag) + +# IMPORTANT: +# +# - It is assumed that the script is stared in repository root with relative path +# python ./.scripts/transform_files +# +# - It is assumed that +# - "release_version" (e.g. "v2.6.0"), +# - "next_version" (e.g. "v2.7.0") +# If it is undefined it will be calculated via the release_version. +# It is the next patch (release patch!=0) or subversion (release patch==0). +# - and "deployed_version" This is the next "plantuml(/plantuml-stdlib)" version +# which should be updated with this release (e.g. "V1.2023.2") +# If it is undefined it is calculated via the running PlantUML web service +# are defined as environment variable (or they will be calculated if possible) + +# Supported transformations/functions are +# +# - CalculateDeployedVersion +# +# - UpdateC4WithReleaseVersion +# - UpdateAllIncludes +# - UpdateAllImages +# - ReplaceREADMEHeader +# - UpdateC4WithNextBeta +# +# - CreatePlantUMLStdlibC4Folder [] + +import os +import re +import sys +import glob + +import zlib +import base64 +import string + +import requests + +# >>>>> plant uml decoder from ryardley/plant_uml_decoder.py +# >>>>> https://gist.github.com/ryardley/64816f5097003a35f9726aab676920d0 + +plantuml_alphabet = ( + string.digits + string.ascii_uppercase + string.ascii_lowercase + "-_" +) +base64_alphabet = string.ascii_uppercase + string.ascii_lowercase + string.digits + "+/" +b64_to_plantuml = bytes.maketrans( + base64_alphabet.encode("utf-8"), plantuml_alphabet.encode("utf-8") +) +plantuml_to_b64 = bytes.maketrans( + plantuml_alphabet.encode("utf-8"), base64_alphabet.encode("utf-8") +) + + +def plantuml_encode(plantuml_text): + """zlib compress the plantuml text and encode it for the plantuml server""" + zlibbed_str = zlib.compress(plantuml_text.encode("utf-8")) + compressed_string = zlibbed_str[2:-4] + return ( + base64.b64encode(compressed_string).translate(b64_to_plantuml).decode("utf-8") + ) + + +def plantuml_decode(plantuml_url): + """decode plantuml encoded url back to plantuml text""" + data = base64.b64decode(plantuml_url.translate(plantuml_to_b64).encode("utf-8")) + dec = zlib.decompressobj() # without check the crc. + header = b"x\x9c" + return dec.decompress(header + data).decode("utf-8") + + +# <<<<< plant uml decoder from ryardley/plant_uml_decoder.py + + +def read_environment_variable(env_var, is_required=True): + if env_var not in os.environ: + if is_required: + sys.stderr.write( + f"the required environment variable {env_var} is not defined\n" + ) + sys.exit(3) + else: + return "" + return os.environ[env_var] + + +# It is assumed that "release_version", "next_version" and "deployed_version" +# are defined as environment variable. +# If next_version is not defined then it is calculated based on release_version +# If deployed_version is not defined then it is calculated based on the running PlantUML web server +def read_environment_variables(): + global release_version + release_version = read_environment_variable("release_version") + if release_version[0] != "v": + sys.stderr.write( + f"release version {release_version} has to start with 'v' (and use a format like vX.Y.Z)" + ) + sys.exit(2) + release_match = re.search( + r"^v(?P[0-9]+)\.(?P[0-9]+)\.(?P[0-9]+)$", release_version + ) + if not release_match: + sys.stderr.write( + f"release version {release_version} has to use a format like v[0-9]+.[0-9]+.[0-9]+, e.g. v2.6.0)" + ) + sys.exit(2) + + global next_version + next_version = read_environment_variable("next_version", False) + if next_version == "": + v1 = int(release_match["v1"]) + v2 = int(release_match["v2"]) + v3 = int(release_match["v3"]) + next_version = calculate_next_version(release_version, v1, v2, v3) + + global deployed_version + deployed_version = read_environment_variable("deployed_version", False) + if deployed_version == "": + deployed_version = read_next_plantuml_version() + + +def replace_first_regex_in_file(file_path, search, replace): + r = re.compile(search) + with open(file_path, "r") as file: + filedata = file.read() + filedata = r.sub(replace, filedata, 1) + with open(file_path, "w") as file: + file.write(filedata) + + +def replace_in_file(file_path, orig, replace): + with open(file_path, "r") as file: + filedata = file.read() + filedata = filedata.replace(orig, replace) + with open(file_path, "w") as file: + file.write(filedata) + + +def replace_first_regex_copy_file( + source_path, target_path, compiled_search_regex, replace +): + with open(source_path, "r") as file: + filedata = file.read() + filedata = compiled_search_regex.sub(replace, filedata, 1) + with open(target_path, "w") as file: + file.write(filedata) + + +# Calculates the next version (inclusive starting v) based on the give version values. +# If v3 == 0 then v2 is increased otherwise v3 +def calculate_next_version(release, v1, v2, v3): + print(f"calculates the next_version based on given release_version {release} ...") + if v3 == 0: + v2 = v2 + 1 + else: + v3 = v3 + 1 + version = f"v{v1}.{v2}.{v3}" + print( + f"The calculated next_version = {version}. It can be used as next_version environment variable with following statement" + ) + print(f" export next_version={version}") + return version + + +# Calculates the next released PlantUML version that it can be used as deployed_version environment variable +# based on http://www.plantuml.com/plantuml/svg/SoWkIImgAStDuSf8JKn9BL9GBKijAixCpzFGv798pKi1oW00 response +# This function returns "V" + the parsed version number (e.g. "V1.2022.16") +def read_next_plantuml_version(): + # the idea is that the PlantUML version is extracted out of the svg result of "header %version()". + # %version() stores beta of next version. + # the returned SVG response stores the version inclusive beta in a text element; e.fg. "...1.2022.16beta2..." + # and this function returns "V" + the parsed version number (e.g. "V1.2022.16") + print( + "calculates the next deployed_version based on the running PlantUML web server response ..." + ) + resp = requests.get( + "http://www.plantuml.com/plantuml/svg/SoWkIImgAStDuSf8JKn9BL9GBKijAixCpzFGv798pKi1oW00" + ) + if resp.status_code != 200: + sys.stderr.write( + "cannot read the svg response (with the next release version) from the PlantUML web server; please check http://www.plantuml.com/plantuml/svg/SoWkIImgAStDuSf8JKn9BL9GBKijAixCpzFGv798pKi1oW00" + ) + sys.exit(4) + + # As an alternative it could be calculated via https://www.planttext.com/api/plantuml/txt/SoWkIImgIIvApSz9vL8jIoqgpipFqz3aSaZDIu680W00 + # It would return "1.2022.15beta6\n". (details see https://forum.plantuml.net/17179/ascii-art-title-produces-java-lang-illegalstateexception?show=17184#a17184) + + svgbody = resp.content + svg = svgbody.decode("utf-8") + # this regex ignore beta2 of the text section too: "]+>(?P[0-9\.]+)" + r = re.compile(r"]+>(?P[0-9\.]+)") + v = r.search(svg)["version"] + version = "V" + v + + print( + f"The next PlantUML version = {version}. It can be used as deployed_version environment variable with following statement" + ) + print(f" export deployed_version={version}") + + return version + + +def update_c4_release_version(): + # $c4Version is defined without starting 'v' + print( + f"updating C4Version() definition in C4.puml with new release_version {release_version[1:]} ..." + ) + replace_first_regex_in_file( + "C4.puml", r'!\$c4Version = ".+"', f'!$c4Version = "{release_version[1:]}"' + ) + print("C4Version() updated") + + +def update_c4_next_beta_version(): + # $c4Version is defined without starting 'v' + print( + f"updating C4Version() definition in C4.puml with new release_version {next_version[1:]} ..." + ) + replace_first_regex_in_file( + "C4.puml", r'!\$c4Version = ".+"', f'!$c4Version = "{next_version[1:]}beta1"' + ) + print("C4Version() updated") + + +def update_all_includes(): + # reference tag version is with starting 'v' + print(f"updating include/theme paths with new tag version {release_version} ...") + files = glob.glob("./**/*", recursive=True) + for file in files: + if file.endswith(".puml") or file.endswith(".md"): + print(f" {file}") + replace_in_file( + file, + "!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/", + f"!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/{release_version}/", + ) + replace_in_file( + file, + "from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/", + f"from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/{release_version}/", + ) + replace_in_file( + file, + "](https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes/", + f"](https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/{release_version}/themes/", + ) + print(f"include/theme paths updated") + + +def process_url_match(m: re.Match[str]): + base = m.group("base") + out_format = m.group("format") + base64 = m.group("base64") + text = plantuml_decode(base64) + + new_path = f"!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/{release_version}/" + replaced = text.replace( + "!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/", + new_path, + ) + replaced = replaced.replace( + "from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/", + f"from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/{release_version}/", + ) + replaced = replaced.replace( + "](https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes/", + f"](https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/{release_version}/themes/", + ) + + if new_path not in replaced: + global found_not_replaced_include + found_not_replaced_include = True + print( + f"!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\ninclude could not be replaced in base64\n{base64}\nthe extracted source is\n{text}\n------------------------------------" + ) + updated_base64 = base64 + else: + updated_base64 = plantuml_encode(replaced) + + return f"{base}/{out_format}/{updated_base64}" + + +def replace_images_in_file(file_path): + # extract all base64 entries + r = re.compile( + "(?Phttps://www\\.plantuml\\.com/plantuml)/(?P(png|uml|svg))/(?P([^ )]*))" + ) + with open(file_path, "r") as file: + filedata = file.read() + filedata = r.sub(process_url_match, filedata) + with open(file_path, "w") as file: + file.write(filedata) + + +def update_all_images(): + # reference tag version is with starting 'v' + print( + f"updating include paths with new tag version {release_version} in images of all *.md files ..." + ) + + global found_not_replaced_include + found_not_replaced_include = False + + files = glob.glob("./**/*", recursive=True) + for file in files: + if file.endswith(".md"): + print(f" {file}") + replace_images_in_file(file) + + if found_not_replaced_include: + sys.stderr.write( + "!!!!!! not all images urls could be updated in the *.md files (details see log)\n" + ) + sys.exit(3) + + print("include paths in images updated") + + +def replace_readme_header(): + print(f"updating README.md with new version {release_version} and badges ...") + # remove whole part before "# C4-PlantUML" in README.md + r = re.compile(r"[^\#]+# C4-PlantUML", re.M) + with open("README.md", "r") as file: + filedata = file.read() + filedata = r.sub("# C4-PlantUML", filedata) + + with open("./.scripts/readme_release_header.txt", "r") as header_file: + header = header_file.read() + header = header.replace("{release version}", release_version).replace( + "{deploy into version}", deployed_version + ) + + filedata = filedata.replace("# C4-PlantUML", header) + + with open("README.md", "w") as file: + file.write(filedata) + + print("release README.md updated with new version and badges") + + +def create_plantuml_stdlib_c4_folder(target_path): + print( + f"prepare C4 folder of plantuml-stdlib repository in folder {target_path} ..." + ) + # remove whole begin inclusive "!endif" in the specific C4_*.puml files + inclusive_endif = re.compile(r"'[^']+!endif", re.M) + + os.makedirs(target_path, exist_ok=True) + replace_first_regex_copy_file( + "C4.puml", + os.path.join(target_path, "C4.puml"), + re.compile("DOES NOT EXIST"), + "DOES NOT EXIST", + ) + replace_first_regex_copy_file( + "C4_Component.puml", + os.path.join(target_path, "C4_Component.puml"), + inclusive_endif, + "!include ", + ) + replace_first_regex_copy_file( + "C4_Container.puml", + os.path.join(target_path, "C4_Container.puml"), + inclusive_endif, + "!include ", + ) + replace_first_regex_copy_file( + "C4_Context.puml", + os.path.join(target_path, "C4_Context.puml"), + inclusive_endif, + "!include ", + ) + replace_first_regex_copy_file( + "C4_Deployment.puml", + os.path.join(target_path, "C4_Deployment.puml"), + inclusive_endif, + "!include ", + ) + replace_first_regex_copy_file( + "C4_Dynamic.puml", + os.path.join(target_path, "C4_Dynamic.puml"), + inclusive_endif, + "!include ", + ) + replace_first_regex_copy_file( + "C4_Sequence.puml", + os.path.join(target_path, "C4_Sequence.puml"), + inclusive_endif, + "!include ", + ) + + replace_first_regex_copy_file( + "./.scripts/plantuml_stdlib_info.txt", + os.path.join(target_path, "INFO"), + re.compile(r"\{release version without v\}"), + release_version[1:], + ) + + themes_path = target_path+"/themes" + os.makedirs(themes_path, exist_ok=True) + paths = glob.glob("./themes/puml-theme-C4_*.puml") + for path in paths: + file = os.path.basename(path) + if file == "puml-theme-C4_FirstTest.puml": + continue + # print(f" {path}") + replace_first_regex_copy_file( + path, + os.path.join(themes_path, file), + re.compile("DOES NOT EXIST"), + "DOES NOT EXIST", + ) + + print(f"all C4 related plantuml-stdlib files copied into {target_path}.") + + +if not ( + len(sys.argv) == 2 + or (len(sys.argv) == 3 and sys.argv[1] == "CreatePlantUMLStdlibC4Folder") +): + u = "Usage: python ./.scripts/transform_files.py \n" + sys.stderr.write("Usage: python ./.scripts/transform_files.py \n") + sys.exit(1) + +if sys.argv[0] != "./.scripts/transform_files.py": + u = "script has to be started in repository root with relative path: ./.scripts/transform_files \n" + sys.stderr.write(u) + sys.exit(1) + +if sys.argv[1] == "UpdateC4WithReleaseVersion": + read_environment_variables() + update_c4_release_version() +elif sys.argv[1] == "UpdateAllIncludes": + read_environment_variables() + update_all_includes() +elif sys.argv[1] == "UpdateAllImages": + read_environment_variables() + update_all_images() +elif sys.argv[1] == "ReplaceREADMEHeader": + read_environment_variables() + replace_readme_header() +elif sys.argv[1] == "UpdateC4WithNextBeta": + read_environment_variables() + update_c4_next_beta_version() +elif sys.argv[1] == "CalculateDeployedVersion": + calculated_deployed_version = read_next_plantuml_version() +elif sys.argv[1] == "CreatePlantUMLStdlibC4Folder": + read_environment_variables() + if len(sys.argv) == 3: + create_plantuml_stdlib_c4_folder(sys.argv[2]) + else: + create_plantuml_stdlib_c4_folder(".plantuml_stdlib_c4") +else: + sys.stderr.write(f"{sys.argv[1]} is an unsupported transformation\n") + sys.exit(1) diff --git a/.vscode/C4.code-snippets b/.vscode/C4.code-snippets index 275dac11..7ca1b571 100644 --- a/.vscode/C4.code-snippets +++ b/.vscode/C4.code-snippets @@ -1,66 +1,198 @@ { + "C4_Include_Context": { + "scope": "plantuml", + "prefix": "Include C4 Context Diagram", + "body": [ + "!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml" + ], + "description": "Include C4 Context Diagram" + }, + "C4_Include_Container": { + "scope": "plantuml", + "prefix": "Include C4 Container Diagram", + "body": [ + "!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml" + ], + "description": "Include C4 Container Diagram" + }, + "C4_Include_Component": { + "scope": "plantuml", + "prefix": "Include C4 Component Diagram", + "body": [ + "!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml" + ], + "description": "Include C4 Component Diagram" + }, + "C4_Include_Deployment": { + "scope": "plantuml", + "prefix": "Include C4 Deployment Diagram", + "body": [ + "!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml" + ], + "description": "Include C4 Deployment Diagram" + }, + "C4_Include_Dynamic": { + "scope": "plantuml", + "prefix": "Include C4 Dynamic Diagram", + "body": [ + "!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml" + ], + "description": "Include C4 Dynamic Diagram" + }, "C4_Person": { - "scope": "diagram", + "scope": "plantuml", "prefix": "Person", "body": [ - "Person(${1:alias}, \"${2:label}\")", - "$0" + "Person(${1:alias}, \"${2:label}\")" ], "description": "Add Person to C4 diagram" }, "C4_Person_Descr": { - "scope": "diagram", + "scope": "plantuml", "prefix": "Person with Description", "body": [ - "Person(${1:alias}, \"${2:label}\", \"${3:description}\")", - "$0" + "Person(${1:alias}, \"${2:label}\", \"${3:description}\")" ], "description": "Add Person with Description to C4 diagram" }, "C4_Person_Ext": { - "scope": "diagram", + "scope": "plantuml", "prefix": [ "External Person", "Person (External)" ], "body": [ - "Person_Ext(${1:alias}, \"${2:label}\")", - "$0" + "Person_Ext(${1:alias}, \"${2:label}\")" ], "description": "Add External Person to C4 diagram" }, "C4_Person_Ext_Descr": { - "scope": "diagram", + "scope": "plantuml", "prefix": [ "External Person with Description", "Person (External) with Description" ], "body": [ - "Person_Ext(${1:alias}, \"${2:label}\", \"${3:description}\")", - "$0" + "Person_Ext(${1:alias}, \"${2:label}\", \"${3:description}\")" ], "description": "Add External Person with Description to C4 diagram" }, "C4_Container": { - "scope": "diagram", + "scope": "plantuml", "prefix": "Container", "body": [ - "Container(${1:alias}, \"${2:label}\", \"${3:technology}\")", - "$0" + "Container(${1:alias}, \"${2:label}\", \"${3:technology}\")" ], "description": "Add Container to C4 diagram" }, "C4_Container_Descr": { - "scope": "diagram", + "scope": "plantuml", "prefix": "Container with Description", "body": [ - "Container(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")", - "$0" + "Container(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")" ], "description": "Add Container with Description to C4 diagram" }, + "C4_Container_Ext": { + "scope": "plantuml", + "prefix": [ + "External Container", + "Container (External)" + ], + "body": [ + "Container_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\")" + ], + "description": "Add External Container to C4 diagram" + }, + "C4_Container_Ext_Descr": { + "scope": "plantuml", + "prefix": [ + "External Container with Description", + "Container (External) with Description" + ], + "body": [ + "Container_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")" + ], + "description": "Add External Container with Description to C4 diagram" + }, + "C4_ContainerDb": { + "scope": "plantuml", + "prefix": "Database Container", + "body": [ + "ContainerDb(${1:alias}, \"${2:label}\", \"${3:technology}\")" + ], + "description": "Add Database Container to C4 diagram" + }, + "C4_ContainerDb_Descr": { + "scope": "plantuml", + "prefix": "Database Container with Description", + "body": [ + "ContainerDb(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")" + ], + "description": "Add Database Container with Description to C4 diagram" + }, + "C4_ContainerDb_Ext": { + "scope": "plantuml", + "prefix": [ + "External Database Container", + "Database Container (External)" + ], + "body": [ + "ContainerDb_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\")" + ], + "description": "Add External Database Container to C4 diagram" + }, + "C4_ContainerDb_Ext_Descr": { + "scope": "plantuml", + "prefix": [ + "External Database Container with Description", + "Database Container (External) with Description" + ], + "body": [ + "ContainerDb_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")" + ], + "description": "Add External Database Container with Description to C4 diagram" + }, + "C4_ContainerQueue": { + "scope": "plantuml", + "prefix": "Queue Container", + "body": [ + "ContainerQueue(${1:alias}, \"${2:label}\", \"${3:technology}\")" + ], + "description": "Add Queue Container to C4 diagram" + }, + "C4_ContainerQueue_Descr": { + "scope": "plantuml", + "prefix": "Queue Container with Description", + "body": [ + "ContainerQueue(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")" + ], + "description": "Add Queue Container with Description to C4 diagram" + }, + "C4_ContainerQueue_Ext": { + "scope": "plantuml", + "prefix": [ + "External Queue Container", + "Queue Container (External)" + ], + "body": [ + "ContainerQueue_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\")" + ], + "description": "Add External Queue Container to C4 diagram" + }, + "C4_ContainerQueue_Ext_Descr": { + "scope": "plantuml", + "prefix": [ + "External Queue Container with Description", + "Queue Container (External) with Description" + ], + "body": [ + "ContainerQueue_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")" + ], + "description": "Add ExternalQueue Container with Description to C4 diagram" + }, "C4_Container_Boundary": { - "scope": "diagram", + "scope": "plantuml", "prefix": [ "Container Boundary", "Boundary for Container" @@ -73,67 +205,235 @@ "description": "Add a Container Boundary to C4 diagram" }, "C4_Component": { - "scope": "diagram", + "scope": "plantuml", "prefix": "Component", "body": [ - "Component(${1:alias}, \"${2:label}\", \"${3:technology}\")", - "$0" + "Component(${1:alias}, \"${2:label}\", \"${3:technology}\")" ], "description": "Add Component to C4 diagram" }, "C4_Component_Descr": { - "scope": "diagram", + "scope": "plantuml", "prefix": "Component with Description", "body": [ - "Component(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")", - "$0" + "Component(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")" ], "description": "Add Component with Description to C4 diagram" }, + "C4_Component_Ext": { + "scope": "plantuml", + "prefix": [ + "External Component", + "Component (External)" + ], + "body": [ + "Component_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\")" + ], + "description": "Add External Component to C4 diagram" + }, + "C4_Component_Ext_Descr": { + "scope": "plantuml", + "prefix": [ + "External Component with Description", + "Component (External) with Description" + ], + "body": [ + "Component_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")" + ], + "description": "Add External Component with Description to C4 diagram" + }, + "C4_ComponentDb": { + "scope": "plantuml", + "prefix": "Database Component", + "body": [ + "ComponentDb(${1:alias}, \"${2:label}\", \"${3:technology}\")" + ], + "description": "Add Database Component to C4 diagram" + }, + "C4_ComponentDb_Descr": { + "scope": "plantuml", + "prefix": "Database Component with Description", + "body": [ + "ComponentDb(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")" + ], + "description": "Add Database Component with Description to C4 diagram" + }, + "C4_ComponentDb_Ext": { + "scope": "plantuml", + "prefix": [ + "External Database Component", + "Database Component (External)" + ], + "body": [ + "ComponentDb_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\")" + ], + "description": "Add External Database Component to C4 diagram" + }, + "C4_ComponentDb_Ext_Descr": { + "scope": "plantuml", + "prefix": [ + "External Database Component with Description", + "Database Component (External) with Description" + ], + "body": [ + "ComponentDb_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")" + ], + "description": "Add External Database Component with Description to C4 diagram" + }, + "C4_ComponentQueue": { + "scope": "plantuml", + "prefix": "Queue Component", + "body": [ + "ComponentQueue(${1:alias}, \"${2:label}\", \"${3:technology}\")" + ], + "description": "Add Queue Component to C4 diagram" + }, + "C4_ComponentQueue_Descr": { + "scope": "plantuml", + "prefix": "Queue Component with Description", + "body": [ + "ComponentQueue(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")" + ], + "description": "Add Queue Component with Description to C4 diagram" + }, + "C4_ComponentQueue_Ext": { + "scope": "plantuml", + "prefix": [ + "External Queue Component", + "Queue Component (External)" + ], + "body": [ + "ComponentQueue_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\")" + ], + "description": "Add External Queue Component to C4 diagram" + }, + "C4_ComponentQueue_Ext_Descr": { + "scope": "plantuml", + "prefix": [ + "External Queue Component with Description", + "Queue Component (External) with Description" + ], + "body": [ + "ComponentQueue_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")" + ], + "description": "Add External Queue Component with Description to C4 diagram" + }, "C4_System": { - "scope": "diagram", + "scope": "plantuml", "prefix": "System", "body": [ - "System(${1:alias}, \"${2:label}\")", - "$0" + "System(${1:alias}, \"${2:label}\")" ], "description": "Add System to C4 diagram" }, "C4_System_Descr": { - "scope": "diagram", + "scope": "plantuml", "prefix": "System with Description", "body": [ - "System(${1:alias}, \"${2:label}\", \"${3:description}\")", - "$0" + "System(${1:alias}, \"${2:label}\", \"${3:description}\")" ], "description": "Add System with Description to C4 diagram" }, "C4_System_Ext": { - "scope": "diagram", + "scope": "plantuml", "prefix": [ "External System", "System (External)" ], "body": [ - "System_Ext(${1:alias}, \"${2:label}\")", - "$0" + "System_Ext(${1:alias}, \"${2:label}\")" ], "description": "Add External System to C4 diagram" }, "C4_System_Ext_Descr": { - "scope": "diagram", + "scope": "plantuml", "prefix": [ "External System with Description", "System (External) with Description" ], "body": [ - "System_Ext(${1:alias}, \"${2:label}\", \"${3:description}\")", - "$0" + "System_Ext(${1:alias}, \"${2:label}\", \"${3:description}\")" ], "description": "Add External System with Description to C4 diagram" }, + "C4_SystemDb": { + "scope": "plantuml", + "prefix": "Database System", + "body": [ + "SystemDb(${1:alias}, \"${2:label}\")" + ], + "description": "Add Database System to C4 diagram" + }, + "C4_SystemDb_Descr": { + "scope": "plantuml", + "prefix": "Database System with Description", + "body": [ + "SystemDb(${1:alias}, \"${2:label}\", \"${3:description}\")" + ], + "description": "Add Database System with Description to C4 diagram" + }, + "C4_SystemDb_Ext": { + "scope": "plantuml", + "prefix": [ + "External Database System", + "Database System (External)" + ], + "body": [ + "SystemDb_Ext(${1:alias}, \"${2:label}\")" + ], + "description": "Add External Database System to C4 diagram" + }, + "C4_SystemDb_Ext_Descr": { + "scope": "plantuml", + "prefix": [ + "External Database System with Description", + "Database System (External) with Description" + ], + "body": [ + "SystemDb_Ext(${1:alias}, \"${2:label}\", \"${3:description}\")" + ], + "description": "Add External Database System with Description to C4 diagram" + }, + "C4_SystemQueue": { + "scope": "plantuml", + "prefix": "Queue System", + "body": [ + "SystemQueue(${1:alias}, \"${2:label}\")" + ], + "description": "Add Queue System to C4 diagram" + }, + "C4_SystemQueue_Descr": { + "scope": "plantuml", + "prefix": "Queue System with Description", + "body": [ + "SystemQueue(${1:alias}, \"${2:label}\", \"${3:description}\")" + ], + "description": "Add Queue System with Description to C4 diagram" + }, + "C4_SystemQueue_Ext": { + "scope": "plantuml", + "prefix": [ + "External Queue System", + "Queue System (External)" + ], + "body": [ + "SystemQueue_Ext(${1:alias}, \"${2:label}\")" + ], + "description": "Add External Queue System to C4 diagram" + }, + "C4_SystemQueue_Ext_Descr": { + "scope": "plantuml", + "prefix": [ + "External Queue System with Description", + "Queue System (External) with Description" + ], + "body": [ + "SystemQueue_Ext(${1:alias}, \"${2:label}\", \"${3:description}\")" + ], + "description": "Add External Queue System with Description to C4 diagram" + }, "C4_System_Boundary": { - "scope": "diagram", + "scope": "plantuml", "prefix": [ "System Boundary", "Boundary for System" @@ -146,7 +446,7 @@ "description": "Add a System Boundary to C4 diagram" }, "C4_Enterprise_Boundary": { - "scope": "diagram", + "scope": "plantuml", "prefix": [ "Enterprise Boundary", "Boundary for Enterprise" @@ -159,43 +459,71 @@ "description": "Add an Enterprise Boundary to C4 diagram" }, "C4_Relationship": { - "scope": "diagram", + "scope": "plantuml", "prefix": "Relationship", "body": [ - "Rel(${1:from_alias}, ${2:to_alias}, \"${3:label}\")", - "$0" + "Rel(${1:from_alias}, ${2:to_alias}, \"${3:label}\")" ], "description": "Add unidirectional Relationship to C4 diagram" }, "C4_Relationship_Techn": { - "scope": "diagram", + "scope": "plantuml", "prefix": "Relationship with Technology", "body": [ - "Rel(${1:from_alias}, ${2:to_alias}, \"${3:label}\", \"${4:technology}\")", - "$0" + "Rel(${1:from_alias}, ${2:to_alias}, \"${3:label}\", \"${4:technology}\")" ], "description": "Add unidirectional Relationship with Technology to C4 diagram" }, + "C4_Relationship_Bi": { + "scope": "plantuml", + "prefix": "Bidirectional Relationship", + "body": [ + "BiRel(${1:from_alias}, ${2:to_alias}, \"${3:label}\")" + ], + "description": "Add bidirectional Relationship to C4 diagram" + }, + "C4_Relationship_Bi_Techn": { + "scope": "plantuml", + "prefix": "Bidirectional Relationship with Technology", + "body": [ + "BiRel(${1:from_alias}, ${2:to_alias}, \"${3:label}\", \"${4:technology}\")" + ], + "description": "Add bidirectional Relationship with Technology to C4 diagram" + }, + "C4_Relationship_Index": { + "scope": "plantuml", + "prefix": "Relationship with Index", + "body": [ + "RelIndex(${1:index}, ${2:from_alias}, ${3:to_alias}, \"${4:label}\")" + ], + "description": "Add unidirectional Relationship to C4 Dynamic Diagram" + }, + "C4_Relationship_Index_Techn": { + "scope": "plantuml", + "prefix": "Relationship with Technology and Index", + "body": [ + "RelIndex(${1:index}, ${2:from_alias}, ${3:to_alias}, \"${4:label}\", \"${5:technology}\")" + ], + "description": "Add unidirectional Relationship with Technology to C4 Dynamic Diagram" + }, "C4_Layout_Right": { - "scope": "diagram", + "scope": "plantuml", "prefix": "Layout to Right side", "body": [ - "Lay_R(${1:from_alias}, ${2:to_alias})", - "$0" + "Lay_R(${1:from_alias}, ${2:to_alias})" ], "description": "Add hidden layout line to put {to} to the right of {from}" }, "C4_Layout_Left": { - "scope": "diagram", + "scope": "plantuml", "prefix": "Layout to Left side", "body": [ - "Lay_L(${1:from_alias}, ${2:to_alias})", - "$0" + "Lay_L(${1:from_alias}, ${2:to_alias})" ], "description": "Add hidden layout line to put {to} to the left of {from}" }, "C4_Boundary": { - "scope": "diagram", + "scope": "plantuml", "prefix": "Boundary", "body": [ "Boundary(${1:alias}, \"${2:label}\"){", @@ -205,7 +533,7 @@ "description": "Add a generic boundary to C4 diagram." }, "C4_Boundary_Type": { - "scope": "diagram", + "scope": "plantuml", "prefix": [ "Boundary with type" ], @@ -215,5 +543,102 @@ "}" ], "description": "Add a generic boundary to C4 diagram." + }, + "C4_Deployment_Node": { + "scope": "plantuml", + "prefix": "Deployment Node", + "body": [ + "Deployment_Node(${1:alias}, \"${2:label}\"){", + "\t$0", + "}" + ], + "description": "Add a deployment node to C4 diagram." + }, + "C4_Deployment_Node_Type": { + "scope": "plantuml", + "prefix": [ + "Deployment Node with type" + ], + "body": [ + "Deployment_Node(${1:alias}, \"${2:label}\", \"${3:type}\"){", + "\t$0", + "}" + ], + "description": "Add a deployment node to C4 diagram." + }, + "C4_Dynamic_Increment": { + "scope": "plantuml", + "prefix": [ + "Increment index" + ], + "body": [ + "increment(${1:count})" + ], + "description": "Increment index of C4 Dynamic Diagram." + }, + "C4_Dynamic_Set_Index": { + "scope": "plantuml", + "prefix": [ + "Set index" + ], + "body": [ + "setIndex(${1:value})" + ], + "description": "Set index of C4 Dynamic Diagram" + }, + "C4_Hide_Stereotype": { + "scope": "plantuml", + "prefix": [ + "Hide stereotype", + "No stereotype" + ], + "body": [ + "HIDE_STEREOTYPE()" + ], + "description": "Hide stereotypes from C4 diagram.." + }, + "C4_Layout_With_Legend": { + "scope": "plantuml", + "prefix": [ + "Layout with legend", + "Legend layout" + ], + "body": [ + "LAYOUT_WITH_LEGEND()" + ], + "description": "Add legend to C4 diagram." + }, + "C4_Layout_Left_Right": { + "scope": "plantuml", + "prefix": [ + "Layout left to right", + "Left to right layout" + ], + "body": [ + "LAYOUT_LEFT_RIGHT()" + ], + "description": "Left to right layout for C4 diagram." + }, + "C4_Layout_Top_Down": { + "scope": "plantuml", + "prefix": [ + "Layout top down", + "Top down layout" + ], + "body": [ + "LAYOUT_TOP_DOWN()" + ], + "description": "Top down layout for C4 diagram." + }, + "C4_Layout_As_Sketch": { + "scope": "plantuml", + "prefix": [ + "Layout as sketch", + "Sketch layout" + ], + "body": [ + "LAYOUT_AS_SKETCH()" + ], + "description": "Sketch layout for C4 diagram." } } \ No newline at end of file diff --git a/C4.puml b/C4.puml index d28711a3..6a24382d 100644 --- a/C4.puml +++ b/C4.puml @@ -1,106 +1,1698 @@ -' C4-PlantUML, version 1.0.0 -' https://github.com/RicardoNiepel/C4-PlantUML +' C4-PlantUML + +' Global pre-settings +' ################################## +' ENABLE_ALL_PLANT_ELEMENTS +' If ENABLE_ALL_PLANT_ELEMENTS is set BEFORE the first C4_* file is loaded, nearly "all" PlantUML elements can be used like +' Component(StorageA, "Storage A ", $baseShape="storage") +' ENABLE_ALL_PLANT_ELEMENTS can be set via +' !ENABLE_ALL_PLANT_ELEMENTS = 1 +' or with additional command line argument -DENABLE_ALL_PLANT_ELEMENTS=1 + +'Version +' ################################## +!function C4Version() + ' 2 spaces and ' are used as unique marker, that the release scripts makes the correct version update + !$c4Version = "2.12.0beta1" + !return $c4Version +!end function + +!procedure C4VersionDetails() +rectangle C4VersionDetailsArea <> [ +| PlantUML | **%version()** | +| C4-PlantUML | **C4Version()** | +] +!end procedure ' Colors ' ################################## +!$ELEMENT_FONT_COLOR ?= "#FFFFFF" + +!$ARROW_COLOR ?= "#666666" +!$ARROW_FONT_COLOR ?= $ARROW_COLOR + +!$BOUNDARY_COLOR ?= "#444444" +!$BOUNDARY_BG_COLOR ?= "transparent" +!$BOUNDARY_BORDER_STYLE ?= "dashed" +' boundary symbols written in the same line, typically only 50% of the size in element +!$BOUNDARY_IMAGE_SIZE_FACTOR ?= 0.5 +!$BOUNDARY_DESCR_MAX_CHAR_WIDTH ?= 35 + +!$LEGEND_TITLE_COLOR ?= "#000000" +!$LEGEND_FONT_COLOR ?= "#FFFFFF" +!$LEGEND_BG_COLOR ?= "transparent" +!$LEGEND_BORDER_COLOR ?= "transparent" +' %darken(darkkhaki,50), #khaki +!$LEGEND_DARK_COLOR ?= "#66622E" +!$LEGEND_LIGHT_COLOR ?= "#khaki" + +!$SKETCH_BG_COLOR ?= "#EEEBDC" +!$SKETCH_FONT_COLOR ?= "" +!$SKETCH_WARNING_COLOR ?= "red" +!$SKETCH_FONT_NAME ?= "Comic Sans MS" + +' Labels +' ################################## + +!$BOUNDARY_LEGEND_TEXT ?= "boundary" -!define ELEMENT_FONT_COLOR #FFFFFF +!$LEGEND_TITLE_TEXT ?= "Legend" +!$LEGEND_SHADOW_TEXT ?= "shadow" +!$LEGEND_NO_SHADOW_TEXT ?= "no shadow" +!$LEGEND_NO_FONT_BG_TEXT ?= "last text and back color" +!$LEGEND_NO_FONT_TEXT ?= "last text color" +!$LEGEND_NO_BG_TEXT ?= "last back color" +!$LEGEND_NO_LINE_TEXT ?= "last line color" +!$LEGEND_ROUNDED_BOX ?= "rounded box" +!$LEGEND_EIGHT_SIDED ?= "eight sided" +!$LEGEND_DOTTED_LINE ?= "dotted" +!$LEGEND_DASHED_LINE ?= "dashed" +!$LEGEND_BOLD_LINE ?= "bold" +!$LEGEND_SOLID_LINE ?= "solid" + +!$LEGEND_BOUNDARY ?= "boundary" +!$LEGEND_BOUNDARY_PRE_PART ?= "" +!$LEGEND_BOUNDARY_POST_PART ?= " " + $LEGEND_BOUNDARY + +' ignore (boundary) transparent atm, that the legend is smaller +' !$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "transparent, " +!$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "" +' (boundary) dashed should not be ignored atm +!$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "dashed, " +' !$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "" + +!$LEGEND_THICKNESS ?= "thickness" + +!$SKETCH_FOOTER_WARNING ?= "Warning:" +!$SKETCH_FOOTER_TEXT ?= "Created for discussion, needs to be validated" ' Styling ' ################################## -!define TECHN_FONT_SIZE 12 +!$STEREOTYPE_FONT_SIZE ?= 12 +!global $TRANSPARENT_STEREOTYPE_FONT_SIZE = $STEREOTYPE_FONT_SIZE/2 +!$TECHN_FONT_SIZE ?= 12 + +!$ARROW_FONT_SIZE ?= 12 + +!$LEGEND_DETAILS_SMALL_SIZE ?= 10 +!$LEGEND_DETAILS_NORMAL_SIZE ?= 14 +!global $LEGEND_DETAILS_SIZE = $LEGEND_DETAILS_SMALL_SIZE + +' element symbols typically 4 times too big in legend +!$LEGEND_IMAGE_SIZE_FACTOR ?= 0.25 + +!$ROUNDED_BOX_SIZE ?= 25 +!$EIGHT_SIDED_SIZE ?= 18 + +' Default element wrap width (of an element) +!$DEFAULT_WRAP_WIDTH ?= 200 +' Maximum size in pixels, of a message (in a sequence diagram?) +!$MAX_MESSAGE_SIZE ?= 150 +' PlantUML supports no DETERMINISTIC/automatic line breaks of "PlantUML line" (C4 Relationships) +' therefore Rel...() implements an automatic line break based on spaces (like in all other objects). +' If a $type contains \n then these are used (and no automatic space based line breaks are done) +' $REL_TECHN_MAX_CHAR_WIDTH defines the automatic line break position +!$REL_TECHN_MAX_CHAR_WIDTH ?= 35 +!$REL_DESCR_MAX_CHAR_WIDTH ?= 32 + +' internal +' ################################## + +!global $ROUNDED_BOX = "roundedBox" +!global $EIGHT_SIDED = "eightSided" + +!global $DOTTED_LINE = "dotted" +!global $DASHED_LINE = "dashed" +!global $BOLD_LINE = "bold" +' solid is not defined in plantUML, but works as reset of all other styles too +!global $SOLID_LINE = "solid" + +!global $LEGEND_DETAILS_NONE = "none" +!global $LEGEND_DETAILS_NORMAL = "normal" +!global $LEGEND_DETAILS_SMALL = "small" skinparam defaultTextAlignment center -skinparam wrapWidth 200 -skinparam maxMessageSize 150 +skinparam wrapWidth $DEFAULT_WRAP_WIDTH +skinparam maxMessageSize $MAX_MESSAGE_SIZE + +skinparam LegendFontColor $LEGEND_FONT_COLOR +skinparam LegendBackgroundColor $LEGEND_BG_COLOR +skinparam LegendBorderColor $LEGEND_BORDER_COLOR + +skinparam rectangle<> { + backgroundcolor $LEGEND_BG_COLOR + bordercolor $LEGEND_BORDER_COLOR +} skinparam rectangle { - StereotypeFontSize 12 - shadowing false + StereotypeFontSize $STEREOTYPE_FONT_SIZE } skinparam database { - StereotypeFontSize 12 - shadowing false + StereotypeFontSize $STEREOTYPE_FONT_SIZE +} + +skinparam queue { + StereotypeFontSize $STEREOTYPE_FONT_SIZE +} + +skinparam participant { + StereotypeFontSize $STEREOTYPE_FONT_SIZE +} + +skinparam arrow { + Color $ARROW_COLOR + FontColor $ARROW_FONT_COLOR + FontSize $ARROW_FONT_SIZE +} + +skinparam person { + StereotypeFontSize $STEREOTYPE_FONT_SIZE } -skinparam Arrow { - Color #666666 - FontColor #666666 - FontSize 12 +skinparam actor { + StereotypeFontSize $STEREOTYPE_FONT_SIZE + style awesome } +!if %variable_exists("ENABLE_ALL_PLANT_ELEMENTS") +skinparam agent { + StereotypeFontSize $STEREOTYPE_FONT_SIZE +} +skinparam artifact { + StereotypeFontSize $STEREOTYPE_FONT_SIZE +} +skinparam boundary { + StereotypeFontSize $STEREOTYPE_FONT_SIZE +} +skinparam card { + StereotypeFontSize $STEREOTYPE_FONT_SIZE +} +skinparam circle { + StereotypeFontSize $STEREOTYPE_FONT_SIZE +} +skinparam cloud { + StereotypeFontSize $STEREOTYPE_FONT_SIZE +} +skinparam collections { + StereotypeFontSize $STEREOTYPE_FONT_SIZE +} +skinparam control { + StereotypeFontSize $STEREOTYPE_FONT_SIZE +} +skinparam entity { + StereotypeFontSize $STEREOTYPE_FONT_SIZE +} +skinparam file { + StereotypeFontSize $STEREOTYPE_FONT_SIZE +} +skinparam folder { + StereotypeFontSize $STEREOTYPE_FONT_SIZE +} +skinparam frame { + StereotypeFontSize $STEREOTYPE_FONT_SIZE +} +skinparam hexagon { + StereotypeFontSize $STEREOTYPE_FONT_SIZE +} +skinparam interface { + StereotypeFontSize $STEREOTYPE_FONT_SIZE +} +skinparam label { + StereotypeFontSize $STEREOTYPE_FONT_SIZE +} +skinparam stack { + StereotypeFontSize $STEREOTYPE_FONT_SIZE +} +skinparam storage { + StereotypeFontSize $STEREOTYPE_FONT_SIZE +} +skinparam usecase { + StereotypeFontSize $STEREOTYPE_FONT_SIZE +} +skinparam person { + StereotypeFontSize $STEREOTYPE_FONT_SIZE +} +!endif + +' Some boundary skinparams have to be set as package skinparams too (PlantUML uses internal packages) +' UpdateBoundaryStyle() called in boundary section below skinparam rectangle<> { - Shadowing false - StereotypeFontSize 0 - FontColor #444444 - BorderColor #444444 - BorderStyle dashed + StereotypeFontSize $TRANSPARENT_STEREOTYPE_FONT_SIZE + StereotypeFontColor $BOUNDARY_BG_COLOR + BorderStyle $BOUNDARY_BORDER_STYLE } +skinparam package { + StereotypeFontSize $TRANSPARENT_STEREOTYPE_FONT_SIZE + StereotypeFontColor $BOUNDARY_BG_COLOR + FontStyle plain + BackgroundColor $BOUNDARY_BG_COLOR +} + +' Legend and Tags +' ################################## +!global $tagDefaultLegend = "" +!global $tagCustomLegend = "" + +' rel specific +!unquoted function $toStereos($tags) + !if (%strlen($tags) == 0) + !return '' + !endif + !$stereos = '' + !$brPos = %strpos($tags, "+") + !while ($brPos >= 0) + !$tag = %substr($tags, 0, $brPos) + !$stereos = $stereos + '<<' + $tag + '>>' +%set_variable_value("$" + $tag + "_LineLegend", %true()) + !$tags = %substr($tags, $brPos+1) + !$brPos = %strpos($tags, "+") + !endwhile + !if (%strlen($tags) > 0) + !$stereos = $stereos + '<<' + $tags + '>>' +%set_variable_value("$" + $tags + "_LineLegend", %true()) + !endif + !return $stereos +!endfunction + +' if $sprite/$techn is an empty argument, try to calculate it via the defined $tag +!unquoted function $toRelArg($arg, $tags, $varPostfix) + !if ($arg > "") + !return $arg + !endif + + !if (%strlen($tags) == 0) + !return $arg + !endif + !$brPos = %strpos($tags, "+") + !while ($brPos >= 0) + !$tag = %substr($tags, 0, $brPos) + !$newArg = %get_variable_value("$" + $tag + $varPostfix) + !if ($newArg > "") + !return $newArg + !endif + !$tags = %substr($tags, $brPos+1) + !$brPos = %strpos($tags, "+") + !endwhile + !if (%strlen($tags) > 0) + !$newArg = %get_variable_value("$" + $tags + $varPostfix) + !if ($newArg > "") + !return $newArg + !endif + !endif + !return $arg +!endfunction + +' element specific (unused are hidden based on mask) +!unquoted function $toStereos($elementType, $tags) + !if (%strlen($tags) == 0) + !$stereos = '<<' + $elementType + '>>' +%set_variable_value("$" + $elementType + "Legend", %true()) + !return $stereos + !endif + !$stereos = '' + !$mask = $resetMask() + !$brPos = %strpos($tags, "+") + !while ($brPos >= 0) + !$tag = %substr($tags, 0, $brPos) + !$stereos = $stereos + '<<' + $tag + '>>' + !$mergedMask = $combineMaskWithTag($mask, $tag) + !if ($mergedMask != $mask) +%set_variable_value("$" + $tag + "Legend", %true()) + !$mask = $mergedMask + !endif + !$tags = %substr($tags, $brPos+1) + !$brPos = %strpos($tags, "+") + !endwhile + !if (%strlen($tags) > 0) + !$stereos = $stereos + '<<' + $tags + '>>' + !$mergedMask = $combineMaskWithTag($mask, $tags) + !if ($mergedMask != $mask) +%set_variable_value("$" + $tags + "Legend", %true()) + !$mask = $mergedMask + !endif + !endif + ' has to be last, otherwise PlantUML overwrites all tag specific skinparams + !$stereos = $stereos + '<<' + $elementType + '>>' + !$mergedMask = $combineMaskWithTag($mask, $elementType) + !if ($mergedMask != $mask) +%set_variable_value("$" + $elementType + "Legend", %true()) + !$mask = $mergedMask + !endif + !return $stereos +!endfunction + +' if $sprite/$techn is an empty argument, try to calculate it via the defined $tag +!unquoted function $toElementArg($arg, $tags, $varPostfix, $elementType) + !if ($arg > "") + !return $arg + !endif + + !if (%strlen($tags) == 0) + !$newArg = %get_variable_value("$" + $elementType + $varPostfix) + !if ($newArg > "") + !return $newArg + !else + !return $arg + !endif + !endif + !$brPos = %strpos($tags, "+") + !while ($brPos >= 0) + !$tag = %substr($tags, 0, $brPos) + !$newArg = %get_variable_value("$" + $tag + $varPostfix) + !if ($newArg > "") + !return $newArg + !endif + !$tags = %substr($tags, $brPos+1) + !$brPos = %strpos($tags, "+") + !endwhile + !if (%strlen($tags) > 0) + !$newArg = %get_variable_value("$" + $tags + $varPostfix) + !if ($newArg > "") + !return $newArg + !endif + !$newArg = %get_variable_value("$" + $elementType + $varPostfix) + !if ($newArg > "") + !return $newArg + !endif + !endif + !return $arg +!endfunction + +' if $value is empty try to load it via variable, optional can it store the calculated value +!function $restoreEmpty($elementType, $property, $value, $store) + !$var = "$" + $elementType + "Restore" + $property + !if ($value == "") + !$value = %get_variable_value($var) + !elseif ($store) + %set_variable_value($var, $value) + !endif + !return $value +!endfunction + +' clear the restore property +!function $clearRestore($elementType, $property) + !$var = "$" + $elementType + "Restore" + $property + %set_variable_value($var, "") + !return "" +!endfunction + +!function $elementTagSkinparams($element, $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $borderStyle, $borderThickness) + !$elementSkin = "skinparam " + $element + "<<" + $tagStereo + ">> {" + %newline() + !if ($fontColor != "") + !if (%strpos($tagStereo, "boundary") < 0) + !$elementSkin = $elementSkin + " StereotypeFontColor " + $fontColor + %newline() + !endif + !$elementSkin = $elementSkin + " FontColor " + $fontColor + %newline() + !endif + !if ($bgColor != "") + !$elementSkin = $elementSkin + " BackgroundColor " + $bgColor + %newline() + !endif + !if ($borderColor != "") + !$elementSkin = $elementSkin + " BorderColor " + $borderColor+ %newline() + !endif + !if ($shadowing == "true") + !$elementSkin = $elementSkin + " Shadowing<<" + $tagStereo + ">> " + "true" + %newline() + !endif + !if ($shadowing == "false") + !$elementSkin = $elementSkin + " Shadowing<<" + $tagStereo + ">> " + "false" + %newline() + !endif + ' only rectangle supports shape(d corners), define both skinparam that overlays are working + !if ($shape != "" && $element == "rectangle") + !if ($shape == $ROUNDED_BOX) + !$elementSkin = $elementSkin + " RoundCorner " + $ROUNDED_BOX_SIZE+ %newline() + !$elementSkin = $elementSkin + " DiagonalCorner " + "0" + %newline() + !elseif ($shape == $EIGHT_SIDED) + !$elementSkin = $elementSkin + " RoundCorner " + "0" + %newline() + !$elementSkin = $elementSkin + " DiagonalCorner " + $EIGHT_SIDED_SIZE+ %newline() + !endif + !endif + !if ($borderStyle != "") + !$elementSkin = $elementSkin + " BorderStyle " + $borderStyle + %newline() + !endif + !if ($borderThickness != "") + !$elementSkin = $elementSkin + " BorderThickness " + $borderThickness + %newline() + !endif + !$elementSkin = $elementSkin + "}" + %newline() + !return $elementSkin +!endfunction + +!unquoted procedure $defineSkinparams($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $borderStyle, $borderThickness) + ' only rectangle supports shape(d corners) + !$tagSkin = $elementTagSkinparams("rectangle", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $borderStyle, $borderThickness) + !$tagSkin = $tagSkin + $elementTagSkinparams("database", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, "", $borderStyle, $borderThickness) + !$tagSkin = $tagSkin + $elementTagSkinparams("queue", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, "", $borderStyle, $borderThickness) + ' plantuml.jar bug - actor have to be after person + !$tagSkin = $tagSkin + $elementTagSkinparams("person", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, "", $borderStyle, $borderThickness) + ' actor has style awesome, therefore $fontColor is ignored and text uses $bgColor too + !$tagSkin = $tagSkin + $elementTagSkinparams("actor", $tagStereo, $bgColor, $bgColor, $borderColor, $shadowing, "", $borderStyle, $borderThickness) + ' sequence requires participant + !$tagSkin = $tagSkin + $elementTagSkinparams("participant", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, "", $borderStyle, $borderThickness) + !$tagSkin = $tagSkin + $elementTagSkinparams("sequencebox", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, "", $borderStyle, $borderThickness) + !if (%strpos($tagStereo, "boundary") >= 0 && $bgColor != "") + !$tagSkin = $tagSkin + "skinparam package<<" + $tagStereo + ">>StereotypeFontColor " + $bgColor + %newline() + !$tagSkin = $tagSkin + "skinparam rectangle<<" + $tagStereo + ">>StereotypeFontColor " + $bgColor + %newline() + !endif + !if %variable_exists("ENABLE_ALL_PLANT_ELEMENTS") + !$tagSkin = $tagSkin + $elementTagSkinparams("agent", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, "", $borderStyle, $borderThickness) + !$tagSkin = $tagSkin + $elementTagSkinparams("artifact", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, "", $borderStyle, $borderThickness) + !$tagSkin = $tagSkin + $elementTagSkinparams("card", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, "", $borderStyle, $borderThickness) + !$tagSkin = $tagSkin + $elementTagSkinparams("cloud", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, "", $borderStyle, $borderThickness) + !$tagSkin = $tagSkin + $elementTagSkinparams("collections", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, "", $borderStyle, $borderThickness) + !$tagSkin = $tagSkin + $elementTagSkinparams("file", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, "", $borderStyle, $borderThickness) + !$tagSkin = $tagSkin + $elementTagSkinparams("folder", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, "", $borderStyle, $borderThickness) + !$tagSkin = $tagSkin + $elementTagSkinparams("frame", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, "", $borderStyle, $borderThickness) + !$tagSkin = $tagSkin + $elementTagSkinparams("hexagon", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, "", $borderStyle, $borderThickness) + !$tagSkin = $tagSkin + $elementTagSkinparams("package", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, "", $borderStyle, $borderThickness) + !$tagSkin = $tagSkin + $elementTagSkinparams("stack", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, "", $borderStyle, $borderThickness) + !$tagSkin = $tagSkin + $elementTagSkinparams("storage", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, "", $borderStyle, $borderThickness) + !$tagSkin = $tagSkin + $elementTagSkinparams("usecase", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, "", $borderStyle, $borderThickness) + ' elements without background: font uses $bgColor + !$tagSkin = $tagSkin + $elementTagSkinparams("boundary", $tagStereo, $bgColor, $bgColor, $borderColor, $shadowing, "", $borderStyle, $borderThickness) + !$tagSkin = $tagSkin + $elementTagSkinparams("circle", $tagStereo, $bgColor, $bgColor, $borderColor, $shadowing, "", $borderStyle, $borderThickness) + !$tagSkin = $tagSkin + $elementTagSkinparams("control", $tagStereo, $bgColor, $bgColor, $borderColor, $shadowing, "", $borderStyle, $borderThickness) + !$tagSkin = $tagSkin + $elementTagSkinparams("entity", $tagStereo, $bgColor, $bgColor, $borderColor, $shadowing, "", $borderStyle, $borderThickness) + !$tagSkin = $tagSkin + $elementTagSkinparams("interface", $tagStereo, $bgColor, $bgColor, $borderColor, $shadowing, "", $borderStyle, $borderThickness) + ' label uses wrong font color? (should be $bgColor too) + !$tagSkin = $tagSkin + $elementTagSkinparams("label", $tagStereo, $bgColor, $bgColor, $borderColor, $shadowing, "", $borderStyle, $borderThickness) +' label colors cannot be set via skinparam use additional style + !$tagSkin = $tagSkin + "" + %newline() + !endif +$tagSkin +!endprocedure + +' arrow colors cannot start with # (legend background has to start with #) +!function $colorWithoutHash($c) + !if (%substr($c, 0, 1) == "#") + !$c = %substr($c,1) + !endif + !return $c +!endfunction + +!unquoted procedure $defineRelSkinparams($tagStereo, $textColor, $lineColor, $lineStyle, $lineThickness) + !$elementSkin = "skinparam arrow<<" + $tagStereo + ">> {" + %newline() + !if ($lineColor != "") || ($textColor != "") || ($lineStyle != "") + !$elementSkin = $elementSkin + " Color " + !if ($lineColor != "") + !$elementSkin = $elementSkin + $colorWithoutHash($lineColor) + !endif + !if ($textColor != "") + !$elementSkin = $elementSkin + ";text:" + $colorWithoutHash($textColor) + !endif + !if ($lineStyle != "") + !$elementSkin = $elementSkin + ";line." + $lineStyle + !endif + !$elementSkin = $elementSkin + %newline() + !endif + !if ($lineThickness != "") + !$elementSkin = $elementSkin + " thickness " + $lineThickness + %newline() + !endif + !$elementSkin = $elementSkin + "}" + %newline() +$elementSkin +!endprocedure + +' %is_dark() requires PlantUML version >= 1.2021.6 +!if (%function_exists("%is_dark")) + !$PlantUMLSupportsDynamicLegendColor = %true() +!else + !$PlantUMLSupportsDynamicLegendColor = %false() + !log "dynamic undefined legend colors" requires PlantUML version >= 1.2021.6, therefore only static assigned colors are used +!endif + +!unquoted function $contrastLegend($color) + !if (%is_dark($color)) + !$value = $LEGEND_LIGHT_COLOR + !else + !$value = $LEGEND_DARK_COLOR + !endif + !return $value +!endfunction + +!unquoted function $flatLegend($color) + !if (%is_dark($color)) + !$value = $LEGEND_DARK_COLOR + !else + !$value = $LEGEND_LIGHT_COLOR + !endif + !return $value +!endfunction + +' legend background has to start with # +!function $colorWithHash($c) + !if (%substr($c, 0, 1) != "#") + !$c = "#" + $c + !endif + !return $c +!endfunction + +!function $addMaskFlag($mask, $attr) + !if ($attr == "") + !$mask = $mask + "0" + !else + !$mask = $mask + "1" + !endif + !return $mask +!endfunction + +!function $orFlags($flag1, $flag2) + !if ($flag1 == "0" && $flag2 == "0") + !return "0" + !endif + !return "1" +!endfunction + +!function $tagLegendMask($bgColor, $fontColor, $borderColor, $shadowing, $shape, $sprite, $borderStyle, $borderThickness) + !$mask = "" + !$mask = $addMaskFlag($mask, $bgColor) + !$mask = $addMaskFlag($mask, $fontColor) + !$mask = $addMaskFlag($mask, $borderColor) + !$mask = $addMaskFlag($mask, $shadowing) + !$mask = $addMaskFlag($mask, $shape) + !$mask = $addMaskFlag($mask, $sprite) + !$mask = $addMaskFlag($mask, $borderStyle) + !$mask = $addMaskFlag($mask, $borderThickness) + !return $mask +!endfunction + +!function $resetMask() + !return "00000000" +!endfunction + +!function $combineMasks($mask1, $mask2) + !$mask = "" + !$mask = $mask + $orFlags(%substr($mask1, 0, 1), %substr($mask2, 0, 1)) + !$mask = $mask + $orFlags(%substr($mask1, 1, 1), %substr($mask2, 1, 1)) + !$mask = $mask + $orFlags(%substr($mask1, 2, 1), %substr($mask2, 2, 1)) + !$mask = $mask + $orFlags(%substr($mask1, 3, 1), %substr($mask2, 3, 1)) + !$mask = $mask + $orFlags(%substr($mask1, 4, 1), %substr($mask2, 4, 1)) + !$mask = $mask + $orFlags(%substr($mask1, 5, 1), %substr($mask2, 5, 1)) + !$mask = $mask + $orFlags(%substr($mask1, 6, 1), %substr($mask2, 6, 1)) + !$mask = $mask + $orFlags(%substr($mask1, 7, 1), %substr($mask2, 7, 1)) + !return $mask +!endfunction + +!function $combineMaskWithTag($mask1, $tag) + !$mask2 = %get_variable_value("$" + $tag+ "LegendMask") + !if ($mask2 == "") + ' !log combineMaskWithTag $mask1, $tag, ... only $mask1 + !return $mask1 + !endif + + ' !log combineMaskWithTag $mask1, $tag, $mask2 ... $combineMasks($mask1, $mask2) + !return $combineMasks($mask1, $mask2) +!endfunction + +' element symbols typically 4 times too big in legend +!function $smallVersionSprite($sprite, $imageScale = $LEGEND_IMAGE_SIZE_FACTOR) + ' ,scale= ... has to be first (...,color=black,scale=0.25... is invalid too) + !if (%strpos($sprite, "=") < 0) + !if (%substr($sprite, 0, 4) == "img:") + !$smallSprite = $sprite + "{scale=" + $imageScale + "}" + !else + !$smallSprite = $sprite + ",scale=" + $imageScale + !endif + !else + !$smallSprite = $sprite + !endif + !return $smallSprite +!endfunction + +' format sprite that it can be used in diagram +!function $getSprite($sprite) + ' if it starts with & it's a OpenIconic, details see https://useiconic.com/open/ + ' if it starts with img: it's an image, details see https://plantuml.com/creole + !if (%substr($sprite, 0, 1) != "&" && %substr($sprite, 0, 4) != "img:") + !$formatted = "<$" + $sprite + ">" + !else + !$formatted = "<" + $sprite + ">" + !endif + !return $formatted +!endfunction + +!function $setTagLegendVariables($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $legendText, $legendSprite, $borderStyle, $borderThickness) + !$bg = $bgColor + !$fo = $fontColor + !$bo = $borderColor + + !if ($fo == "") + !if ($bg != "") +!if ($PlantUMLSupportsDynamicLegendColor) + !$fo = $contrastLegend($bg) +!else + !$fo = $LEGEND_DARK_COLOR +!endif + !else + !if ($bo == "") + !$fo = $LEGEND_DARK_COLOR + !$bg = $LEGEND_LIGHT_COLOR + !else +!if ($PlantUMLSupportsDynamicLegendColor) + !$fo = $flatLegend($bo) + !$bg = $contrastLegend($bo) +!else + !$fo = $LEGEND_DARK_COLOR + !$bg = $LEGEND_LIGHT_COLOR +!endif + !endif + !endif + !else + !if ($bg == "") +!if ($PlantUMLSupportsDynamicLegendColor) + !$bg = $contrastLegend($fo) +!else + !$bg = $LEGEND_LIGHT_COLOR +!endif + !endif + !endif + + !if ($bo == "") + !$bo = $bg + !endif + + !$tagEntry = "|" + !$tagDetails = "(" + !$tagEntry = $tagEntry + "<" + $colorWithHash($bg) +">" + ' ..white rectangle + !$tagEntry = $tagEntry + " " + !$tagEntry = $tagEntry + "" + !if ($legendSprite != "") + !$tagEntry = $tagEntry + $getSprite($legendSprite) + " " + !endif + + !$isBoundary = 0 + !if ($legendText == "") + !if (%strpos($tagStereo, "boundary") >= 0) + !if ($tagStereo == "boundary") + !$isBoundary = 1 + !$tagEntry = $LEGEND_BOUNDARY_PRE_PART + $tagEntry + $LEGEND_BOUNDARY_POST_PART + " " + !else + ' if contains/ends with _boundary remove _boundary and add "boundary (dashed)" + !$pos = %strpos($tagStereo, "_boundary") + !if ($pos > 0) + !$isBoundary = 1 + !$tagEntry = $tagEntry + " " + $LEGEND_BOUNDARY_PRE_PART + %substr($tagStereo, 0 ,$pos) + $LEGEND_BOUNDARY_POST_PART + " " + !endif + !endif + !endif + !if ($isBoundary == 0) + !$tagEntry = $tagEntry + " " + $tagStereo + " " + !endif + + !if ($isBoundary == 1 && ($bgColor == "#00000000" || %lower($bgColor) == "transparent")) + !$tagDetails = $tagDetails + $LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA + !endif + !if ($shadowing == "true") + !$tagDetails = $tagDetails + $LEGEND_SHADOW_TEXT + ", " + !endif + !if ($shadowing == "false") + !$tagDetails = $tagDetails + $LEGEND_NO_SHADOW_TEXT + ", " + !endif + !if ($shape == $ROUNDED_BOX) + !$tagDetails = $tagDetails + $LEGEND_ROUNDED_BOX + ", " + !endif + !if ($shape == $EIGHT_SIDED) + !$tagDetails = $tagDetails + $LEGEND_EIGHT_SIDED + ", " + !endif + !if ($fontColor == "" && $bgColor == "") + !$tagDetails = $tagDetails + $LEGEND_NO_FONT_BG_TEXT + ", " + !else + !if ($fontColor == "") + !$tagDetails = $tagDetails + $LEGEND_NO_FONT_TEXT + ", " + !endif + !if ($bgColor == "") + !$tagDetails = $tagDetails + $LEGEND_NO_BG_TEXT + ", " + !endif + !endif + !if ($borderStyle != "") + !if ($borderStyle == $DOTTED_LINE) + !$tagDetails = $tagDetails + $LEGEND_DOTTED_LINE + ", " + !elseif ($borderStyle == $DASHED_LINE) + !if ($isBoundary == 1) + !$tagDetails = $tagDetails + $LEGEND_BOUNDARY_DASHED_INCL_COMA + !else + !$tagDetails = $tagDetails + $LEGEND_DASHED_LINE + ", " + !endif + !elseif ($borderStyle == $BOLD_LINE) + !$tagDetails = $tagDetails + $LEGEND_BOLD_LINE + ", " + !elseif ($borderStyle == $SOLID_LINE) + !$tagDetails = $tagDetails + $LEGEND_SOLID_LINE + ", " + !else + !$tagDetails = $tagDetails + $borderStyle + ", " + !endif + !endif + !if ($borderThickness != "") + !$tagDetails = $tagDetails + $LEGEND_THICKNESS + " " + $borderThickness + ", " + !endif + !if ($tagDetails=="(" || $tagDetails=="(, ") + !$tagDetails = "" + !else + !$tagDetails = %substr($tagDetails, 0, %strlen($tagDetails)-2) + !$tagDetails = $tagDetails + ")" + !endif + !else + !$brPos = %strpos($legendText, "\n") + !if ($brPos > 0) + !$tagEntry = $tagEntry + %substr($legendText, 0, $brPos) + " " + !$details = %substr($legendText, $brPos + 2) + !if ($details=="") + !$tagDetails = "" + !else + !$tagDetails = $tagDetails + $details + ")" + !endif + !else + !$tagEntry = $tagEntry + " " + $legendText + " " + !$tagDetails = "" + !endif + !endif + + !$tagDetails = $tagDetails + " " + !$tagDetails = $tagDetails + "|" +%set_variable_value("$" + $tagStereo + "LegendEntry", $tagEntry) +%set_variable_value("$" + $tagStereo + "LegendDetails", $tagDetails) + !return $tagEntry +!endfunction + +!function $setTagRelLegendVariables($tagStereo, $textColor, $lineColor, $lineStyle, $legendText, $legendSprite, $lineThickness) + !$tc = $textColor + !$lc = $lineColor + + !if ($tc == "") + !if ($PlantUMLSupportsDynamicLegendColor) + !$tc = $flatLegend($ARROW_FONT_COLOR) + !else + !$tc = $LEGEND_DARK_COLOR + !endif + !endif + !if ($lc == "") + !if ($PlantUMLSupportsDynamicLegendColor) + !$lc = $flatLegend($ARROW_COLOR) + !else + !$lc = $LEGEND_DARK_COLOR + !endif + !endif + + !$tagEntry = "|" + !$tagDetails = "(" + ' ..white line + !$tagEntry = $tagEntry + " " + !$tagEntry = $tagEntry + "" + !if ($legendSprite != "") + !$tagEntry = $tagEntry + $getSprite($legendSprite) + " " + !endif + !if ($legendText == "") + !$tagEntry = $tagEntry + " " + $tagStereo + " " + !if ($textColor == "") + !$tagDetails = $tagDetails + $LEGEND_NO_FONT_TEXT + ", " + !endif + !if ($lineColor == "") + !$tagDetails = $tagDetails + $LEGEND_NO_LINE_TEXT + ", " + !endif + !if ($lineStyle != "") + !if ($lineStyle == $DOTTED_LINE) + !$tagDetails = $tagDetails + $LEGEND_DOTTED_LINE + ", " + !elseif ($lineStyle == $DASHED_LINE) + !$tagDetails = $tagDetails + $LEGEND_DASHED_LINE + ", " + !elseif ($lineStyle == $BOLD_LINE) + !$tagDetails = $tagDetails + $LEGEND_BOLD_LINE + ", " + !else + !$tagDetails = $tagDetails + $lineStyle + ", " + !endif + !endif + !if ($lineThickness != "") + !$tagDetails = $tagDetails + $LEGEND_THICKNESS + " " + $lineThickness + ", " + !endif + !if ($tagDetails=="(") + !$tagDetails = "" + !else + !$tagDetails = %substr($tagDetails, 0, %strlen($tagDetails)-2) + !$tagDetails = $tagDetails + ")" + !endif + !else + !$brPos = %strpos($legendText, "\n") + !if ($brPos > 0) + !$tagEntry = $tagEntry + " " + %substr($legendText, 0, $brPos) + " " + !$details = %substr($legendText, $brPos + 2) + !if ($details=="") + !$tagDetails = "" + !else + !$tagDetails = $tagDetails + $details + ")" + !endif + !else + !$tagEntry = $tagEntry + " " + $legendText + " " + !$tagDetails = "" + !endif + !endif + + !$tagDetails = $tagDetails + " " + !$tagDetails = $tagDetails + "|" +%set_variable_value("$" + $tagStereo + "_LineLegendEntry", $tagEntry) +%set_variable_value("$" + $tagStereo + "_LineLegendDetails", $tagDetails) + !return $tagEntry +!endfunction + +!unquoted procedure $addTagToLegend($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $legendText="", $legendSprite="", $borderStyle="", $borderThickness="") +'' if a combined element tag is defined (e.g. "v1.0&v1.1") then it is typically a merged color, +'' like a new $fontColor="#fdae61" therefore it should be added to the legend +'' and the & combined tags will be not removed +' !if (%strpos($tagStereo, "&") < 0) + !$dummyAlreadyVariables = $setTagLegendVariables($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $legendText, $legendSprite, $borderStyle, $borderThickness) + !$tagCustomLegend = $tagCustomLegend + $tagStereo + "\n" + !$tagMask = $tagLegendMask( $bgColor, $fontColor, $borderColor, $shadowing, $shape, $sprite, $borderStyle, $borderThickness) +%set_variable_value("$" + $tagStereo + "LegendMask", $tagMask) +' !endif +!endprocedure + +!unquoted procedure $addRelTagToLegend($tagStereo, $textColor="", $lineColor="", $lineStyle="", $legendText="", $legendSprite="", $lineThickness="") +'' Arrows have a bug with stereotype/skinparams and cannot combine text colors of one stereotype +'' and the line color of another stereotype. Therefore the text color of one tag and the line color +'' of another tag have to be combined via a "workaround" tag ("v1.0&v1.1"). +'' This workaround tag could be theoretically removed in the legend but after that there would +'' be an inconsistency between the element tags and the rel tags and therefore +'' & combined workaround tags are not removed too (and in unlikely cases the color itself could be changed) +' !if (%strpos($tagStereo, "&") < 0) + !$dummyAlreadyVariables = $setTagRelLegendVariables($tagStereo, $textColor, $lineColor, $lineStyle, $legendText, $legendSprite, $lineThickness) + !$tagCustomLegend = $tagCustomLegend + $tagStereo + "_Line\n" +' !endif +!endprocedure + +!procedure $showActiveLegendEntries($allDefined) + !$brPos = %strpos($allDefined, "\n") + !while ($brPos >= 0) + !$tagStereo = %substr($allDefined, 0, $brPos) + !$allDefined = %substr($allDefined, $brPos+2) + !$brPos = %strpos($allDefined, "\n") + !if (%variable_exists("$" + $tagStereo + "Legend")) + ' is part of legendDetails + !$part1 = %get_variable_value("$" + $tagStereo + "LegendEntry") + !$partSize = "" + !$part2 = %get_variable_value("$" + $tagStereo + "LegendDetails") + !$line = $part1 + $partSize + $part2 +$line + !endif + !endwhile + !if (%strlen($allDefined) > 0) + !$tagStereo = $allDefined + !if (%variable_exists("$" + $tagStereo + "Legend")) + ' is part of legendDetails + !$part1 = %get_variable_value("$" + $tagStereo + "LegendEntry") + !$partSize = "" + !$part2 = %get_variable_value("$" + $tagStereo + "LegendDetails") + !$line = $part1 + $partSize + $part2 +$line + !endif + !endif +!endprocedure + +!function RoundedBoxShape() +!return $ROUNDED_BOX +!endfunction + +!function EightSidedShape() +!return $EIGHT_SIDED +!endfunction + +!function DottedLine() +!return $DOTTED_LINE +!endfunction + +!function DashedLine() +!return $DASHED_LINE +!endfunction + +!function BoldLine() +!return $BOLD_LINE +!endfunction + +!function SolidLine() +!return $SOLID_LINE +!endfunction + +' used by new defined tags +!unquoted procedure AddElementTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $sprite="", $techn="", $legendText="", $legendSprite="", $borderStyle="", $borderThickness="") +$defineSkinparams($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $borderStyle, $borderThickness) + !if ($sprite!="") +%set_variable_value("$" + $tagStereo + "ElementTagSprite", $sprite) + !if ($legendSprite == "") + !$legendSprite = $smallVersionSprite($sprite) + !endif + !endif + !if ($techn != "") +%set_variable_value("$" + $tagStereo + "ElementTagTechn", $techn) + !endif +$addTagToLegend($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $legendText, $legendSprite, $borderStyle, $borderThickness) +!endprocedure + +!unquoted procedure $addElementTagInclReuse($elementName, $tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $sprite="", $techn="", $legendText="", $legendSprite="", $borderStyle="", $borderThickness="") + !$bgColor=$restoreEmpty($elementName, "bgColor", $bgColor, %false()) + !$fontColor=$restoreEmpty($elementName, "fontColor", $fontColor, %false()) + !$borderColor=$restoreEmpty($elementName, "borderColor", $borderColor, %false()) + !$shadowing=$restoreEmpty($elementName, "shadowing", $shadowing, %false()) + !$shape=$restoreEmpty($elementName, "shape", $shape, %false()) + !$sprite=$restoreEmpty($elementName, "sprite", $sprite, %false()) + !$techn=$restoreEmpty($elementName, "techn", $techn, %false()) + ' new style should has its own legend text + ' !$legendText=$restoreEmpty($elementName, "legendText", $legendText, %false()) + !$legendSprite=$restoreEmpty($elementName, "legendSprite", $legendSprite, %false()) + !$borderStyle=$restoreEmpty($elementName, "borderStyle", $borderStyle, %false()) + !$borderThickness=$restoreEmpty($elementName, "borderThickness", $borderThickness, %false()) + + AddElementTag($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $sprite, $techn, $legendText, $legendSprite, $borderStyle, $borderThickness) +!endprocedure + +' used by new defined rel tags +!unquoted procedure AddRelTag($tagStereo, $textColor="", $lineColor="", $lineStyle="", $sprite="", $techn="", $legendText="", $legendSprite="", $lineThickness="") +$defineRelSkinparams($tagStereo, $textColor, $lineColor, $lineStyle, $lineThickness) + !if ($sprite != "") +%set_variable_value("$" + $tagStereo + "RelTagSprite", $sprite) + !if ($legendSprite == "") + ' relation symbols typically 1:1 no additional scale required + !$legendSprite = $sprite + !endif + !endif + !if ($techn != "") +%set_variable_value("$" + $tagStereo + "RelTagTechn", $techn) + !endif +$addRelTagToLegend($tagStereo, $textColor, $lineColor, $lineStyle, $legendText, $legendSprite, $lineThickness) +!endprocedure + +' update the style of existing elements like person, ... +!unquoted procedure UpdateElementStyle($elementName, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $sprite="", $techn="", $legendText="", $legendSprite="", $borderStyle="", $borderThickness="") +!$bgColor=$restoreEmpty($elementName, "bgColor", $bgColor, %true()) +!$fontColor=$restoreEmpty($elementName, "fontColor", $fontColor, %true()) +!$borderColor=$restoreEmpty($elementName, "borderColor", $borderColor, %true()) +!$shadowing=$restoreEmpty($elementName, "shadowing", $shadowing, %true()) +!$shape=$restoreEmpty($elementName, "shape", $shape, %true()) +!$sprite=$restoreEmpty($elementName, "sprite", $sprite, %true()) +!$techn=$restoreEmpty($elementName, "techn", $techn, %true()) +!$legendText=$restoreEmpty($elementName, "legendText", $legendText, %true()) +!$legendSprite=$restoreEmpty($elementName, "legendSprite", $legendSprite, %true()) +!$borderStyle=$restoreEmpty($elementName, "borderStyle", $borderStyle, %true()) +!$borderThickness=$restoreEmpty($elementName, "borderThickness", $borderThickness, %true()) + +$defineSkinparams($elementName, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $borderStyle, $borderThickness) + !if ($sprite != "") +%set_variable_value("$" + $elementName + "ElementTagSprite", $sprite) + !if ($legendSprite == "") + !$legendSprite = $smallVersionSprite($sprite) + !endif + !endif + !if ($techn != "") +%set_variable_value("$" + $elementName + "ElementTagTechn", $techn) + !endif + !$dummyAlreadyVariables = $setTagLegendVariables($elementName, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $legendText, $legendSprite, $borderStyle, $borderThickness) + ' default tags sets at least bgColor and fontColor + !$tagMask = $tagLegendMask("CHANGED", "CHANGED", $borderColor, $shadowing, $shape, $sprite, $borderStyle, $borderThickness) +%set_variable_value("$" + $elementName + "LegendMask", $tagMask) +!endprocedure + +/' @deprecated in favor of UpdateElementStyle '/ +!unquoted procedure UpdateSkinparamsAndLegendEntry($elementName, $bgColor="", $fontColor="", $borderColor="", $shadowing="") +UpdateElementStyle($elementName, $bgColor, $fontColor, $borderColor, $shadowing) +!endprocedure + +' update the style of default relation, it has to set both properties (combined statement not working) +!unquoted procedure UpdateRelStyle($textColor, $lineColor) + !$elementSkin = "skinparam arrow {" + %newline() + !$elementSkin = $elementSkin + " Color " + $lineColor + %newline() + !$elementSkin = $elementSkin + " FontColor " + $textColor + %newline() + !$elementSkin = $elementSkin + "}" + %newline() +$elementSkin +!endprocedure + +!unquoted procedure UpdateLegendTitle($newTitle) + !$LEGEND_TITLE_TEXT = $newTitle +!endprocedure + +' tags/stereotypes have to be delimited with \n +!unquoted procedure SetDefaultLegendEntries($tagStereoEntries) + !$tagDefaultLegend = $tagStereoEntries +!endprocedure + +' Links +' ################################## + +!function $getLink($link) + !if ($link != "") + !return "[[" + $link + "]]" + !else + !return "" + !endif +!endfunction + +' Line breaks +' ################################## + +!unquoted function $breakText($text, $usedNewLine, $widthStr="-1") +!$width = %intval($widthStr) +!$multiLine = "" +!if (%strpos($text, "\n") >= 0) + !while (%strpos($text, "\n") >= 0) + !$brPos = %strpos($text, "\n") + !if ($brPos > 0) + !$multiLine = $multiLine + %substr($text, 0, $brPos) + $usedNewLine + !else + ' non breaking change that newLine breaks with formats can be used with \n\n + !$multiLine = $multiLine + "" + $usedNewLine + !endif + !$text = %substr($text, $brPos+2) + !if (%strlen($text) == 0) + !$text = "" + !endif + !endwhile +!else + !while ($width>0 && %strlen($text) > $width) + !$brPos = $width + !while ($brPos > 0 && %substr($text, $brPos, 1) != ' ') + !$brPos = $brPos - 1 + !endwhile + + !if ($brPos < 1) + !$brPos = %strpos($text, " ") + !else + !endif + + !if ($brPos > 0) + !$multiLine = $multiLine + %substr($text, 0, $brPos) + $usedNewLine + !$text = %substr($text, $brPos + 1) + !else + !$multiLine = $multiLine+ $text + !$text = "" + !endif + !endwhile +!endif +!if (%strlen($text) > 0) + !$multiLine = $multiLine + $text +!endif +!return $multiLine +!endfunction + +!unquoted function $breakLabel($text) +!$usedNewLine = "\n== " +!$multiLine = $breakText($text, $usedNewLine) +!return $multiLine +!endfunction + +!unquoted function $breakDescr($text, $widthStr) + !$usedNewLine = "\n" + !return $breakText($text, $usedNewLine, $widthStr) +!endfunction + +' $breakTechn() supports //...//; $breakNode() in C4_Deployment supports no //....// +!unquoted function $breakTechn($text, $widthStr) + !$usedNewLine = '//\n//' + !return $breakText($text, $usedNewLine, $widthStr) +!endfunction + +' Element base layout +' ################################## + +!function $getElementBase($label, $techn, $descr, $sprite) + !$element = "" + !if ($sprite != "") + !$element = $element + $getSprite($sprite) + !if ($label != "") + !$element = $element + '\n' + !endif + !endif + !if ($label != "") + !$element = $element + '== ' + $breakLabel($label) + !else + !$element = $element + '.' + !endif + !if ($techn != "") + !$element = $element + '\n//[' + $breakTechn($techn, '-1') + ']//' + !endif + !if ($descr != "") + !$element = $element + '\n\n' + $descr + !endif + !return $element +!endfunction + +!function $getElementLine($umlShape, $elementType, $alias, $label, $techn, $descr, $sprite, $tags, $link) + !$sprite=$toElementArg($sprite, $tags, "ElementTagSprite", $elementType) + !$techn=$toElementArg($techn, $tags, "ElementTagTechn", $elementType) + !$baseProp = $getElementBase($label, $techn, $descr, $sprite) + $getProps() + !$stereo = $toStereos($elementType,$tags) + !$calcLink = $getLink($link) + + !$line = $umlShape + " " + %chr(34) + $baseProp + %chr(34) +" " + $stereo + " as " + $alias + $calcLink + !return $line +!endfunction + +' Element properties +' ################################## + +' collect all defined properties as table rows +!global $propTable = "" +!global $propTableCaption = "" +!global $propColCaption = "=" + +!unquoted function SetPropertyHeader($col1Name, $col2Name = "", $col3Name = "", $col4Name = "") + !$propColCaption = "" + !$propTableCaption = "|= " + $col1Name + " |" + !if ($col2Name != "") + !$propTableCaption = $propTableCaption + "= " + $col2Name + " |" + !endif + !if ($col3Name != "") + !$propTableCaption = $propTableCaption + "= " + $col3Name + " |" + !endif + !if ($col4Name != "") + !$propTableCaption = $propTableCaption + "= " + $col4Name + " |" + !endif + !return "" +!endfunction + +!unquoted function WithoutPropertyHeader() + !$propTableCaption = "" + !$propColCaption = "=" + !return "" +!endfunction + +!unquoted function AddProperty($col1, $col2 = "", $col3 = "", $col4 = "") + !if ($propTable == "") + !if ($propTableCaption != "") + !$propTable = $propTableCaption + "\n" + !endif + !else + !$propTable = $propTable + "\n" + !endif + !$propTable = $propTable + "| " + $col1 + " |" + !if ($col2 != "") + !$propTable = $propTable + $propColCaption + " " + $col2 + " |" + !endif + !if ($col3 != "") + !$propTable = $propTable + " " + $col3 + " |" + !endif + !if ($col4 != "") + !$propTable = $propTable + " " + $col4 + " |" + !endif + !return "" +!endfunction + +!unquoted function $getProps($alignedNL = "\n") + !if ($propTable != "") + !$retTable = $alignedNL + $propTable + !$propTable = "" + !return $retTable + !endif + !return "" +!endfunction + +!unquoted function $getProps_L() + !return $getProps("\l") +!endfunction + +!unquoted function $getProps_R() + !return $getProps("\r") +!endfunction + +SetPropertyHeader("Property","Value") + ' Layout ' ################################## -!definelong LAYOUT_AS_SKETCH -skinparam backgroundColor #EEEBDC -skinparam handwritten true -skinparam defaultFontName "Comic Sans MS" -center footer Warning: Created for discussion, needs to be validated -!enddefinelong +!function $getLegendDetailsSize($detailsFormat) + !if $detailsFormat == $LEGEND_DETAILS_NONE + !$size = 0 + !elseif $detailsFormat == $LEGEND_DETAILS_SMALL + !$size = $LEGEND_DETAILS_SMALL_SIZE + !else + !$size = $LEGEND_DETAILS_NORMAL_SIZE + !endif + !return $size +!endfunction + +!procedure $getHideStereotype($hideStereotype) +!if ($hideStereotype == "true") +hide stereotype +!endif +!endprocedure -!define LAYOUT_TOP_DOWN top to bottom direction -!define LAYOUT_LEFT_RIGHT left to right direction +!procedure $getLegendTable($detailsFormat) +!global $LEGEND_DETAILS_SIZE = $getLegendDetailsSize($detailsFormat) +<$colorWithHash(transparent),$colorWithHash(transparent)>|**$LEGEND_TITLE_TEXT ** | +$showActiveLegendEntries($tagDefaultLegend) +$showActiveLegendEntries($tagCustomLegend) +!endprocedure + +!procedure $getLegendArea($areaAlias, $hideStereotype, $details) +$getHideStereotype($hideStereotype) +rectangle $areaAlias<> [ +$getLegendTable($details) +] +!endprocedure + +!procedure HIDE_STEREOTYPE() +hide stereotype +!endprocedure + +!unquoted procedure SET_SKETCH_STYLE($bgColor="_dont_change_", $fontColor="_dont_change_", $warningColor="_dont_change_", $fontName="_dont_change_", $footerWarning="_dont_change_", $footerText="_dont_change_") +!if $bgColor != "_dont_change_" + !global $SKETCH_BG_COLOR = $bgColor +!endif +!if $fontColor != "_dont_change_" + !global $SKETCH_FONT_COLOR = $fontColor +!endif +!if $warningColor != "_dont_change_" + !global $SKETCH_WARNING_COLOR = $warningColor +!endif +!if $fontName != "_dont_change_" + !global $SKETCH_FONT_NAME = $fontName +!endif +!if $footerWarning != "_dont_change_" + !global $SKETCH_FOOTER_WARNING = $footerWarning +!endif +!if $footerText != "_dont_change_" + !global $SKETCH_FOOTER_TEXT = $footerText +!endif +!endprocedure + +!procedure LAYOUT_AS_SKETCH() + skinparam handwritten true +!if $SKETCH_BG_COLOR > "" + skinparam backgroundColor $SKETCH_BG_COLOR +!endif +!if $SKETCH_FONT_COLOR > "" + skinparam footer { + FontColor $SKETCH_FONT_COLOR + } + !if $ARROW_COLOR == "#666666" + !global $ARROW_COLOR = $SKETCH_FONT_COLOR + !global $ARROW_FONT_COLOR = $SKETCH_FONT_COLOR + skinparam arrow { + Color $ARROW_COLOR + FontColor $ARROW_FONT_COLOR + } + !endif + !if $BOUNDARY_COLOR == "#444444" + !global $BOUNDARY_COLOR = $SKETCH_FONT_COLOR + skinparam rectangle<> { + FontColor $BOUNDARY_COLOR + BorderColor $BOUNDARY_COLOR + } + !endif +!endif +!if $SKETCH_FONT_NAMES > "" + skinparam defaultFontName $SKETCH_FONT_NAME +!endif +!if $SKETCH_FOOTER_WARNING > "" || $SKETCH_FOOTER_TEXT > "" + !$line = "footer "+ $SKETCH_FOOTER_WARNING + " " + $SKETCH_FOOTER_TEXT + $line +!endif +!endprocedure + +!global $fix_direction=%false() + +!function $down($start,$end) +!if ($fix_direction) +!return $start+"RIGHT"+$end +!else +!return $start+"DOWN"+$end +!endif +!endfunction + +!function $up($start,$end) +!if ($fix_direction) +!return $start+"LEFT"+$end +!else +!return $start+"UP"+$end +!endif +!endfunction + +!function $left($start,$end) +!if ($fix_direction) +!return $start+"UP"+$end +!else +!return $start+"LEFT"+$end +!endif +!endfunction + +!function $right($start,$end) +!if ($fix_direction) +!return $start+"DOWN"+$end +!else +!return $start+"RIGHT"+$end +!endif +!endfunction + +!procedure LAYOUT_TOP_DOWN() +!global $fix_direction=%false() +top to bottom direction +!endprocedure + +!procedure LAYOUT_LEFT_RIGHT() +!global $fix_direction = %false() +left to right direction +!endprocedure + +!procedure LAYOUT_LANDSCAPE() +!global $fix_direction = %true() +left to right direction +!endprocedure + +' legend details can displayed as Normal(), Small(), None() +!function None() +!return $LEGEND_DETAILS_NONE +!endfunction + +!function Normal() +!return $LEGEND_DETAILS_NORMAL +!endfunction + +!function Small() +!return $LEGEND_DETAILS_SMALL +!endfunction + +' has to be last call in diagram +!unquoted procedure SHOW_LEGEND($hideStereotype="true", $details=Small()) +$getHideStereotype($hideStereotype) +legend right +$getLegendTable($details) +endlegend +!endprocedure + +/' @deprecated in favor of SHOW_LEGEND '/ +!unquoted procedure SHOW_DYNAMIC_LEGEND($hideStereotype="true") +SHOW_LEGEND($hideStereotype) +!endprocedure + +' legend is reserved and cannot be uses as alias of SHOW_FLOATING_LEGEND() therefore +' LEGEND() is introduced. It returns the default name of the floating alias "floating_legend_alias" +' and can be used in the Lay_Distance() calls +!function LEGEND() +!return "floating_legend_alias" +!endfunction + +' enables that legend can be located in drawing area of the diagram. It has to be last call in diagram followed by Lay_Distance() +!unquoted procedure SHOW_FLOATING_LEGEND($alias=LEGEND(), $hideStereotype="true", $details=Small()) +$getLegendArea($alias, $hideStereotype, $details) +!endprocedure ' Boundaries ' ################################## -!define Boundary(e_alias, e_label) rectangle "==e_label" <> as e_alias -!define Boundary(e_alias, e_label, e_type) rectangle "==e_label\n[e_type]" <> as e_alias +!unquoted procedure UpdateBoundaryStyle($elementName="", $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $type="", $legendText="", $borderStyle="", $borderThickness="", $sprite="", $legendSprite="") + !if ($elementName != "") + !$elementBoundary = $elementName + '_boundary' + UpdateElementStyle($elementBoundary, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $sprite, $type, $legendText, $legendSprite, $borderStyle, $borderThickness) + !else + UpdateElementStyle("boundary", $bgColor, $fontColor, $borderColor, $shadowing, $shape, $sprite, $type, $legendText, $legendSprite, $borderStyle, $borderThickness) + ' simulate color inheritance + UpdateBoundaryStyle("enterprise", $bgColor, $fontColor, $borderColor, $shadowing, $shape, "Enterprise", "", $borderStyle, $borderThickness, $sprite, $legendSprite) + UpdateBoundaryStyle("system", $bgColor, $fontColor, $borderColor, $shadowing, $shape, "System", "", $borderStyle, $borderThickness, $sprite, $legendSprite) + UpdateBoundaryStyle("container", $bgColor, $fontColor, $borderColor, $shadowing, $shape, "Container", "", $borderStyle, $borderThickness, $sprite, $legendSprite) + !endif +!endprocedure + +!unquoted procedure AddBoundaryTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $type="", $legendText="", $borderStyle="", $borderThickness="", $sprite="", $legendSprite="") + !$tagBoundary = $tagStereo + '_boundary' + AddElementTag($tagBoundary, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $sprite, $type, $legendText, $legendSprite, $borderStyle, $borderThickness) +!endprocedure + +' add _boundary to all tags that short tag version can be used +!unquoted function $addBoundaryPostfix($tags) + !if (%strlen($tags) == 0) + !return '' + !endif + !$boundaryTags = '' + !$brPos = %strpos($tags, "+") + !while ($brPos >= 0) + !$tag = %substr($tags, 0, $brPos) + !$boundaryTags = $boundaryTags + $tag + '_boundary+' + !$tags = %substr($tags, $brPos+1) + !$brPos = %strpos($tags, "+") + !endwhile + !if (%strlen($tags) > 0) + !$boundaryTags = $boundaryTags + $tags + '_boundary' + !endif + !return $boundaryTags +!endfunction + +!function $getBoundary($label, $type, $descr, $sprite) + !$line = '== ' + !if ($sprite != "") + ' add sprite in label line that it is more compact + !$line = $line + $getSprite($smallVersionSprite($sprite, $BOUNDARY_IMAGE_SIZE_FACTOR)) + ' ' + !endif + !$line = $line + $breakLabel($label) + !if ($type != "") + !$line = $line + '\n[' + $type + ']' + !endif + !if ($descr != "") + !$line = $line + '\n\n' + $breakDescr($descr, $BOUNDARY_DESCR_MAX_CHAR_WIDTH) + !endif + !return $line +!endfunction + +!unquoted procedure Boundary($alias, $label, $type="", $tags="", $link="", $descr = "") +!$boundaryTags = $addBoundaryPostfix($tags) +' boundary $type reuses $techn definition of $boundaryTags +!$type=$toElementArg($type, $boundaryTags, "ElementTagTechn", "boundary") +!$sprite=$toElementArg("", $boundaryTags, "ElementTagSprite", "boundary") +rectangle "$getBoundary($label, $type, $descr, $sprite)" $toStereos("boundary", $boundaryTags) as $alias $getLink($link) +!endprocedure + +' Boundary Styling +UpdateBoundaryStyle("", $bgColor=$BOUNDARY_BG_COLOR, $fontColor=$BOUNDARY_COLOR, $borderColor=$BOUNDARY_COLOR, $borderStyle=DashedLine(), $legendText="$BOUNDARY_LEGEND_TEXT") + +' Index +' ################################## + +' Dynamic/Sequence diagram supports (automatically) numbered interactions: +' preferred function calls +' (Uppercase) LastIndex(): return the last used index (function which can be used as argument) +' (Uppercase) Index($offset=1): returns current index and calculates next index (function which can be used as argument) +' (Uppercase) SetIndex($new_index): returns new set index and calculates next index (function which can be used as argument) + +' old procedures calls +' (lowercase) increment($offset=1): increase current index (procedure which has no direct output) +' (lowercase) setIndex($new_index): set the new index (procedure which has no direct output) + +!$lastIndex = 0 +!$index = 1 + +!procedure increment($offset=1) + !$lastIndex = $index + !$index = $index + $offset +!endprocedure + +!procedure setIndex($new_index) + !$lastIndex = $index + !$index = $new_index +!endprocedure + +!function Index($offset=1) + !$lastIndex = $index + !$index = $lastIndex + $offset + !return $lastIndex +!endfunction + +!function LastIndex() + !return $lastIndex +!endfunction + +!function SetIndex($new_index, $offset=1) + !$lastIndex = $new_index + !$index = $new_index + $offset + !return $lastIndex +!endfunction + +!unquoted function $getPrefix($index) + !if ($index == "") + !$pre = Index() + ": " + !else + !$pre = $index + ": " + !endif + !return $pre +!endfunction ' Relationship ' ################################## -!define Rel_(e_alias1, e_alias2, e_label, e_direction="") e_alias1 e_direction e_alias2 : "===e_label" -!define Rel_(e_alias1, e_alias2, e_label, e_techn, e_direction="") e_alias1 e_direction e_alias2 : "===e_label\n//[e_techn]//" +!function $getRel($direction, $alias1, $alias2, $label, $techn, $descr, $sprite, $tags, $link) + !$sprite = $toRelArg($sprite, $tags, "RelTagSprite") + !$techn = $toRelArg($techn, $tags, "RelTagTechn") + !$rel = $alias1 + ' ' + $direction + ' ' + $alias2 + !if ($tags != "") + !$rel = $rel + ' ' + $toStereos($tags) + !endif + !$rel = $rel + ' : ' + !if ($link != "") + !$rel = $rel + '**[[' + $link + ' ' + !endif + !if ($sprite != "") + !$rel = $rel + $getSprite($sprite) + !if ($label != "") + !$rel = $rel + ' ' + !endif + !endif + !if ($link != "") + !$usedNewLine = ']]**\n**[[' + $link + ' ' + ' if sprite and label is empty than the link url is shown (otherwise link cannot be activated at all) + !$rel = $rel + $breakText($label, $usedNewLine) + ']]**' + !else + !if ($label != "") + !$usedNewLine = '**\n**' + !$rel = $rel + '**' + $breakText($label, $usedNewLine) + '**' + !else + !$rel = $rel + '.' + !endif + !endif + !if ($techn != "") + ' line break is not deterministic, calculate it + !$rel = $rel + '\n//[' + $breakTechn($techn, $REL_TECHN_MAX_CHAR_WIDTH) + ']//' + !endif + !if ($descr != "") + ' line break is not deterministic, calculate it + !$rel = $rel + '\n\n' + $breakDescr($descr, $REL_DESCR_MAX_CHAR_WIDTH) + !endif + !$prop = $getProps() + !if ($prop != "") + ' reuse table + !$rel = $rel + $prop + !endif + !return $rel +!endfunction + +!unquoted procedure Rel_($alias1, $alias2, $label, $direction) +$getRel($direction, $alias1, $alias2, $label, "", "", "", "", "") +!endprocedure +!unquoted procedure Rel_($alias1, $alias2, $label, $techn, $direction) +$getRel($direction, $alias1, $alias2, $label, $techn, "", "", "", "") +!endprocedure -!define Rel(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-->") -!define Rel(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-->") +!unquoted procedure Rel($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure -!define Rel_Back(e_to, e_from, e_label) Rel_(e_to, e_from, e_label, "<--") -!define Rel_Back(e_to, e_from, e_label, e_techn) Rel_(e_to, e_from, e_label, e_techn, "<--") +!unquoted procedure BiRel($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("<<-->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure -!define Rel_Neighbor(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "->") -!define Rel_Neighbor(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "->") +!unquoted procedure Rel_Back($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("<<--", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure -!define Rel_Back_Neighbor(e_to, e_from, e_label) Rel_(e_to, e_from, e_label, "<-") -!define Rel_Back_Neighbor(e_to, e_from, e_label, e_techn) Rel_(e_to, e_from, e_label, e_techn, "<-") +!unquoted procedure Rel_Neighbor($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure -!define Rel_D(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-DOWN->") -!define Rel_D(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-DOWN->") -!define Rel_Down(e_from,e_to, e_label) Rel_D(e_from,e_to, e_label) -!define Rel_Down(e_from,e_to, e_label, e_techn) Rel_D(e_from,e_to, e_label, e_techn) +!unquoted procedure BiRel_Neighbor($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("<<->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure -!define Rel_U(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-UP->") -!define Rel_U(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-UP->") -!define Rel_Up(e_from,e_to, e_label) Rel_U(e_from,e_to, e_label) -!define Rel_Up(e_from,e_to, e_label, e_techn) Rel_U(e_from,e_to, e_label, e_techn) +!unquoted procedure Rel_Back_Neighbor($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("<<-", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure -!define Rel_L(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-LEFT->") -!define Rel_L(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-LEFT->") -!define Rel_Left(e_from,e_to, e_label) Rel_L(e_from,e_to, e_label) -!define Rel_Left(e_from,e_to, e_label, e_techn) Rel_L(e_from,e_to, e_label, e_techn) +!unquoted procedure Rel_D($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel($down("-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure +!unquoted procedure Rel_Down($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel($down("-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure -!define Rel_R(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-RIGHT->") -!define Rel_R(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-RIGHT->") -!define Rel_Right(e_from,e_to, e_label) Rel_R(e_from,e_to, e_label) -!define Rel_Right(e_from,e_to, e_label, e_techn) Rel_R(e_from,e_to, e_label, e_techn) +!unquoted procedure BiRel_D($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel($down("<<-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure +!unquoted procedure BiRel_Down($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel($down("<<-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure Rel_U($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel($up("-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure +!unquoted procedure Rel_Up($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel($up("-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure BiRel_U($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel($up("<<-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure +!unquoted procedure BiRel_Up($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel($up("<<-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure Rel_L($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel($left("-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure +!unquoted procedure Rel_Left($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel($left("-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure BiRel_L($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel($left("<<-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure +!unquoted procedure BiRel_Left($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel($left("<<-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure Rel_R($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel($right("-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure +!unquoted procedure Rel_Right($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel($right("-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure BiRel_R($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel($right("<<-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure +!unquoted procedure BiRel_Right($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel($right("<<-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure ' Layout Helpers ' ################################## -!define Lay_D(e_from, e_to) e_from -[hidden]D- e_to -!define Lay_U(e_from, e_to) e_from -[hidden]U- e_to -!define Lay_R(e_from, e_to) e_from -[hidden]R- e_to -!define Lay_L(e_from, e_to) e_from -[hidden]L- e_to \ No newline at end of file +!function $getHiddenLine($distance) + !return '-[hidden]' + %substr('------------', 0, %intval($distance) + 1) +!endfunction + +!unquoted procedure Lay_D($from, $to) +$from -[hidden]D- $to +!endprocedure +!unquoted procedure Lay_Down($from, $to) +$from -[hidden]D- $to +!endprocedure + +!unquoted procedure Lay_U($from, $to) +$from -[hidden]U- $to +!endprocedure +!unquoted procedure Lay_Up($from, $to) +$from -[hidden]U- $to +!endprocedure + +!unquoted procedure Lay_R($from, $to) +$from -[hidden]R- $to +!endprocedure +!unquoted procedure Lay_Right($from, $to) +$from -[hidden]R- $to +!endprocedure + +!unquoted procedure Lay_L($from, $to) +$from -[hidden]L- $to +!endprocedure +!unquoted procedure Lay_Left($from, $to) +$from -[hidden]L- $to +!endprocedure + +' PlantUML bug: lines which does "not match" with the orientation/direction of the diagram +' use the same length therefore the method offers no direction at all. +' If a direction is required the Lay_...() methods can be used +!unquoted procedure Lay_Distance($from, $to, $distance="0") +$from $getHiddenLine($distance) $to +!endprocedure diff --git a/C4_Component.puml b/C4_Component.puml index 40a8a24e..dbee7b1c 100644 --- a/C4_Component.puml +++ b/C4_Component.puml @@ -1,6 +1,9 @@ -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml -' uncomment the following line and comment the first to use locally -' !include C4_Container.puml +' convert it with additional command line argument -DRELATIVE_INCLUDE="relative/absolute" to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include ./C4_Container.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!endif ' Scope: A single container. ' Primary elements: Components within the container in scope. @@ -10,46 +13,78 @@ ' Colors ' ################################## -!define COMPONENT_BG_COLOR #85BBF0 +!$COMPONENT_FONT_COLOR ?= "#000000" +!$COMPONENT_BG_COLOR ?= "#85BBF0" +!$COMPONENT_BORDER_COLOR ?= "#78A8D8" + +!$EXTERNAL_COMPONENT_LEGEND_TEXT ?= "external component" +!$EXTERNAL_COMPONENT_FONT_COLOR ?= $COMPONENT_FONT_COLOR +!$EXTERNAL_COMPONENT_BG_COLOR ?= "#CCCCCC" +!$EXTERNAL_COMPONENT_BORDER_COLOR ?= "#BFBFBF" + +' Labels +' ################################## + +!$COMPONENT_LEGEND_TEXT ?= "component" +!$EXTERNAL_COMPONENT_LEGEND_TEXT ?= "external component" ' Styling ' ################################## -skinparam rectangle<> { - StereotypeFontColor ELEMENT_FONT_COLOR - FontColor #000000 - BackgroundColor COMPONENT_BG_COLOR - BorderColor #78A8D8 -} +UpdateElementStyle("component", $COMPONENT_BG_COLOR, $COMPONENT_FONT_COLOR, $COMPONENT_BORDER_COLOR, $legendText="$COMPONENT_LEGEND_TEXT") +UpdateElementStyle("external_component", $EXTERNAL_COMPONENT_BG_COLOR, $EXTERNAL_COMPONENT_FONT_COLOR, $EXTERNAL_COMPONENT_BORDER_COLOR, $legendText="$EXTERNAL_COMPONENT_LEGEND_TEXT") -skinparam database<> { - StereotypeFontColor ELEMENT_FONT_COLOR - FontColor #000000 - BackgroundColor COMPONENT_BG_COLOR - BorderColor #78A8D8 -} +' shortcuts with default colors +!unquoted procedure AddComponentTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $sprite="", $techn="", $legendText="", $legendSprite="", $borderStyle="", $borderThickness="") + $addElementTagInclReuse("component", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $sprite, $techn, $legendText, $legendSprite, $borderStyle, $borderThickness) +!endprocedure +!unquoted procedure AddExternalComponentTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $sprite="", $techn="", $legendText="", $legendSprite="", $borderStyle="", $borderThickness="") + $addElementTagInclReuse("external_component", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $sprite, $techn, $legendText, $legendSprite, $borderStyle, $borderThickness) +!endprocedure ' Layout ' ################################## -!definelong LAYOUT_WITH_LEGEND +SetDefaultLegendEntries("person\nsystem\ncontainer\ncomponent\nexternal_person\nexternal_system\nexternal_container\nexternal_component\nenterprise_boundary\nsystem_boundary\ncontainer_boundary\nboundary") + +!procedure LAYOUT_WITH_LEGEND() hide stereotype legend right -|= |= Type | -| | person | -| | external person | -| | system | -| | external system | -| | container | -| | component | +|**Legend** | +|<$PERSON_BG_COLOR> person | +|<$SYSTEM_BG_COLOR> system | +|<$CONTAINER_BG_COLOR> container | +|<$COMPONENT_BG_COLOR> component | +|<$EXTERNAL_PERSON_BG_COLOR> external person | +|<$EXTERNAL_SYSTEM_BG_COLOR> external system | +|<$EXTERNAL_CONTAINER_BG_COLOR> external container | +|<$EXTERNAL_COMPONENT_BG_COLOR> external component | endlegend -!enddefinelong +!endprocedure ' Elements ' ################################## -!define Component(e_alias, e_label, e_techn) rectangle "==e_label\n//[e_techn]//" <> as e_alias -!define Component(e_alias, e_label, e_techn, e_descr) rectangle "==e_label\n//[e_techn]//\n\n e_descr" <> as e_alias +!unquoted procedure Component($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="", $baseShape="rectangle") + $getElementLine($baseShape, "component", $alias, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure ComponentDb($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="") + $getElementLine("database", "component", $alias, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure ComponentQueue($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="") + $getElementLine("queue", "component", $alias, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure Component_Ext($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="", $baseShape="rectangle") + $getElementLine($baseShape, "external_component", $alias, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure ComponentDb_Ext($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="") + $getElementLine("database", "external_component", $alias, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure -!define ComponentDb(e_alias, e_label, e_techn) database "==e_label\n//[e_techn]//" <> as e_alias -!define ComponentDb(e_alias, e_label, e_techn, e_descr) database "==e_label\n//[e_techn]//\n\n e_descr" <> as e_alias +!unquoted procedure ComponentQueue_Ext($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="") + $getElementLine("queue", "external_component", $alias, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure diff --git a/C4_Container.puml b/C4_Container.puml index 2bc697cb..fdc25975 100644 --- a/C4_Container.puml +++ b/C4_Container.puml @@ -1,6 +1,9 @@ -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml -' uncomment the following line and comment the first to use locally -' !include C4_Context.puml +' convert it with additional command line argument -DRELATIVE_INCLUDE="relative/absolute" to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include ./C4_Context.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml +!endif ' Scope: A single software system. ' Primary elements: Containers within the software system in scope. @@ -10,50 +13,99 @@ ' Colors ' ################################## -!define CONTAINER_BG_COLOR #438DD5 +!$CONTAINER_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$CONTAINER_BG_COLOR ?= "#438DD5" +!$CONTAINER_BORDER_COLOR ?= "#3C7FC0" + +!$CONTAINER_BOUNDARY_COLOR ?= $BOUNDARY_COLOR +!$CONTAINER_BOUNDARY_BG_COLOR ?= $BOUNDARY_BG_COLOR +!$CONTAINER_BOUNDARY_BORDER_STYLE ?= $BOUNDARY_BORDER_STYLE + +!$EXTERNAL_CONTAINER_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$EXTERNAL_CONTAINER_BG_COLOR ?= "#B3B3B3" +!$EXTERNAL_CONTAINER_BORDER_COLOR ?= "#A6A6A6" + +' Labels +' ################################## + +!$CONTAINER_LEGEND_TEXT ?= "container" +!$CONTAINER_BOUNDARY_TYPE ?= "container" +!$CONTAINER_BOUNDARY_LEGEND_TEXT ?= "container boundary" +!$EXTERNAL_CONTAINER_LEGEND_TEXT ?= "external container" ' Styling ' ################################## +UpdateElementStyle("container", $CONTAINER_BG_COLOR, $CONTAINER_FONT_COLOR, $CONTAINER_BORDER_COLOR, $legendText="$CONTAINER_LEGEND_TEXT") +UpdateElementStyle("external_container", $EXTERNAL_CONTAINER_BG_COLOR, $EXTERNAL_CONTAINER_FONT_COLOR, $EXTERNAL_CONTAINER_BORDER_COLOR, $legendText="$EXTERNAL_CONTAINER_LEGEND_TEXT") + +UpdateBoundaryStyle("container", $bgColor=$CONTAINER_BOUNDARY_BG_COLOR, $fontColor=$CONTAINER_BOUNDARY_COLOR, $borderColor=$CONTAINER_BOUNDARY_COLOR, $type="$CONTAINER_BOUNDARY_TYPE", $legendText="$CONTAINER_BOUNDARY_LEGEND_TEXT") -skinparam rectangle<> { - StereotypeFontColor ELEMENT_FONT_COLOR - FontColor ELEMENT_FONT_COLOR - BackgroundColor CONTAINER_BG_COLOR - BorderColor #3C7FC0 -} +' shortcuts with default colors +!unquoted procedure AddContainerTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $sprite="", $techn="", $legendText="", $legendSprite="", $borderStyle="", $borderThickness="") + $addElementTagInclReuse("container", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $sprite, $techn, $legendText, $legendSprite, $borderStyle, $borderThickness) +!endprocedure +!unquoted procedure AddExternalContainerTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $sprite="", $techn="", $legendText="", $legendSprite="", $borderStyle="", $borderThickness="") + $addElementTagInclReuse("external_container", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $sprite, $techn, $legendText, $legendSprite, $borderStyle, $borderThickness) +!endprocedure -skinparam database<> { - StereotypeFontColor ELEMENT_FONT_COLOR - FontColor ELEMENT_FONT_COLOR - BackgroundColor CONTAINER_BG_COLOR - BorderColor #3C7FC0 -} +!unquoted procedure UpdateContainerBoundaryStyle($bgColor=$CONTAINER_BOUNDARY_BG_COLOR, $fontColor=$CONTAINER_BOUNDARY_COLOR, $borderColor=$CONTAINER_BOUNDARY_COLOR, $shadowing="", $shape="", $type="Container", $legendText="", $borderStyle="", $borderThickness="", $sprite="", $legendSprite="") + UpdateBoundaryStyle("container", $bgColor, $fontColor, $borderColor, $shadowing, $shape, $type, $legendText, $borderStyle, $borderThickness, $sprite, $legendSprite) +!endprocedure ' Layout ' ################################## -!definelong LAYOUT_WITH_LEGEND +SetDefaultLegendEntries("person\nsystem\ncontainer\nexternal_person\nexternal_system\nexternal_container\nenterprise_boundary\nsystem_boundary\ncontainer_boundary\nboundary") + +!procedure LAYOUT_WITH_LEGEND() hide stereotype legend right -|= |= Type | -| | person | -| | external person | -| | system | -| | external system | -| | container | +|**Legend** | +|<$PERSON_BG_COLOR> person | +|<$SYSTEM_BG_COLOR> system | +|<$CONTAINER_BG_COLOR> container | +|<$EXTERNAL_PERSON_BG_COLOR> external person | +|<$EXTERNAL_SYSTEM_BG_COLOR> external system | +|<$EXTERNAL_CONTAINER_BG_COLOR> external container | endlegend -!enddefinelong +!endprocedure ' Elements ' ################################## -!define Container(e_alias, e_label, e_techn) rectangle "==e_label\n//[e_techn]//" <> as e_alias -!define Container(e_alias, e_label, e_techn, e_descr) rectangle "==e_label\n//[e_techn]//\n\n e_descr" <> as e_alias +!unquoted procedure Container($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="", $baseShape="rectangle") + $getElementLine($baseShape , "container", $alias, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure ContainerDb($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="") + $getElementLine("database", "container", $alias, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure ContainerQueue($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="") + $getElementLine("queue", "container", $alias, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure Container_Ext($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="", $baseShape="rectangle") + $getElementLine($baseShape , "external_container", $alias, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure ContainerDb_Ext($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="") + $getElementLine("database", "external_container", $alias, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure -!define ContainerDb(e_alias, e_label, e_techn) database "==e_label\n//[e_techn]//" <> as e_alias -!define ContainerDb(e_alias, e_label, e_techn, e_descr) database "==e_label\n//[e_techn]//\n\n e_descr" <> as e_alias +!unquoted procedure ContainerQueue_Ext($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="") + $getElementLine("queue", "external_container", $alias, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure ' Boundaries ' ################################## -!define Container_Boundary(e_alias, e_label) Boundary(e_alias, e_label, "Container") \ No newline at end of file +!unquoted procedure Container_Boundary($alias, $label, $tags="", $link="", $descr = "") + !if ($tags != "") + !$allTags = $tags + '+container' + !else + !$allTags = 'container' + !endif + ' $type defined via $tag style + Boundary($alias, $label, "", $allTags, $link, $descr) +!endprocedure diff --git a/C4_Context.puml b/C4_Context.puml index a28a9cbc..8348f667 100644 --- a/C4_Context.puml +++ b/C4_Context.puml @@ -1,6 +1,9 @@ -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml -' uncomment the following line and comment the first to use locally -' !include C4.puml +' convert it with additional command line argument -DRELATIVE_INCLUDE="relative/absolute" to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include ./C4.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml +!endif ' Scope: A single software system. ' Primary elements: The software system in scope. @@ -10,93 +13,436 @@ ' Colors ' ################################## -!define PERSON_BG_COLOR #08427B -!define EXTERNAL_PERSON_BG_COLOR #686868 -!define SYSTEM_BG_COLOR #1168BD -!define EXTERNAL_SYSTEM_BG_COLOR #999999 +!$PERSON_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$PERSON_BG_COLOR ?= "#08427B" +!$PERSON_BORDER_COLOR ?= "#073B6F" + +!$EXTERNAL_PERSON_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$EXTERNAL_PERSON_BG_COLOR ?= "#686868" +!$EXTERNAL_PERSON_BORDER_COLOR ?= "#8A8A8A" + +!$SYSTEM_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$SYSTEM_BG_COLOR ?= "#1168BD" +!$SYSTEM_BORDER_COLOR ?= "#3C7FC0" + +!$SYSTEM_BOUNDARY_COLOR ?= $BOUNDARY_COLOR +!$SYSTEM_BOUNDARY_BG_COLOR ?= $BOUNDARY_BG_COLOR +!$SYSTEM_BOUNDARY_BORDER_STYLE ?= $BOUNDARY_BORDER_STYLE + +!$EXTERNAL_SYSTEM_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$EXTERNAL_SYSTEM_BG_COLOR ?= "#999999" +!$EXTERNAL_SYSTEM_BORDER_COLOR ?= "#8A8A8A" + +!$ENTERPRISE_BOUNDARY_COLOR ?= $BOUNDARY_COLOR +!$ENTERPRISE_BOUNDARY_BG_COLOR ?= $BOUNDARY_BG_COLOR +!$ENTERPRISE_BOUNDARY_BORDER_STYLE ?= $BOUNDARY_BORDER_STYLE + +' Labels +' ################################## + +!$PERSON_LEGEND_TEXT ?= "person" +!$EXTERNAL_PERSON_LEGEND_TEXT ?= "external person" + +!$SYSTEM_LEGEND_TEXT ?= "system" +!$SYSTEM_BOUNDARY_TYPE ?= "system" +!$SYSTEM_BOUNDARY_LEGEND_TEXT ?= "system boundary" +!$EXTERNAL_SYSTEM_LEGEND_TEXT ?= "external system" + +!$ENTERPRISE_BOUNDARY_TYPE ?= "enterprise" +!$ENTERPRISE_BOUNDARY_LEGEND_TEXT ?= "enterprise boundary" ' Styling ' ################################## -skinparam rectangle<> { - StereotypeFontColor ELEMENT_FONT_COLOR - FontColor ELEMENT_FONT_COLOR - BackgroundColor PERSON_BG_COLOR - BorderColor #073B6F -} +UpdateElementStyle("person", $PERSON_BG_COLOR, $PERSON_FONT_COLOR, $PERSON_BORDER_COLOR, $legendText="$PERSON_LEGEND_TEXT") +UpdateElementStyle("external_person", $EXTERNAL_PERSON_BG_COLOR, $EXTERNAL_PERSON_FONT_COLOR, $EXTERNAL_PERSON_BORDER_COLOR, $legendText="$EXTERNAL_PERSON_LEGEND_TEXT") +UpdateElementStyle("system", $SYSTEM_BG_COLOR, $SYSTEM_FONT_COLOR, $SYSTEM_BORDER_COLOR, $legendText="$SYSTEM_LEGEND_TEXT") +UpdateElementStyle("external_system", $EXTERNAL_SYSTEM_BG_COLOR, $EXTERNAL_SYSTEM_FONT_COLOR, $EXTERNAL_SYSTEM_BORDER_COLOR, $legendText="$EXTERNAL_SYSTEM_LEGEND_TEXT") -skinparam rectangle<> { - StereotypeFontColor ELEMENT_FONT_COLOR - FontColor ELEMENT_FONT_COLOR - BackgroundColor EXTERNAL_PERSON_BG_COLOR - BorderColor #8A8A8A -} +UpdateBoundaryStyle("system", $bgColor=$SYSTEM_BOUNDARY_BG_COLOR, $fontColor=$SYSTEM_BOUNDARY_COLOR, $borderColor=$SYSTEM_BOUNDARY_COLOR, $type="$SYSTEM_BOUNDARY_TYPE", $legendText="$SYSTEM_BOUNDARY_LEGEND_TEXT") +UpdateBoundaryStyle("enterprise", $bgColor=$ENTERPRISE_BOUNDARY_BG_COLOR, $fontColor=$ENTERPRISE_BOUNDARY_COLOR, $borderColor=$ENTERPRISE_BOUNDARY_COLOR, $type="$ENTERPRISE_BOUNDARY_TYPE", $legendText="$ENTERPRISE_BOUNDARY_LEGEND_TEXT") + +' shortcuts with default colors +!unquoted procedure AddPersonTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $sprite="", $legendText="", $legendSprite="", $type="", $borderStyle="", $borderThickness="") + $addElementTagInclReuse("person", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $sprite, $type, $legendText, $legendSprite, $borderStyle, $borderThickness) +!endprocedure +!unquoted procedure AddExternalPersonTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $sprite="", $legendText="", $legendSprite="", $type="", $borderStyle="", $borderThickness="") + $addElementTagInclReuse("external_person", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $sprite, $type, $legendText, $legendSprite, $borderStyle, $borderThickness) +!endprocedure +!unquoted procedure AddSystemTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $sprite="", $legendText="", $legendSprite="", $type="", $borderStyle="", $borderThickness="") + $addElementTagInclReuse("system", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $sprite, $type, $legendText, $legendSprite, $borderStyle, $borderThickness) +!endprocedure +!unquoted procedure AddExternalSystemTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $sprite="", $legendText="", $legendSprite="", $type="", $borderStyle="", $borderThickness="") + $addElementTagInclReuse("external_system", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $sprite, $type, $legendText, $legendSprite, $borderStyle, $borderThickness) +!endprocedure + +!unquoted procedure UpdateEnterpriseBoundaryStyle($bgColor=$ENTERPRISE_BOUNDARY_BG_COLOR, $fontColor=$ENTERPRISE_BOUNDARY_COLOR, $borderColor=$ENTERPRISE_BOUNDARY_COLOR, $shadowing="", $shape="", $type="Enterprise", $legendText="", $borderStyle="", $borderThickness="", $sprite="", $legendSprite="") + UpdateBoundaryStyle("enterprise", $bgColor, $fontColor, $borderColor, $shadowing, $shape, $type, $legendText, $borderStyle, $borderThickness, $sprite, $legendSprite) +!endprocedure +!unquoted procedure UpdateSystemBoundaryStyle($bgColor=$SYSTEM_BOUNDARY_BG_COLOR, $fontColor=$SYSTEM_BOUNDARY_COLOR, $borderColor=$SYSTEM_BOUNDARY_COLOR, $shadowing="", $shape="", $type="System", $legendText="", $borderStyle="", $borderThickness="", $sprite="", $legendSprite="") + UpdateBoundaryStyle("system", $bgColor, $fontColor, $borderColor, $shadowing, $shape, $type, $legendText, $borderStyle, $borderThickness, $sprite, $legendSprite) +!endprocedure -skinparam rectangle<> { - StereotypeFontColor ELEMENT_FONT_COLOR - FontColor ELEMENT_FONT_COLOR - BackgroundColor SYSTEM_BG_COLOR - BorderColor #3C7FC0 +' Sprites +' ################################## + +sprite $person [48x48/16] { +000000000000000000000000000000000000000000000000 +000000000000000000000000000000000000000000000000 +0000000000000000000049BCCA7200000000000000000000 +0000000000000000006EFFFFFFFFB3000000000000000000 +00000000000000001CFFFFFFFFFFFF700000000000000000 +0000000000000001EFFFFFFFFFFFFFF80000000000000000 +000000000000000CFFFFFFFFFFFFFFFF6000000000000000 +000000000000007FFFFFFFFFFFFFFFFFF100000000000000 +00000000000001FFFFFFFFFFFFFFFFFFF900000000000000 +00000000000006FFFFFFFFFFFFFFFFFFFF00000000000000 +0000000000000BFFFFFFFFFFFFFFFFFFFF40000000000000 +0000000000000EFFFFFFFFFFFFFFFFFFFF70000000000000 +0000000000000FFFFFFFFFFFFFFFFFFFFF80000000000000 +0000000000000FFFFFFFFFFFFFFFFFFFFF80000000000000 +0000000000000DFFFFFFFFFFFFFFFFFFFF60000000000000 +0000000000000AFFFFFFFFFFFFFFFFFFFF40000000000000 +00000000000006FFFFFFFFFFFFFFFFFFFE00000000000000 +00000000000000EFFFFFFFFFFFFFFFFFF800000000000000 +000000000000007FFFFFFFFFFFFFFFFFF100000000000000 +000000000000000BFFFFFFFFFFFFFFFF5000000000000000 +0000000000000001DFFFFFFFFFFFFFF70000000000000000 +00000000000000000BFFFFFFFFFFFF500000000000000000 +0000000000000000005DFFFFFFFFA1000000000000000000 +0000000000000000000037ABB96100000000000000000000 +000000000000000000000000000000000000000000000000 +000000000000000000000000000000000000000000000000 +000000000000025788300000000005886410000000000000 +000000000007DFFFFFFD9643347BFFFFFFFB400000000000 +0000000004EFFFFFFFFFFFFFFFFFFFFFFFFFFB1000000000 +000000007FFFFFFFFFFFFFFFFFFFFFFFFFFFFFD200000000 +00000006FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFE10000000 +0000003FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB0000000 +000000BFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF5000000 +000003FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFD000000 +000009FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF200000 +00000DFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF600000 +00000FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF800000 +00001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFA00000 +00001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB00000 +00001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB00000 +00001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB00000 +00001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFA00000 +00000EFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF700000 +000006FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFE100000 +0000008FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFD3000000 +000000014555555555555555555555555555555300000000 +000000000000000000000000000000000000000000000000 +000000000000000000000000000000000000000000000000 } -skinparam rectangle<> { - StereotypeFontColor ELEMENT_FONT_COLOR - FontColor ELEMENT_FONT_COLOR - BackgroundColor EXTERNAL_SYSTEM_BG_COLOR - BorderColor #8A8A8A +sprite $person2 [48x48/16] { +0000000000000000000049BCCA7200000000000000000000 +0000000000000000006EFFFFFFFFB3000000000000000000 +00000000000000001CFFFFFFFFFFFF700000000000000000 +0000000000000001EFFFFFFFFFFFFFF80000000000000000 +000000000000000CFFFFFFFFFFFFFFFF6000000000000000 +000000000000007FFFFFFFFFFFFFFFFFF100000000000000 +00000000000001FFFFFFFFFFFFFFFFFFF900000000000000 +00000000000006FFFFFFFFFFFFFFFFFFFF00000000000000 +0000000000000BFFFFFFFFFFFFFFFFFFFF40000000000000 +0000000000000EFFFFFFFFFFFFFFFFFFFF70000000000000 +0000000000000FFFFFFFFFFFFFFFFFFFFF80000000000000 +0000000000000FFFFFFFFFFFFFFFFFFFFF80000000000000 +0000000000000DFFFFFFFFFFFFFFFFFFFF60000000000000 +0000000000000AFFFFFFFFFFFFFFFFFFFF40000000000000 +00000000000006FFFFFFFFFFFFFFFFFFFE00000000000000 +00000000000000EFFFFFFFFFFFFFFFFFF800000000000000 +000000000000007FFFFFFFFFFFFFFFFFF100000000000000 +000000000000000BFFFFFFFFFFFFFFFF5000000000000000 +0000000000000001DFFFFFFFFFFFFFF70000000000000000 +00000000000000000BFFFFFFFFFFFF500000000000000000 +0000000000000000005DFFFFFFFFA1000000000000000000 +0000000000000000000037ABB96100000000000000000000 +000000000002578888300000000005888864100000000000 +0000000007DFFFFFFFFD9643347BFFFFFFFFFB4000000000 +00000004EFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB10000000 +0000007FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFD2000000 +000006FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFE100000 +00003FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB00000 +0000BFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF50000 +0003FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFD0000 +0009FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF2000 +000DFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF6000 +000FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF8000 +001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB000 +001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB000 +001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB000 +001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFA000 +000FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF8000 +000DFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF6000 +0009FFFFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFFFF2000 +0003FFFFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFFFD0000 +0000BFFFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFFF50000 +00003FFFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFFB00000 +000006FFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFE100000 +0000007FFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFD2000000 +00000004EFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFB10000000 +0000000007DF8FFFFFFFFFFFFFFFFFFFFFF8FB4000000000 +000000000002578888888888888888888864100000000000 } -skinparam database<> { - StereotypeFontColor ELEMENT_FONT_COLOR - FontColor ELEMENT_FONT_COLOR - BackgroundColor SYSTEM_BG_COLOR - BorderColor #3C7FC0 +sprite $robot [48x48/16] { +000000000000000000000000000000000000000000000000 +000000000000000000000000000000000000000000000000 +000000000000000000000000000000000000000000000000 +000000000000000000000000000000000000000000000000 +000000000000000000000000000000000000000000000000 +000000000000000000000000000000000000000000000000 +000000000000000000000000000000000000000000000000 +000000000000000000000000000000000000000000000000 +000000000000000000000000000000000000000000000000 +000000000000000000000000000000000000000000000000 +000000000005BFFFFFFFFFFFFFFFFFFFFFE9100000000000 +0000000000AFFFFFFFFFFFFFFFFFFFFFFFFFE30000000000 +0000000007FFFFFFFFFFFFFFFFFFFFFFFFFFFE1000000000 +000000000FFFFFFFFFFFFFFFFFFFFFFFFFFFFF8000000000 +000000004FFFFFFFFFFFFFFFFFFFFFFFFFFFFFC000000000 +000000005FFFFFFFFFFFFFFFFFFFFFFFFFFFFFD000000000 +000000005FFFFFFFFFFFFFFFFFFFFFFFFFFFFFE000000000 +000000005FFFFFFFFFFFFFFFFFFFFFFFFFFFFFE000000000 +000699405FFFFFFC427FFFFFFFFFC427FFFFFFE009982000 +008FFF705FFFFFE10006FFFFFFFE00007FFFFFE00FFFF100 +00CFFF705FFFFFA00001FFFFFFF900002FFFFFE00FFFF500 +00DFFF705FFFFFB00002FFFFFFFA00003FFFFFE00FFFF500 +00DFFF705FFFFFF4000AFFFFFFFF3000BFFFFFE00FFFF500 +00DFFF705FFFFFFFA8DFFFFFFFFFFA8DFFFFFFE00FFFF500 +00DFFF705FFFFFFFFFFFFFFFFFFFFFFFFFFFFFE00FFFF500 +00DFFF705FFFFFFFFFFFFFFFFFFFFFFFFFFFFFE00FFFF500 +00DFFF705FFFFFFFFFFFFFFFFFFFFFFFFFFFFFE00FFFF500 +00DFFF705FFFFFFFFFFFFFFFFFFFFFFFFFFFFFE00FFFF500 +00DFFF705FFFFFFFFFFFFFFFFFFFFFFFFFFFFFE00FFFF500 +00CFFF705FFFFFF87777777777777777CFFFFFE00FFFF500 +008FFF705FFFFFF100000000000000009FFFFFE00FFFF100 +000699405FFFFFF76666666666666666CFFFFFE009982000 +000000005FFFFFFFFFFFFFFFFFFFFFFFFFFFFFE000000000 +000000005FFFFFFFFFFFFFFFFFFFFFFFFFFFFFE000000000 +000000004FFFFFFFFFFFFFFFFFFFFFFFFFFFFFC000000000 +000000000EFFFFFFFFFFFFFFFFFFFFFFFFFFFF7000000000 +0000000005FFFFFFFFFFFFFFFFFFFFFFFFFFFD0000000000 +00000000004CFFFFFFFFFFFFFFFFFFFFFFFF910000000000 +000000000000011111111111111111111110000000000000 +000000000000000000000000000000000000000000000000 +000000000000000000000000000000000000000000000000 +000000000000000000000000000000000000000000000000 +000000000000000000000000000000000000000000000000 +000000000000000000000000000000000000000000000000 +000000000000000000000000000000000000000000000000 +000000000000000000000000000000000000000000000000 +000000000000000000000000000000000000000000000000 +000000000000000000000000000000000000000000000000 } -skinparam database<> { - StereotypeFontColor ELEMENT_FONT_COLOR - FontColor ELEMENT_FONT_COLOR - BackgroundColor EXTERNAL_SYSTEM_BG_COLOR - BorderColor #8A8A8A +sprite $robot2 [48x48/16] { +000000000000000088888888888888880000000000000000 +000000000000000AFFFFFFFFFFFFFFFFA000000000000000 +00000000000000CFFFFFFFFFFFFFFFFFFC00000000000000 +00000000000004EFFFFFFFFFFFFFFFFFFE40000000000000 +0000000000000AFFFFFFFFFFFFFFFFFFFFA0000000000000 +00000000000008FFFFFFFFFFFFFFFFFFFF80000000000000 +00000000000008FFFFFFFFFFFFFFFFFFFF80000000000000 +00000000000008FFFFFFFFFFFFFFFFFFFF80000000000000 +00000000000888FFFFFFFFFFFFFFFFFFFF88800000000000 +00000000008FF8FFFFFFFFFFFFFFFFFFFF8FF80000000000 +00000000008FF8FFFFFFFFFFFFFFFFFFFF8FF80000000000 +00000000008FF8FFFFFFFFFFFFFFFFFFFF8FF80000000000 +00000000008FF8FFFFFFFFFFFFFFFFFFFF8FF80000000000 +00000000008FF8FFFFFFFFFFFFFFFFFFFF8FF80000000000 +00000000008FF8FFFFFFFFFFFFFFFFFFFF8FF80000000000 +00000000000888FFFFFFFFFFFFFFFFFFFF88800000000000 +00000000000008FFFFFFFFFFFFFFFFFFFF80000000000000 +00000000000008FFFFFFFFFFFFFFFFFFFF80000000000000 +00000000000008FFFFFFFFFFFFFFFFFFFF80000000000000 +00000000000008FFFFFFFFFFFFFFFFFFFF80000000000000 +00000000000008FFFFFFFFFFFFFFFFFFFF80000000000000 +00000000000004CFFFFFFFFFFFFFFFFFFC40000000000000 +000000488888848CFFFFFFFFFFFFFFFFC848888884000000 +00000CFFFFFFFFC888888888888888888CFFFFFFFFC00000 +00008FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF80000 +0000CFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFC0000 +0008FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF8000 +0008FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF8000 +0008FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF8000 +0008FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF8000 +0008FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF8000 +0008FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF8000 +0008FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF8000 +0008FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF8000 +0008FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF8000 +0008FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF8000 +0008FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF8000 +0008FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF8000 +0008FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF8000 +0008FFFFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFFFF8000 +0008FFFFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFFFF8000 +0008FFFFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFFFF8000 +0008FFFFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFFFF8000 +0000CFFFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFFFC0000 +00008FFFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFFF80000 +00000CFFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFFC00000 +000000488887578888888888888888888864688884000000 +000000000000000000000000000000000000000000000000 } ' Layout ' ################################## -!definelong LAYOUT_WITH_LEGEND +SetDefaultLegendEntries("person\nsystem\nexternal_person\nexternal_system\nenterprise_boundary\nsystem_boundary\nboundary") + +!procedure LAYOUT_WITH_LEGEND() hide stereotype legend right -|= |= Type | -| | person | -| | external person | -| | system | -| | external system | +|**Legend** | +|<$PERSON_BG_COLOR> person | +|<$SYSTEM_BG_COLOR> system| +|<$EXTERNAL_PERSON_BG_COLOR> external person | +|<$EXTERNAL_SYSTEM_BG_COLOR> external system | endlegend -!enddefinelong +!endprocedure + +!global $defaultPersonSprite = "person" +!$dummy = $restoreEmpty("person", "sprite", $defaultPersonSprite, %true()) +UpdateElementStyle("person") +' workaround of plantuml.jar bug - person overwrites external_person setting +!$dummy = $restoreEmpty("external_person", "sprite", $defaultPersonSprite, %true()) +UpdateElementStyle("external_person") +!global $portraitPerson = "false" + +!procedure $clearPersonRestore() + !$dummy = $clearRestore("person", "sprite") + !$dummy = $clearRestore("person", "legendSprite") + %set_variable_value("$" + "person" + "ElementTagSprite", "") + UpdateElementStyle("person") + ' workaround of plantuml.jar bug - person overwrites external_person setting + !$dummy = $clearRestore("external_person", "sprite") + !$dummy = $clearRestore("external_person", "legendSprite") + %set_variable_value("$" + "external_person" + "ElementTagSprite", "") + UpdateElementStyle("external_person") +!endprocedure + +!procedure HIDE_PERSON_SPRITE() + !$defaultPersonSprite = "" + !$portraitPerson = "false" + $clearPersonRestore() +!endprocedure + +!unquoted procedure SHOW_PERSON_SPRITE($sprite="") + !if ($sprite == "") + !$defaultPersonSprite = "person" + !else + !$defaultPersonSprite = $sprite + !endif + !$dummy = $restoreEmpty("person", "sprite", $defaultPersonSprite, %true()) + UpdateElementStyle("person") + ' workaround of plantuml.jar bug - person overwrites external_person setting + !$dummy = $restoreEmpty("external_person", "sprite", $defaultPersonSprite, %true()) + UpdateElementStyle("external_person") + !$portraitPerson = "false" +!endprocedure + +!unquoted procedure SHOW_PERSON_PORTRAIT() + !$defaultPersonSprite = "" + !$portraitPerson = "portrait" + $clearPersonRestore() +!endprocedure + +!unquoted procedure SHOW_PERSON_OUTLINE() + !$defaultPersonSprite = "" + !$portraitPerson = "outline" + $clearPersonRestore() +!endprocedure ' Elements ' ################################## -!define Person(e_alias, e_label) rectangle "==e_label" <> as e_alias -!define Person(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <> as e_alias +!function $getPerson($label, $type, $descr, $sprite) + !if ($sprite == "") && ($defaultPersonSprite != "") + !$sprite = $defaultPersonSprite + !endif + !return $getElementBase($label, $type, $descr, $sprite) +!endfunction + +!unquoted procedure Person($alias, $label, $descr="", $sprite="", $tags="", $link="", $type="") +!$sprite=$toElementArg($sprite, $tags, "ElementTagSprite", "person") +' $type reuses $techn definition of $tags +!$type=$toElementArg($type, $tags, "ElementTagTechn", "person") +!if ($portraitPerson == "portrait") && ($sprite == "") +actor "$getPerson($label, $type, $descr, $sprite)$getProps()" $toStereos("person", $tags) as $alias $getLink($link) +!elseif ($portraitPerson == "outline") && ($sprite == "") +person "$getPerson($label, $type, $descr, $sprite)$getProps()" $toStereos("person", $tags) as $alias $getLink($link) +!else +rectangle "$getPerson($label, $type, $descr, $sprite)$getProps()" $toStereos("person", $tags) as $alias $getLink($link) +!endif +!endprocedure -!define Person_Ext(e_alias, e_label) rectangle "==e_label" <> as e_alias -!define Person_Ext(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <> as e_alias +!unquoted procedure Person_Ext($alias, $label, $descr="", $sprite="", $tags="", $link="", $type="") +!$sprite=$toElementArg($sprite, $tags, "ElementTagSprite", "external_person") +' $type reuses $techn definition of $tags +!$type=$toElementArg($type, $tags, "ElementTagTechn", "external_person") +!if ($portraitPerson == "portrait") && ($sprite == "") +actor "$getPerson($label, $type, $descr, $sprite)$getProps()" $toStereos("external_person", $tags) as $alias $getLink($link) +!elseif ($portraitPerson == "outline") && ($sprite == "") +person "$getPerson($label, $type, $descr, $sprite)$getProps()" $toStereos("external_person", $tags) as $alias $getLink($link) +!else +rectangle "$getPerson($label, $type, $descr, $sprite)$getProps()" $toStereos("external_person", $tags) as $alias $getLink($link) +!endif +!endprocedure -!define System(e_alias, e_label) rectangle "==e_label" <> as e_alias -!define System(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <> as e_alias +!unquoted procedure System($alias, $label, $descr="", $sprite="", $tags="", $link="", $type="", $baseShape="rectangle") + ' $type reuses $techn definition of $tags + $getElementLine($baseShape, "system", $alias, $label, $type, $descr, $sprite, $tags, $link) +!endprocedure -!define System_Ext(e_alias, e_label) rectangle "==e_label" <> as e_alias -!define System_Ext(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <> as e_alias +!unquoted procedure SystemDb($alias, $label, $descr="", $sprite="", $tags="", $link="", $type="") + ' $type reuses $techn definition of $tags + $getElementLine("database", "system", $alias, $label, $type, $descr, $sprite, $tags, $link) +!endprocedure -!define SystemDb(e_alias, e_label) database "==e_label" <> as e_alias -!define SystemDb(e_alias, e_label, e_descr) database "==e_label\n\n e_descr" <> as e_alias +!unquoted procedure SystemQueue($alias, $label, $descr="", $sprite="", $tags="", $link="", $type="") + ' $type reuses $techn definition of $tags + $getElementLine("queue", "system", $alias, $label, $type, $descr, $sprite, $tags, $link) +!endprocedure -!define SystemDb_Ext(e_alias, e_label) database "==e_label" <> as e_alias -!define SystemDb_Ext(e_alias, e_label, e_descr) database "==e_label\n\n e_descr" <> as e_alias +!unquoted procedure System_Ext($alias, $label, $descr="", $sprite="", $tags="", $link="", $type="", $baseShape="rectangle") + ' $type reuses $techn definition of $tags + $getElementLine($baseShape , "external_system", $alias, $label, $type, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure SystemDb_Ext($alias, $label, $descr="", $sprite="", $tags="", $link="", $type="") + ' $type reuses $techn definition of $tags + $getElementLine("database", "external_system", $alias, $label, $type, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure SystemQueue_Ext($alias, $label, $descr="", $sprite="", $tags="", $link="", $type="") + ' $type reuses $techn definition of $tags + $getElementLine("queue", "external_system", $alias, $label, $type, $descr, $sprite, $tags, $link) +!endprocedure ' Boundaries ' ################################## -!define Enterprise_Boundary(e_alias, e_label) Boundary(e_alias, e_label, "Enterprise") -!define System_Boundary(e_alias, e_label) Boundary(e_alias, e_label, "System") \ No newline at end of file +!unquoted procedure Enterprise_Boundary($alias, $label, $tags="", $link="", $descr = "") + !if ($tags != "") + !$allTags = $tags + '+enterprise' + !else + !$allTags = 'enterprise' + !endif + ' $type defined via $tag style + Boundary($alias, $label, "", $allTags, $link, $descr) +!endprocedure + +!unquoted procedure System_Boundary($alias, $label, $tags="", $link="", $descr = "") + !if ($tags != "") + !$allTags = $tags + '+system' + !else + !$allTags = 'system' + !endif + ' $type defined via $tag style + Boundary($alias, $label, "", $allTags, $link, $descr) +!endprocedure diff --git a/C4_Deployment.puml b/C4_Deployment.puml new file mode 100644 index 00000000..73b5d6d1 --- /dev/null +++ b/C4_Deployment.puml @@ -0,0 +1,145 @@ +' convert it with additional command line argument -DRELATIVE_INCLUDE="relative/absolute" to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include ./C4_Container.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!endif + +' Colors +' ################################## + +!$NODE_FONT_COLOR ?= "#000000" +!$NODE_BG_COLOR ?= "#FFFFFF" +!$NODE_BORDER_COLOR ?= "#A2A2A2" + +' Labels +' ################################## + +!$NODE_LEGEND_TEXT ?= "node" + +' Styling +' ################################## + +' PlantUML supports no automatic line breaks of "PlantUML containers" (C4 Deployment_Node is a "PlantUML container") +' therefore (Deployment_)Node() implements an automatic line break based on spaces (like in all other objects). +' If a $type contains \n then these are used (and no automatic space based line breaks are done) +' $NODE_TYPE_MAX_CHAR_WIDTH defines the automatic line break position +!$NODE_TYPE_MAX_CHAR_WIDTH ?= 35 +!$NODE_DESCR_MAX_CHAR_WIDTH ?= 32 + +UpdateElementStyle("node", $bgColor=$NODE_BG_COLOR, $fontColor=$NODE_FONT_COLOR, $borderColor=$NODE_BORDER_COLOR, $legendText="$NODE_LEGEND_TEXT") +skinparam rectangle<> { + FontStyle normal +} + +' shortcuts with default colors +' node specific: $techn is only used in old scripts, new scripts uses $type ($techn has to remain, it could be called via named argument) +!unquoted procedure AddNodeTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $sprite="", $type="", $legendText="", $legendSprite="", $techn="", $borderStyle="", $borderThickness="") + !$type=$type+$techn + $addElementTagInclReuse("node", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $sprite, $type, $legendText, $legendSprite, $borderStyle, $borderThickness) +!endprocedure + +' Layout +' ################################## + +' comment if node should not be added to legend. No calculated legend extension required +SetDefaultLegendEntries("person\nsystem\ncontainer\nexternal_person\nexternal_system\nexternal_container\nnode\nenterprise_boundary\nsystem_boundary\ncontainer_boundary\nboundary") + +' Line breaks +' ################################## + +' $breakTechn() in C4 supports //...//; $breakNode() in C4_Deployment supports no //....// +!unquoted function $breakNode($text, $widthStr) + !$usedNewLine = '\n' + !return $breakText($text, $usedNewLine, $widthStr) +!endfunction + +' Elements +' ################################## + +!function $getNode($label, $type, $descr, $sprite) + !$nodeText = "" + !if ($sprite != "") + !$nodeText = $nodeText + $getSprite($sprite) + '\n' + !endif + !$nodeText = $nodeText + '== ' + $breakText($label, "\n== ") + !if ($type != "") + !$nodeText = $nodeText + '\n[' + $breakNode($type, $NODE_TYPE_MAX_CHAR_WIDTH) + ']' + !endif + !if ($descr != "") + !$nodeText = $nodeText + '\n\n' + $breakDescr($descr, $NODE_DESCR_MAX_CHAR_WIDTH) + !endif + !return $nodeText +!endfunction + +!function $getNode_L($label, $type, $descr, $sprite) + !$nodeText = "" + !if ($sprite != "") + !$nodeText = $nodeText + $getSprite($sprite) + '\l' + !endif + !$nodeText = $nodeText + '== ' + $breakText($label, "\l== ") + !if ($type != "") + !$nodeText = $nodeText + '\l[' + $breakNode($type, $NODE_TYPE_MAX_CHAR_WIDTH) + ']' + !endif + !if ($descr != "") + !$nodeText = $nodeText + '\l\l' + $breakDescr($descr, $NODE_DESCR_MAX_CHAR_WIDTH) + !endif + !return $nodeText +!endfunction + +!function $getNode_R($label, $type, $descr, $sprite) + !$nodeText = "" + !if ($sprite != "") + !$nodeText = $nodeText + $getSprite($sprite) + '\r' + !endif + !$nodeText = $nodeText + '== ' + $breakText($label, "\r== ") + !if ($type != "") + !$nodeText = $nodeText + '\r[' + $breakNode($type, $NODE_TYPE_MAX_CHAR_WIDTH) + ']' + !endif + !if ($descr != "") + !$nodeText = $nodeText + '\r\r' + $breakDescr($descr, $NODE_DESCR_MAX_CHAR_WIDTH) + !endif + !return $nodeText +!endfunction + +!unquoted procedure Deployment_Node($alias, $label, $type="", $descr="", $sprite="", $tags="", $link="") +!$sprite=$toElementArg($sprite, $tags, "ElementTagSprite", "node") +' nodes $type reuses $techn definition of $tags +!$type=$toElementArg($type, $tags, "ElementTagTechn", "node") +rectangle "$getNode($label, $type, $descr, $sprite)$getProps()" $toStereos("node",$tags) as $alias $getLink($link) +!endprocedure + +!unquoted procedure Deployment_Node_L($alias, $label, $type="", $descr="", $sprite="", $tags="", $link="") +!$sprite=$toElementArg($sprite, $tags, "ElementTagSprite", "node") +' nodes $type reuses $techn definition of $tags +!$type=$toElementArg($type, $tags, "ElementTagTechn", "node") +rectangle "$getNode_L($label, $type, $descr, $sprite)$getProps_L()" $toStereos("node",$tags) as $alias $getLink($link) +!endprocedure + +!unquoted procedure Deployment_Node_R($alias, $label, $type="", $descr="", $sprite="", $tags="", $link="") +!$sprite=$toElementArg($sprite, $tags, "ElementTagSprite", "node") +' nodes $type reuses $techn definition of $tags +!$type=$toElementArg($type, $tags, "ElementTagTechn", "node") +rectangle "$getNode_R($label, $type, $descr, $sprite)$getProps_R()" $toStereos("node",$tags) as $alias $getLink($link) +!endprocedure + +!unquoted procedure Node($alias, $label, $type="", $descr="", $sprite="", $tags="", $link="") +!$sprite=$toElementArg($sprite, $tags, "ElementTagSprite", "node") +' nodes $type reuses $techn definition of $tags +!$type=$toElementArg($type, $tags, "ElementTagTechn", "node") +rectangle "$getNode($label, $type, $descr, $sprite)$getProps()" $toStereos("node",$tags) as $alias $getLink($link) +!endprocedure + +!unquoted procedure Node_L($alias, $label, $type="", $descr="", $sprite="", $tags="", $link="") +!$sprite=$toElementArg($sprite, $tags, "ElementTagSprite", "node") +' nodes $type reuses $techn definition of $tags +!$type=$toElementArg($type, $tags, "ElementTagTechn", "node") +rectangle "$getNode_L($label, $type, $descr, $sprite)$getProps_L()" $toStereos("node",$tags) as $alias $getLink($link) +!endprocedure + +!unquoted procedure Node_R($alias, $label, $type="", $descr="", $sprite="", $tags="", $link="") +!$sprite=$toElementArg($sprite, $tags, "ElementTagSprite", "node") +' nodes $type reuses $techn definition of $tags +!$type=$toElementArg($type, $tags, "ElementTagTechn", "node") +rectangle "$getNode_R($label, $type, $descr, $sprite)$getProps_R()" $toStereos("node",$tags) as $alias $getLink($link) +!endprocedure diff --git a/C4_Dynamic.puml b/C4_Dynamic.puml new file mode 100644 index 00000000..f12cb862 --- /dev/null +++ b/C4_Dynamic.puml @@ -0,0 +1,165 @@ +' convert it with additional command line argument -DRELATIVE_INCLUDE="relative/absolute" to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include ./C4_Component.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml +!endif + +' Scope: Interactions in an enterprise, software system or container. +' Primary and supporting elements: Depends on the diagram scope - +' enterprise - people and software systems Related to the enterprise in scope +' software system - see system context or container diagrams, +' container - see component diagram. +' Intended audience: Technical and non-technical people, inside and outside of the software development team. + +' Dynamic diagram introduces (automatically) numbered interactions: +' (lowercase) increment($offset=1): increase current index (procedure which has no direct output) +' (lowercase) setIndex($new_index): set the new index (procedure which has no direct output) +' +' (Uppercase) LastIndex(): return the last used index (function which can be used as argument) +' (Uppercase) Index($offset=1): returns current index and calculates next index (function which can be used as argument) +' (Uppercase) SetIndex($new_index): returns new set index and calculates next index (function which can be used as argument) + +' Relationship override +' ################################## + +' Relationship +' ################################## + +!unquoted procedure Rel_($e_index, $alias1, $alias2, $label, $direction) +$getRel($direction, $alias1, $alias2, $e_index + ": " + $label, "", "", "", "", "") +!endprocedure +!unquoted procedure Rel_($e_index, $alias1, $alias2, $label, $techn, $direction) +$getRel($direction, $alias1, $alias2, $e_index + ": " + $label, $techn, "", "", "", "") +!endprocedure + +' all RelIndex... calls are outdated, Rel(..., $index=...) calls should be used !!!! + +' first Rel() supports the $index argument too; second Rel() overwrites C4.puml definition +!unquoted procedure Rel($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="", $index="") +!$pre = $getPrefix($index) +$getRel("-->>", $from, $to, $pre + $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure +!unquoted procedure Rel($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +Rel($from, $to, $label, $techn, $descr, $sprite, $tags, $link, "") +!endprocedure +!unquoted procedure RelIndex($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure Rel_Back($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="", $index="") +!$pre = $getPrefix($index) +$getRel("<<--", $from, $to, $pre + $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure +!unquoted procedure Rel_Back($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +Rel_Back($from, $to, $label, $techn, $descr, $sprite, $tags, $link, "") +!endprocedure +!unquoted procedure RelIndex_Back($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("<<--", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure Rel_Neighbor($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="", $index="") +!$pre = $getPrefix($index) +$getRel("->>", $from, $to, $pre + $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure +!unquoted procedure Rel_Neighbor($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +Rel_Neighbor($from, $to, $label, $techn, $descr, $sprite, $tags, $link, "") +!endprocedure +!unquoted procedure RelIndex_Neighbor($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure Rel_Back_Neighbor($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="", $index="") +!$pre = $getPrefix($index) +$getRel("<<-", $from, $to, $pre + $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure +!unquoted procedure Rel_Back_Neighbor($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +Rel_Back_Neighbor($from, $to, $label, $techn, $descr, $sprite, $tags, $link, "") +!endprocedure +!unquoted procedure RelIndex_Back_Neighbor($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("<<-", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure Rel_D($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="", $index="") +!$pre = $getPrefix($index) +$getRel($down("-","->>"), $from, $to, $pre + $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure +!unquoted procedure Rel_D($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +Rel_D($from, $to, $label, $techn, $descr, $sprite, $tags, $link, "") +!endprocedure +!unquoted procedure Rel_Down($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="", $index="") +!$pre = $getPrefix($index) +$getRel($down("-","->>"), $from, $to, $pre + $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure +!unquoted procedure Rel_Down($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +Rel_Down($from, $to, $label, $techn, $descr, $sprite, $tags, $link, "") +!endprocedure +!unquoted procedure RelIndex_D($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel($down("-","->>"), $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure +!unquoted procedure RelIndex_Down($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel($down("-","->>"), $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure Rel_U($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="", $index="") +!$pre = $getPrefix($index) +$getRel($up("-","->>"), $from, $to, $pre + $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure +!unquoted procedure Rel_U($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +Rel_U($from, $to, $label, $techn, $descr, $sprite, $tags, $link=, "") +!endprocedure +!unquoted procedure Rel_Up($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="", $index="") +!$pre = $getPrefix($index) +$getRel($up("-","->>"), $from, $to, $pre + $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure +!unquoted procedure Rel_Up($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +Rel_Up($from, $to, $label, $techn, $descr, $sprite, $tags, $link, "") +!endprocedure +!unquoted procedure RelIndex_U($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel($up("-","->>"), $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure +!unquoted procedure RelIndex_Up($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel($up("-","->>"), $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure Rel_L($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="", $index="") +!$pre = $getPrefix($index) +$getRel($left("-","->>"), $from, $to, $pre + $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure +!unquoted procedure Rel_L($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +Rel_L($from, $to, $label, $techn, $descr, $sprite, $tags, $link, "") +!endprocedure +!unquoted procedure Rel_Left($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="", $index="") +!$pre = $getPrefix($index) +$getRel($left("-","->>"), $from, $to, $pre + $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure +!unquoted procedure Rel_Left($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +Rel_Left($from, $to, $label, $techn, $descr, $sprite, $tags, $link, "") +!endprocedure +!unquoted procedure RelIndex_L($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel($left("-","->>"), $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure +!unquoted procedure RelIndex_Left($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel($left("-","->>"), $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure Rel_R($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="", $index="") +!$pre = $getPrefix($index) +$getRel($right("-","->>"), $from, $to, $pre + $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure +!unquoted procedure Rel_R($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +Rel_R($from, $to, $label, $techn, $descr, $sprite, $tags, $link, "") +!endprocedure +!unquoted procedure Rel_Right($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="", $index="") +!$pre = $getPrefix($index) +$getRel($right("-","->>"), $from, $to, $pre + $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure +!unquoted procedure Rel_Right($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +Rel_Right($from, $to, $label, $techn, $descr, $sprite, $tags, $link, "") +!endprocedure +!unquoted procedure RelIndex_R($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel($right("-","->>"), $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure +!unquoted procedure RelIndex_Right($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel($right("-","->>"), $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure diff --git a/C4_Sequence.puml b/C4_Sequence.puml new file mode 100644 index 00000000..be46b8c5 --- /dev/null +++ b/C4_Sequence.puml @@ -0,0 +1,406 @@ +' convert it with additional command line argument -DRELATIVE_INCLUDE="relative/absolute" to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include ./C4_Component.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml +!endif + +' Scope: Interactions in an enterprise, software system or container. +' Primary and supporting elements: Depends on the diagram scope - +' enterprise - people and software systems Related to the enterprise in scope +' software system - see system context or container diagrams, +' container - see component diagram. +' Intended audience: Technical and non-technical people, inside and outside of the software development team. + +' Sequence diagram introduces (automatically) numbered interactions: +' (lowercase) increment($offset=1): increase current index (procedure which has no direct output) +' (lowercase) setIndex($new_index): set the new index (procedure which has no direct output) +' +' (Uppercase) LastIndex(): return the last used index (function which can be used as argument) +' (Uppercase) Index($offset=1): returns current index and calculates next index (function which can be used as argument) +' (Uppercase) SetIndex($new_index): returns new set index and calculates next index (function which can be used as argument) + +' enables multi-level boxes +!pragma teoz true + + +' Legend redefintion +' ################################## +' sequence has no dashed boxes +!if ($LEGEND_DASHED_BOUNDARY == "dashed") + !$LEGEND_DASHED_BOUNDARY = "" +!endif +!if ($LEGEND_DASHED_TRANSPARENT_BOUNDARY == "dashed") + !$LEGEND_DASHED_TRANSPARENT_BOUNDARY = "" +!endif +UpdateBoundaryStyle("", $bgColor=$BOUNDARY_BG_COLOR, $fontColor=$BOUNDARY_COLOR, $borderColor=$BOUNDARY_COLOR) +UpdateBoundaryStyle("enterprise", $bgColor=$ENTERPRISE_BOUNDARY_BG_COLOR, $fontColor=$ENTERPRISE_BOUNDARY_COLOR, $borderColor=$ENTERPRISE_BOUNDARY_COLOR, $type="$ENTERPRISE_BOUNDARY_TYPE") +UpdateBoundaryStyle("system", $bgColor=$SYSTEM_BOUNDARY_BG_COLOR, $fontColor=$SYSTEM_BOUNDARY_COLOR, $borderColor=$SYSTEM_BOUNDARY_COLOR, $type="$SYSTEM_BOUNDARY_TYPE") +UpdateBoundaryStyle("container", $bgColor=$CONTAINER_BOUNDARY_BG_COLOR, $fontColor=$CONTAINER_BOUNDARY_COLOR, $borderColor=$CONTAINER_BOUNDARY_COLOR, $type="$CONTAINER_BOUNDARY_TYPE") + +' Styling and Layout +' ################################## + +!global $display_element_description = %false() + +' typically the element/participant descriptions are not displayed in a sequence diagram, but it can be activated with this call +!unquoted procedure SHOW_ELEMENT_DESCRIPTIONS($show="true") +!if ($show == "true") + !global $display_element_description = %true() +!else + !global $display_element_description = %false() +!endif +!endprocedure + +' typically the foot boxes descriptions are not displayed in a sequence diagram, but it can be activated with this call +!unquoted procedure SHOW_FOOT_BOXES($show="true") +!if ($show == "true") + show footbox +!else + hide footbox +!endif +!endprocedure + +!global $show_index = %false() +' All relation specific (default) ordinary index numbers can be shown with this call +!unquoted procedure SHOW_INDEX($show="true") +!if ($show == "true") + !global $show_index = %true() +!else + !global $show_index = %false() +!endif +!endprocedure + +' ======= if no theme is defined hide foot box and activate C4_blue styles +!if (%variable_exists("$THEME")) +!else +' $BOUNDARY_BG_COLOR... have to be defined in theme itself that it can be used in styles,... +' (no default values which are defined in C4.puml) +' If skinparams and styles are defined with concrete values no variables are required +!$BOUNDARY_BG_COLOR ?= "transparent" +!$BOUNDARY_COLOR ?= "#444444" +!$ARROW_COLOR ?= "#666666" + +' replace transparent with concrete background that it can be used as font color too +!if ($BOUNDARY_BG_COLOR == "transparent") + !$SEQUENCE_BG_COLOR = white +!else + !$SEQUENCE_BG_COLOR = $BOUNDARY_BG_COLOR +!endif + +' "C4 styled" default is no foot boxes +hide footbox +' "C4 styled" default is that lifeline is arrow color +skinparam SequenceLifelineBorderColor $ARROW_COLOR + +skinparam SequenceGroupBodyBackgroundColor $SEQUENCE_BG_COLOR +skinparam SequenceGroupFontColor $BOUNDARY_COLOR +skinparam SequenceGroupBackgroundColor $BOUNDARY_COLOR +skinparam SequenceGroupHeaderFontColor $SEQUENCE_BG_COLOR +skinparam SequenceGroupBorderColor $BOUNDARY_COLOR + +skinparam SequenceReferenceBackgroundColor $SEQUENCE_BG_COLOR +skinparam SequenceReferenceFontColor $BOUNDARY_COLOR +skinparam SequenceReferenceHeaderBackgroundColor $BOUNDARY_COLOR +' VIA STYLE +' skinparam SequenceReferenceHeaderFontColor $SEQUENCE_BG_COLOR + +skinparam SequenceReferenceBorderColor $BOUNDARY_COLOR + +skinparam SequenceDividerBackgroundColor $SEQUENCE_BG_COLOR +skinparam SequenceDividerFontColor $BOUNDARY_COLOR +skinparam SequenceDividerBorderColor $BOUNDARY_COLOR + +' VIA STYLE +' skinparam SequenceDelayFontColor green + +!endif +' ======= if no theme is defined hide foot box and activate C4_blue styles + +' Elements redefinition +' ################################## + +' all elements have to be displayed as participant +' participants requires ` %newline()` instead of `\n` + +!unquoted function $breakWithNewline($text, $lineEnd, $lineStart, $widthStr="-1") +!$width = %intval($widthStr) +!$multiLine = "" +!if (%strpos($text, "\n") >= 0) + !while (%strpos($text, "\n") >= 0) + !$brPos = %strpos($text, "\n") + !if ($brPos > 0) + !$multiLine = $multiLine + %substr($text, 0, $brPos) + $lineEnd + %newline() + $lineStart + !else + ' non breaking change that newLine breaks with formats can be used with \n\n + !$multiLine = $multiLine + "" + $lineEnd + %newline() + $lineStart + !endif + !$text = %substr($text, $brPos+2) + !if (%strlen($text) == 0) + !$text = "" + !endif + !endwhile +!else + !while ($width>0 && %strlen($text) > $width) + !$brPos = $width + !while ($brPos > 0 && %substr($text, $brPos, 1) != ' ') + !$brPos = $brPos - 1 + !endwhile + + !if ($brPos < 1) + !$brPos = %strpos($text, " ") + !else + !endif + + !if ($brPos > 0) + !$multiLine = $multiLine + %substr($text, 0, $brPos) + $lineEnd + %newline() + $lineStart + !$text = %substr($text, $brPos + 1) + !else + !$multiLine = $multiLine+ $text + !$text = "" + !endif + !endwhile +!endif +!if (%strlen($text) > 0) + !$multiLine = $multiLine + $text +!endif +!return $multiLine +!endfunction + +!unquoted function $breakNewLineLabel($text) +!$multiLine = $breakWithNewline($text, "", "==") +!return $multiLine +!endfunction + +!unquoted function $breakNewLineDescr($text) + !return $breakWithNewline($text, "", "", $REL_DESCR_MAX_CHAR_WIDTH) +!endfunction + +!unquoted function $breakNewLineTechn($text) + !$lineStart = "//" + !$lineEnd = '//' + !return $breakWithNewline($text, $lineStart, $lineEnd, $REL_TECHN_MAX_CHAR_WIDTH) +!endfunction + +' properties are not displayed in sequence diagram (size would be too big) +' $breakLabel() not required by participant +!procedure $getParticipant($elementType, $alias, $label, $techn, $descr, $sprite, $tags, $link) + !$sprite=$toElementArg($sprite, $tags, "ElementTagSprite", $elementType) + !$techn=$toElementArg($techn, $tags, "ElementTagTechn", $elementType) + !$stereo = $toStereos($elementType,$tags) + !$calcLabel = "== " + $breakNewLineLabel($label) + !$calcTech = "//[" + $breakNewLineTechn($techn) + "]//" + !$calcDescr = $breakNewLineDescr($descr) + !$calcLink = $getLink($link) + +participant $alias $stereo $calcLink [ +!if ($sprite != "") +$getSprite($sprite) +!endif +!if ($label != "") +$calcLabel +!endif +!if ($techn != "") +$calcTech +!endif +!if ($display_element_description == %true() && $descr != "") + +$calcDescr +!endif +] +!endprocedure + + +!unquoted procedure Person($alias, $label, $descr="", $sprite="", $tags="", $link="", $type="") + ' $type reuses $techn definition of $tags + $getParticipant("person", $alias, $label, $type, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure Person_Ext($alias, $label, $descr="", $sprite="", $tags="", $link="", $type="") + ' $type reuses $techn definition of $tags + $getParticipant("external_person", $alias, $label, $type, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure System($alias, $label, $descr="", $sprite="", $tags="", $link="", $type="", $baseShape="rectangle") + ' $type reuses $techn definition of $tags + $getParticipant("system", $alias, $label, $type, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure SystemDb($alias, $label, $descr="", $sprite="", $tags="", $link="", $type="") + ' $type reuses $techn definition of $tags + $getParticipant("system", $alias, $label, $type, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure SystemQueue($alias, $label, $descr="", $sprite="", $tags="", $link="", $type="") + ' $type reuses $techn definition of $tags + $getParticipant("system", $alias, $label, $type, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure System_Ext($alias, $label, $descr="", $sprite="", $tags="", $link="", $type="", $baseShape="rectangle") + ' $type reuses $techn definition of $tags + $getParticipant("external_system", $alias, $label, $type, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure SystemDb_Ext($alias, $label, $descr="", $sprite="", $tags="", $link="", $type="") + ' $type reuses $techn definition of $tags + $getParticipant("external_system", $alias, $label, $type, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure SystemQueue_Ext($alias, $label, $descr="", $sprite="", $tags="", $link="", $type="") + ' $type reuses $techn definition of $tags + $getParticipant("external_system", $alias, $label, $type, $descr, $sprite, $tags, $link) +!endprocedure + + + +!unquoted procedure Container($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="", $baseShape="rectangle") + $getParticipant("container", $alias, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure ContainerDb($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="") + $getParticipant("container", $alias, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure ContainerQueue($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="") + $getParticipant("container", $alias, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure Container_Ext($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="", $baseShape="rectangle") + $getParticipant("external_container", $alias, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure ContainerDb_Ext($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="") + $getParticipant("external_container", $alias, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure ContainerQueue_Ext($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="") + $getParticipant("external_container", $alias, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + + + +!unquoted procedure Component($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="", $baseShape="rectangle") + $getParticipant("component", $alias, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure ComponentDb($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="") + $getParticipant("component", $alias, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure ComponentQueue($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="") + $getParticipant("component", $alias, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure Component_Ext($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="", $baseShape="rectangle") + $getParticipant("external_component", $alias, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure ComponentDb_Ext($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="") + $getParticipant("external_component", $alias, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + +!unquoted procedure ComponentQueue_Ext($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="") + $getParticipant("external_component", $alias, $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure + + +' Boundary redefinition +' ################################## + +' all boundaries have to be displayed as box and +' !!! important changes: without { at the end; and boundary ends with Boundary_End() instead of } + +' alias ignored +' $breakLabel() not required by participant + +!unquoted procedure Boundary($alias, $label, $type="", $tags="", $link="", $descr = "") +!$boundaryTags = $addBoundaryPostfix($tags) +' boundary $type reuses $techn definition of $boundaryTags +!$type=$toElementArg($type, $boundaryTags, "ElementTagTechn", "boundary") +!$sprite=$toElementArg("", $boundaryTags, "ElementTagSprite", "boundary") +!$labelSprite="" +!if ($sprite != "") + ' add sprite in label line that it is more compact + !$labelSprite = $getSprite($smallVersionSprite($sprite, $BOUNDARY_IMAGE_SIZE_FACTOR)) + ' ' +!endif +!if ($link != "") + !$usedNewLine = ']]\n== [[' + $link + ' ' + !$labelType = '== [[' + $link + ' ' + $labelSprite + $breakText($label, $usedNewLine) + ']]' +!else + !$usedNewLine = '\n== ' + !$labelType = $labelSprite + $breakText($label, $usedNewLine) +!endif +!if (type != "") + !$labelType = $labelType + '\n[' + $type + ']' +!endif +!if ($display_element_description == %true() && $descr != "") + !$labelType = $labelType + '\n\n' + $breakDescr($descr, $BOUNDARY_DESCR_MAX_CHAR_WIDTH) +!endif +box "$labelType" $toStereos("boundary", $boundaryTags) +!endprocedure + +!procedure Boundary_End() +end box +!endprocedure + +!unquoted procedure Enterprise_Boundary($alias, $label, $tags="", $link="", $descr = "") + !if ($tags != "") + !$allTags = $tags + '+enterprise' + !else + !$allTags = 'enterprise' + !endif + ' $type defined via $tag style + Boundary($alias, $label, "", $allTags, $link, $descr) +!endprocedure + +!unquoted procedure System_Boundary($alias, $label, $tags="", $link="", $descr = "") + !if ($tags != "") + !$allTags = $tags + '+system' + !else + !$allTags = 'system' + !endif + ' $type defined via $tag style + Boundary($alias, $label, "", $allTags, $link, $descr) +!endprocedure + +!unquoted procedure Container_Boundary($alias, $label, $tags="", $link="", $descr = "") + !if ($tags != "") + !$allTags = $tags + '+container' + !else + !$allTags = 'container' + !endif + ' $type defined via $tag style + Boundary($alias, $label, "", $allTags, $link, $descr) +!endprocedure + +' Relationship (redefinition) +' ################################## + +' only Rel is supported in sequence diagram + +' first Rel() supports the $index and $rel argument too; second Rel() overwrites C4.puml definition +' don't add empty lines in procedure otherwise & calls are not working anymore '& a -> b: call' are not working anymore +!unquoted procedure Rel($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="", $index="", $rel="") + !if ($show_index == %true()) + !$pre = $getPrefix($index) + !else + !$pre = "" + !endif + !if ($rel == "") + !$rel = "->" + !endif +$getRel($rel, $from, $to, $pre + $label, $techn, $descr, $sprite, $tags, $link) +!endprocedure +!unquoted procedure Rel($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +Rel($from, $to, $label, $techn, $descr, $sprite, $tags, $link, "", "") +!endprocedure diff --git a/LayoutOptions.md b/LayoutOptions.md index c5b64b4e..2ad78b59 100644 --- a/LayoutOptions.md +++ b/LayoutOptions.md @@ -1,21 +1,76 @@ # Layout Options -PlantUML uses [Graphviz](https://www.graphviz.org/) for his graph visualization. Thus the rendering itself is done automatically for you - that it one of the biggest advantages of using PlantUML. +C4-PlantUML comes with some layout options. + +- [📄 C4-PlantUML](README.md#c4-plantuml) +- [📄 Layout Options](#layout-options) + - [Layout Guidance and Practices](#layout-guidance-and-practices) + - [Overall Guidance](#overall-guidance) + - [Layout Practices](#layout-practices) + - [LAYOUT_TOP_DOWN() or LAYOUT_LEFT_RIGHT() or LAYOUT_LANDSCAPE()](#layout_top_down-or-layout_left_right-or-layout_landscape) + - [LAYOUT_WITH_LEGEND() or SHOW_LEGEND(?hideStereotype, ?details)](#layout_with_legend-or-show_legendhidestereotype-details) + - [SHOW_FLOATING_LEGEND(?alias, ?hideStereotype, ?details) and LEGEND()](#show_floating_legendalias-hidestereotype-details-and-legend) + - [LAYOUT_AS_SKETCH() and SET_SKETCH_STYLE(?bgColor, ?fontColor, ?warningColor, ?fontName, ?footerWarning, ?footerText)](#layout_as_sketch-and-set_sketch_stylebgcolor-fontcolor-warningcolor-fontname-footerwarning-footertext) + - [HIDE_STEREOTYPE()](#hide_stereotype) + - [HIDE_PERSON_SPRITE(), SHOW_PERSON_SPRITE(?sprite), SHOW_PERSON_PORTRAIT() and SHOW_PERSON_OUTLINE()](#hide_person_sprite-show_person_spritesprite-show_person_portrait-and-show_person_outline) + - [Using HIDE_PERSON_SPRITE()](#using-hide_person_sprite) + - [Using SHOW_PERSON_SPRITE()](#using-show_person_sprite) + - [Using SHOW_PERSON_SPRITE(sprite)](#using-show_person_spritesprite) + - [Using SHOW_PERSON_PORTRAIT()](#using-show_person_portrait) + - [Using SHOW_PERSON_OUTLINE()](#using-show_person_outline) + - [(C4 styled) Sequence diagram specific layout options](#c4-styled-sequence-diagram-specific-layout-options) + - [SHOW_ELEMENT_DESCRIPTIONS(?show)](#show_element_descriptionsshow) + - [SHOW_FOOT_BOXES(?show)](#show_foot_boxesshow) + - [SHOW_INDEX(?show)](#show_indexshow) + - [Optional support of additional PlantUML elements](#optional-support-of-additional-plantuml-elements) + - [List of supported PlantUML elements](#list-of-supported-plantuml-elements) +- [📄 Themes (different styles and languages)](Themes.md#themes) +- samples + - [📄 C4 Model Diagrams](samples/C4CoreDiagrams.md#c4-model-diagrams) + +## Layout Guidance and Practices + +PlantUML uses [Graphviz](https://www.graphviz.org/) for its graph visualization. Thus the rendering itself is done automatically for you - that it one of the biggest advantages of using PlantUML. ...and also sometimes one of the biggest disadvantages, if the rendering is not what the user intended. -For this reason, C4-PlantUML also comes with some layout options. +### Overall Guidance -## LAYOUT_TOP_DOWN or LAYOUT_LEFT_RIGHT +1. Be minimal in the use of all directed relations - introduce the fewest possible directed `Rel_` and `Lay_` statements that achieve the desired layout. One way to do this is to immediately remove any of these you experiment with when they don't actually affect the layout at all. And of course you will remove the ones that affect it the layout in a negative way. +2. With dynamic rendering tools (e.g. VS Code plugin) do NOT trust the first rendering as it is shifty when adding code because you do not know exactly when it grabs the current unsaved code. Wait for a bit or close and reopen preview panel. -With the two macros `LAYOUT_TOP_DOWN` and `LAYOUT_LEFT_RIGHT` it is possible to easily change the flow visualization of the diagram. `LAYOUT_TOP_DOWN` is the default. +### Layout Practices -```csharp +These are intended to correlate to the layout engine’s algorithm, but have (as of this writing) been determined by trial and error - not a code review. + +Please read through all practices before starting. + +1. Create all components, containers and boundaries first - in order top to bottom or left to right. +2. Use `Rel` (directionless) to create initial relationships. +3. If layout is not as desired, modify **some** Rel statements to contain direction `Rel_{direction}` to force shape layouts. +4. If the layout is not as desired, sparingly add `Lay_{direction}` to force any layouts that `Rel_{direction}` does not correct. +5. For both `Lay_{direction}` and `Rel_{direction}` statements used above: + 1. Exhaust attempts to get a working layout with `Rel_{direction}` before adding `Lay_{direction}` + 2. Try to introduce the fewest possible directed statements (of either type) that result in the desired layout. + 3. Immediately back out any directed statements that do not change the layout at all. + 4. Order inner objects first when it creates the desired result (enclosing objects tend to follow suit when child objects are ordered). + 5. When ordering multiple objects, only specify one relationship and, if possible in the same direction. For example if you want entity1 => entity2 => entity3, then `Rel_R(entity1,entity2)` and `Rel_R(entity2, entity3)` is the minimum possible statements and they all specify the same direction. + 6. Try NOT to apply directed statements to both inner elements and enclosing elements to force relationships that aren't working out. + 7. Make all orderings at the same nesting level whenever possible. + 8. Do NOT create duplicated, opposite direction statements in an attempt to force or ensure relationships as it does not affect the results. For instance if you have `Lay_R(entity1,entity2)` which is not working as desired and then also add the opposing one as `Lay_L(entity2,entity1)` - it does not help with forcing layouts to be as you want them. It might help to use `Lay_L` **instead of** `Lay_R`, but not both together. +6. Do not create an "All enclosing" boundary - the code for processing relationships seems to struggle with relationships inside this. Additionally, `SHOW_FLOATING_LEGEND()` will not display inside the All enclosing boundary. +7. Legend statements must come after at least one usage of each of the elements you want the legend to contain. + +## LAYOUT_TOP_DOWN() or LAYOUT_LEFT_RIGHT() or LAYOUT_LANDSCAPE() + +With the two macros `LAYOUT_TOP_DOWN()` and `LAYOUT_LEFT_RIGHT()` it is possible to easily change the flow visualization of the diagram. `LAYOUT_TOP_DOWN()` is the default. + +```plantuml @startuml LAYOUT_TOP_DOWN Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml /' Not needed because this is the default '/ -LAYOUT_TOP_DOWN +LAYOUT_TOP_DOWN() Person(admin, "Administrator") System_Boundary(c1, 'Sample') { @@ -28,15 +83,15 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![LAYOUT_TOP_DOWN Sample](http://www.plantuml.com/plantuml/png/xLXhRziw4ltkNy7hV6W3E8sJFfhDEaRzK1vOnmaiPRDtsy9Wf74iN9aKIBgkTzl_laD9PcGpMa7sRJvT1aWKSURCcI5r-FWa5HLgFejghqYFHrn8VDWhRRNQRm5CGWR46JZNpj0Rdz_WhzxDu6P4ziwJLaCaLosZa3rMnFIStkKmHNIl_ksGe-DQJVuHifWAEYDeHEUHyk2xwaJX8vi1KyJ7No3oPWj1u_imK5Dot6pcti_ezskGaZw26_u7oD7xPjvBWAyeUuo0_BT6iBc82bmjOpZdJAKUnqcFdDA0Bp0vCg6HXDhFF4n72Bx889AoahqFIKlUQ2ZxRJx0psSvjLeFVCu2AfRjzehV1ei2paqhmWQFTqbBtdQv240KlTSZ2YIWSWg1flcA3EYIprMr8OuuCXvqVh-vyyOTT-p-m_5wbxcK7wZ_nwFGoMOy7CVfzdivYobbmKA4IW4ZIip1dY0wko6T0Qdt-2pqYKkP9DTklPRE5JBXNFzfJT2E-3hCcO2WVKy5mtgUjWvrHvlq15050PeB4eJIdqiPSjOW322GH77o0EGRZS90MzL-0nOyfMZoNUNgtToE-pVtG_IB4r-k59yXhXvZXDsq7pZdtdXqTN7faGWcIhk8y76gSXvO-6uwAqAe-l5cZilNCCOCg6mG64Vq0QBzt8TGFplBtjR9sWoaacH-vO3wGS_8vu79vxJtQt44p6m44TKfosaOLqmKNSShJaUD5UZn6ZrJqhDwVP-iZFCTne-SQlAcB9N2AF2dRATuNzZXOKlYTtow8PJjpndyrzQXxcyV7jRNQe3S9eBF6cZ6SsETqRQx6gH-SD2kxvTYcCHiCDl6eAxLhOkV_EkLW_Qs2Tfzcc7hu40pB8UoUPOO6V0rz27W5_Z0nJR5nAoBi7OlwlCrDJ6sB2vYba7kNkHDulrjYgk5rQfmV_VI5cFp1IiWMXow7C9cM9h6HldkjYdVtQsLuDtknIj2Zeie5jCl1R2vtLKgss2Rikabsafli7lXYh5XeWg85eSkW2XXEAXKlj4svTER6pl7qUxr-p_WA5w55IpEenp39bcUoTCEcbn254Fb0nWw6tL8OFb-fhNauFCq309WN_i7ISUQprs9pzqpFgCIdz4pFeCIdq7canmNVHx3AUaG6IOxHCadQa45FYobWjaRDBaLuOoA9O48zC5FdX9lQXcIa16fiRI7EuzZBXGYvfnkWSSOWB9WqrTcU-jeINpE63v1G1GdgYJC5LF00hIbyo04vcCUpZSGomSUB1jwepyboOY7FesIk8opWwStSKAeWP0o359YVAwIPpvP3nx0DuXuh3D1I8fbsVRmVkkCt9lXk7knEhatJzuTV-oQVkTVdZCQTWPZo_33YVunXkxlhkTSv_gFZZwSTFisa6NujwHLlIieE1xhpuUpTji-l9kJhdrVaPYM6dGtJgGR5R5FpisFRxiVpWjFyl0ToJ4QZL-Ginc5Kl8d7VrJI3wT_Y_2sKoO8gflUn_FUytoEhyWPtksbzTvztkK-ollSZnmBfnXlpRLkY5DYhK87e45wTr1xSSPMMluluT6v4VjHsjZPhGp2vBEqiJ4P5TakofvtccZ4crjcAdeEgWnB08rJfXGafPzwVAAE9dGLzN3X725sv0qmxMRYZ8m_H20zCNpg5_O5xQoA8YmoNViV5SLEEUKnuQsaNTBe2ISYUScereX2_Cvs-GDs6x4hGWstsqhNqv-vygNXDlXsj1Gh7XxI3wdViMNVDll0NkSAOhKX2IBK4r3HjJBxGfz4xnW7-XjxFAssUJz7Pty226Hi36Ymf-62id8nie1MQIu-9JUbXxAD5KY5PrCjjyizd3HwrmDdL5kz_RkxKc___vFshsPEhx88ctIATzR_BKyLr-UqScgS8PhnldNBE962spzDATkMw2gtgkJ_7pDYrWL7aRGToUq8VuskTrbtoHKNVcDQqNnDraKoVuivam_vsNVE9KBVcxTU5s-SC0-YQEv9F5souGXMx1CkBQiwnWvPTz5lAzlRuOeYpdnFddVxPut_oJnDjdj9jvxpQGLABR9eL2nF-9vgd_oonJxByL6ApCEbbKs1NwLhcVmlrhNJHv5kfvrlxok5vF3bfqtQJ0BaK2ze_-6KWcgkC0RyCrDkt-4HYwTQILB--hxwPURMxaMy32cSOoMz_10Ed4SXNwogwpZgzvUWtJSspT3nqCN0UJupH6v_cTFztMYY2yacKiafGLGqwPeCfj7AjGXFPHR1OAeS0OHnf98yMT6yhLAEn4dCyFEsWYYLN9FjEuaI1tlqlDkNRJIHgRt2UO2bCH_GV_Hryzvbq_0Wlai-Xy0 "LAYOUT_TOP_DOWN Sample") +![LAYOUT_TOP_DOWN Sample](https://www.plantuml.com/plantuml/png/JL1DZzCm4BtxLmpba5Jg9bh4YTE6WE2msqOaPSKfSk8fjUGFovuegX3_dR4eBRayPTx7FCzJ8XbfiKQyqMusYq8u4uNqeQwZNAkVcixBj2ICitU4ZghPspeOwRBd8P4oUghRzmzT7XrVdcih4s7aqTYoGsg7iGevNzG5x3s1GrIeOC9PSYxGMIVGYH51uKakXg2enNFput0Snk7GZPyEh_joAqI7CNbNIcMrsy6coQWJHKa-RhQYl_1YEtxqYrCoNihvSGT5BsqmM6pXbm3-RfNA5QTHXi0vhpX14uBHioJjtOP7xTiTD7rNxJyFR8a8xwf7UFdUPgunngy9yacuj0U-Hv0iiLnSyouOLas44KXRDBmhSRVVrtOb_IKvvofZKdn3y-zLzrh7n4x6hyFGzQpAeXjxZ_c2bFWNCvoYj_zRdj0fllmV "LAYOUT_TOP_DOWN Sample") -Using `LAYOUT_LEFT_RIGHT` +`LAYOUT_LEFT_RIGHT()` rotates the flow visualization to _from Left to Right_ and directed relations like `Rel_Left()`, `Rel_Right()`, `Rel_Up()` and `Rel_Down()` are rotated too. -```csharp +```plantuml @startuml LAYOUT_LEFT_RIGHT Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml -LAYOUT_LEFT_RIGHT +LAYOUT_LEFT_RIGHT() Person(admin, "Administrator") System_Boundary(c1, 'Sample') { @@ -49,21 +104,87 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![LAYOUT_LEFT_RIGHT Sample](http://www.plantuml.com/plantuml/png/xLfjRziu4lwkNy5rFgG1dCP9NvhD9SRwHMc2Svp0KYwtrnO6ROrZOMLI8Ecwlcl_-mrbcP7D28BaDfzM1c9Pd7dccI7ry0NvGoegr7mMEVkamoCk9Dxi5LwEyri0av01SNlkZTltXvUt-ATpsxiTaBtBv78GoLFBA6IF9J5zjtFLNo5wr_znoV69uyY_GXPJGMS4ZUWyKZvyKwqeV6GpO8gCyG-8hDb2qFWX3DIKd3GQcUSp-kq6fAIFu8N_1NByhf7r4Z1Mb3r6GFxd4BmyH0MkbZ5SSgPM7YT9YvpIW2ymEJAXaGJdHnQc9GHVf119MSdU--HAdcWe-sasm8zdEPsVZ_YS1LGicyqrloqMEPmRLeGj7c-JAtdQvY80aVTSzoYGWCef19hcFkdH9P-hSbqSSMJSQ_rvU-yFMzxG-wVhTwuoAO_e-Az7ePDDURYks-vsCXPJoeA529K2HfIOWpr0T7PzEWDIw_1PE2OUPPBSU3LdDLR8X7FzTJxXUlpeC1S2WkO35GphUNP-f1kQf2E0AWZGN90WbEEvb25dTS800aaK9oCWNsaK1jhA-GrOy9IYoNUTgtzxD-pUFlJHBqvykL8S6OUwZn5ssxxdNlh3mVN7Avz4C57QHOIFKvNnmCAtLwCYXB8lR-guV0L3p83AEe5XH4SG7MHUXDh5HVgqHZP689KazIi6r3TwH3uFJ3wjMh_aHy3C1X1HdRASXd79HD5rkEPqN5-3dcpGCoMzgDKEoDeuss3yo9acRyfIAeo2yPJj5EypEpewb_WUdsq9PVDJ2l_b_4YtDu-EQXirG6uJmMTrDEEPlavfsqrrKZiyRDOE2Z5COZQORMDGD-hMnbV-LUgGUDi4xJRDyFpmK3CiXh9v5XWPy0tqFk0REEAYIZ4nwsAioaLzjgOcHiNY8cOnvAv5tYRUhL9SBQnMXRkxbpOVcozOFj6Sq3P48SFYDBRATr-bVFTtLeBtknSl3pdEevXFtmOev7PVgcozAcNJKxILNc_tmkLZmqJb4yq9NG2Hmx1Ngdo3AkNJYnixny7FgLyEE8fNVWLpyx0nYaaMP_AqWYPN4CLGUWE6paOT4bX-a6ejEVmq3OC0s9VkOTAmuNDVu7F_ZC-Wm6VmZ4-lmAUN-YJRnJ6FuOoqY0oJ5QBa4xMW0c-MKi7iDPhSYN16nP9017hZ9y-8FxKCISY8r5ZQmvl7CHSA4JDETy1Z341PiEqhqxLrj2HZpXZUGK0K9weWp3LJm0AqfVCW13R6FDol89OZ7YphUg4_9KcFXsCQ9N4PPuTFJ-A4K1qXPHYiYF6vIkxvP3Du05yXuh7E124fbgNgvltE7NYt_M7xuthdtZXzU_AXRThTV_lkeD_g3It3zwVwOmozFptVlScq7n-_FsrtRI3ByFVaAdjMaBCzrgyFPysclNatErtxl28nBJHeR-r8jofYxvmR7zwqtr_cxkJX6v9ZD1g-86VJ2uNaJrlwaqj-DVnVXBCPC7bKttG-N7OQnNL-GSxsQ2-ky-xdA0_N_jMmvtvq-rrdgdL3cXIT21w11Qkp0-Vx1TcuyBUFHkIxy_ryQsGqKmko6gM9YSakptPTygpJLYMQsZ1LqKrGOvW7QfmmeIGj-z1bdxYfq9VLmuHmYTEGLOQR9nK5OFec03aMpwD-Pf_PsY8dmZRVeVjDbU1iAuzDtaQkb41XE1FFItgrH1OoSR39ss1LYTiHBBvLArzCVjVA5uQhVcneA9OyFIIVLdxvXtpLru0TpXH5QaAIHQYc8IFgvLQ5OnCyPnteRwtogYpo_e5EumWXaR0nec8y3HMIaVMr0x98SFNTwhJqIAvI9LBHoQJwOh63arxhkkyECgktjszEkzrtFsdrPkhu8fEqIQTuRL5-UlvxUaOdgy8fhkddNpE96osmzTFikcs1AdkkJhBZDIjYPNZOWbwPqBRuM-IgoxwLK7dbDwubnTzaaIVxivWpVP-LVUDKAFZPUUDLySG11oIEvfB4rQO9GpPdcl1iMTSnCig-YtZVtDtsKHOpudtwhjs-RFmayJRPxIRUUutaob5iaqEkOd_0_LJtz9Sfzj-AZLPMFnYhT0ZyAbrFuN-rhfiyB5stUBoyhkUGSwn_672ST0DAWrc8Z6ej_HrA9QZY0e_4jrVnu-CwsVVeB8vW_s3r3cVci0MCXZIE4US1HgGLnr4uJjQNDNpKsQkJbdVtkk_ww2A0dBm-9ZV_wkYsLXJnXIHpYMoq5Ee4jCZDvf4AjOpwABmA157X32AC9P7RZvJTAxLgH9pK31kT0KJhh9vetKkGEjwLxzzvQAMDJEiJp4TG4d-2_j87qLcNFu05yrdqVm00 "LAYOUT_LEFT_RIGHT Sample") +![LAYOUT_LEFT_RIGHT Sample](https://www.plantuml.com/plantuml/png/JKzDR-8m4BtdLtZP0q62HApsj2Uo4OLAq4OajEefSf9fiUGFonuhGbN_UySgXVeoyhoFUM_baJiCIYQ_XEvb682T4At_b-UEZzcRm5FeWWVN6usWCUkDogtaEceM7WSfkhpykwZYwhZVvOfx14UhjYG55nfSPgD_iYjU7ezDkrlVDUtXVhDjqbcILE2yqIaVbD1pDYdY51uTH-CciwG-avjg_vkW1-xEQR-SisdDbPKmdR7tXD6xtab7w5fkBVayGySAQwNeEGgZ9xGgVyzPKLVPmxeXYGFs9rko_LCPiK9ACteMUtg6Xb59oucYWaH1jrWp2gHQ38K2IRSyPVkuf4ln2oIV2ut0v03okzKjrj6JakQsQQgQM95qHMys6q1FNuZZrHdrKx82FGGbFm40 "LAYOUT_LEFT_RIGHT Sample") + +`LAYOUT_LANDSCAPE()` rotates the default flow visualization to _from Left to Right_ like `LAYOUT_LEFT_RIGHT()` additional **directed relations** like Rel_Left(), Rel_Right(), Rel_Up() and Rel_Down() **are not rotated** anymore. + +```plantuml +@startuml LAYOUT_LANDSCAPE Sample +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +LAYOUT_LANDSCAPE() + +Person(admin, "Administrator") +System_Boundary(c1, 'Sample') { + Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") +} +System(twitter, "Twitter") + +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") -## LAYOUT_WITH_LEGEND +System(S,"S") +System(SU,"S Up") +System(SD,"S Down") +System(SL,"S Left") +System(SR,"S Right") + +Rel_Up(S, SU, "Up") +Rel_Down(S, SD, "Down") +Rel_Left(S, SL, "Left") +Rel_Right(S, SR, "Right") + +SHOW_LEGEND() + +@enduml +``` + +![LAYOUT_LANDSCAPE Sample](https://www.plantuml.com/plantuml/png/NOzFRvj04CNlV8gjUmYM75kfUkef5ApaG1nae55FQ0sJUANzizeTXAAgtxqpCNQiSa7lDxFllRcFA0EEHeio-_tSDbsPxOewpwgjgANn6f8lolPw740S4NtyiTa4EQtV51x7mnWXzCuYM5ptpcoybfQzRYCEMXqs-VVRYb7xL6wCZ0Y1K9VJ2waiXBMdtIJvFpXT9aa58JgRoi4eknABZFygOf3emcAPrEzaPhgVRhI33EzfVxSIDwU-Dqln9n7qNMBI2GwTz9vyNk0WCk-rwYKgPnU4ygyhaTNLUhTjw4a0yMrz9vv-vJpBj7PJ57nc5EW4tUWbhPXHew8iqKmA4O90PK1JLgHkV-TsAPw6v3ElqJ3PWpvVzLchZH0vxx5fgfgsUEao_RHv08maWN-lmPdh9-VGUhLWULOjIT7wAr8mATnahrZ9h8HNl69xPdlrTiIvTjTwSXTrouNPaHaRVT22A8kPiza7Bucpc3aRdWPx6bpiwyVdbwxSFcntHKho7kmm6lqF "LAYOUT_LANDSCAPE Sample") + +## LAYOUT_WITH_LEGEND() or SHOW_LEGEND(?hideStereotype, ?details) Colors can help to add additional information or simply to make the diagram more aesthetically pleasing. It can also help to save some space. All of that is the reason, C4-PlantUML uses colors and prefer also to enable a layout without `<>` and with a legend. -This can be enabled with `LAYOUT_WITH_LEGEND`. +This can be enabled with `LAYOUT_WITH_LEGEND()`. -```csharp +```plantuml @startuml LAYOUT_WITH_LEGEND Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +LAYOUT_WITH_LEGEND() + +Person(admin, "Administrator") +System_Boundary(c1, 'Sample') { + Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") +} +System(twitter, "Twitter") + +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") +@enduml +``` + +![LAYOUT_WITH_LEGEND Sample](https://www.plantuml.com/plantuml/png/JKzDJy904BttLwnue2JG1kF94xKIC05iR95uQhRjA9linsPtceOO_xkp4S6zJ7RUnxotyCWTzaf6DqAtik-07H6jVqXJnuVaK-2nRteFhZKQGMFI6fLQoNNGp3nsKZHfVZyhmcg_tQIAUmH7gped1HSQN6A3VxJ9tb_sLNruhjRrPhbQxfxYIHGLuBpHCU-Kq5Csoi8K7Xr7uqQJg3oHdQeVJQyxxavnEv-oSScLbJ2UiA-8qRiSYWTeQcuj-HoWOPcrKhGSXT4ZMkMtKvQLHR9RLYHnmEwIETk-vG7Bf3I3Pw6ePsWOjRISAAgNAEWMgmQ1r8kXK23fbgTit-TqCVw2v7Ec4HYzWlnhTOsrzwIakQwgeYHM85tGgyqAqDCNmlXmHlsNB41tlP8_ "LAYOUT_WITH_LEGEND Sample") + +Instead of a static legend (activated with `LAYOUT_WITH_LEGEND()`) a calculated legend can be activated with `SHOW_LEGEND(?hideStereotype, ?details)`. -LAYOUT_WITH_LEGEND +The calculated legend has following differences: + +- only relevant elements are listed +- custom tags/styles are supported +- stereotypes can remain visible (with `SHOW_LEGEND(false)`) +- details can be displayed in different sizes via the `$details` argument + - `$details = Small()` .. default; details are displayed with a smaller size compared to the legend labels + - `$details = Normal()` .. details and labels are displayed with same size + - `$details = None()` .. only the labels are displayed + - if `$legendText` contains `\n` then the text before is the label and the text behind the details +- **`SHOW_LEGEND()` has to be last call in the diagram** + +```plantuml +@startuml SHOW_LEGEND Sample +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml Person(admin, "Administrator") System_Boundary(c1, 'Sample') { @@ -73,30 +194,359 @@ System(twitter, "Twitter") Rel(admin, web_app, "Uses", "HTTPS") Rel(web_app, twitter, "Gets tweets from", "HTTPS") + +SHOW_LEGEND() +@enduml +``` + +![SHOW_LEGEND Sample](https://www.plantuml.com/plantuml/png/JL5Dgzf05DtFhxYr2oDeWgMhhfgceWkreObr6IR9RHsOZs7cXY3b_VTtWpurcqlEn-4Svdia6MWm6ghThtEptsmtnvzGIUCrYa_ATdhe4Iv4FdxBiY37z9-Yoz0E4KFdBA6bj7CcyrhQAMOLgTUgpOglgtA2JeTzPcGa30mr1JkaiXXIpreXIWpHsKJsHjabpFBfgaX1aWkpXQYkR3JD3pVONePhqgsNCBzrco_Wlm3-7f79Y6qZlUUSCxQGUwzL9qavEsEe-Bo4l2hJuwPcIq3uagxXyAUOk5nhDqQO9aKW1xp7IvQOGPFo6g4U5H4686LGAukHkxtTsoLq8pddBcDI_4RziUfPwnJPoNTNrsN5gadqO9ynMwJ8lpYTly6PLujuUQLa8Tu1 "SHOW_LEGEND Sample") + +Legend labels and details can be defined via `\n` in `$legendTest` arguments too. + +```plantuml +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!endif +' $legendText with \n defines the label and details of the legend entry ("backend container" is label, "eight sided shape" is details) +AddElementTag("backendContainer", $fontColor=$ELEMENT_FONT_COLOR, $bgColor="#335DA5", $shape=EightSidedShape(), $legendText="backend container\neight sided shape") +' $legendText without \n defines only a label +AddRelTag("async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine(), $legendText="async call") +' if no $legendText defined, $tag is automatically the label and all additional displayed properties are the details +AddRelTag("sync/async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine()) + +System_Boundary(c1, "Internet Banking") { + Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device") + Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API", $tags="backendContainer") +} +System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") + +Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS", $tags="async") +Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS", $tags="sync/async") + +SHOW_LEGEND() +@enduml +``` + +![SHOW_LEGEND Sample, $legendText defines legend details](https://www.plantuml.com/plantuml/png/hLDHRo8t47xdLqpsSYf815HTxwKIqd6mxUL480BIzk4aDBiUm3gllR9dIL3L_zxnRjWIagelvG7js9xFt_VDvq-1qNDLcCuFa3jx8C-W6Hurxm6LqgoTHIDRHO5MWT6M0FskAiWot4oNwMoyllqjtTpE9xE7QJfA1iF1805sK0K2ut8qvjYvqbjuVq2lCJEqeISTE7IJo-Qarm6uqZOtbI9uloFUj3q7D1MzrJAS_BIPECiepFoWZ4gko0GwXzepb-7duT3Zus0dogfCoFbSkaJ5GBGDIuCskd0JM1cT2UZDVLnwk9iD2mnC_irxhD9RCUxQq4w-r_JqxDmt2ugsSZ80xmaCPcGW-gT804m0jsqswZuG5lu8tIJ3_7kiyzCz2UZGTFSX8RtRCmIjI47OOqbnzuJOWyvOgTHG7CmQTorOopdfm_LMYeappe-kqrbwbyxNcryMyZTPp1PBsSzspMxoxiE7ZzFnnzXJNpLAu-MhUFSgrjrU_rprw3NrR_OrtzuRNhcAp-rorXm16ysrf2MPMWw6eyqZ7wQdauRnShdulIKVi_cl6oi-6XfDCUn9pQI-5D3WGunhJLC2QzqBiWr35HdWBZgF5Ri2MTSHlvYpB9q_7wL3QV182ahlIlAiIVeznQxJ1C_5HYx3_qUnOpufxdKwgsDWAZQVNMKL-cCt_r62TMkPl2M6psY_QxjBUl1d1-JNPgTRk4mRsc1Polcxke1nMIPIJTxruGyiq6iRotll3bf5UM1qeJaElye2yIdpxMrPSnjiAvitFcaM7ntaLH1doGSuQ8mzsaD301GTT2v1kg3td3xXfuN2-FusaZCwnuWRMNt50_PXwkIO_wVldEz_yOfK13XfvXz6hzwNaFhhv6_wnDrdc4sebw9jScphiQ2Jpz2SZYnMx7pqp9YJJRaij5IaqVcYLWEOnIVJUjG7p7CP9yiNUxG1Qz9I4US38TMHKBsOtqkp7W85OT3almzVLulvyCjwVRzgbJPRWYH0ctbyrPcxiFn2Qujw5cG9oTti4laivp6SNoJ2i_JNT3xjzZgV1BqgpDy0 "SHOW_LEGEND Sample, $legendText defines legend details") + +Legend details can be deactivated via `SHOW_LEGEND($details=None())` + +```plantuml +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!endif +' $legendText with \n defines the label and details of the legend entry ("backend container" is label, "eight sided shape" is details) +AddElementTag("backendContainer", $fontColor=$ELEMENT_FONT_COLOR, $bgColor="#335DA5", $shape=EightSidedShape(), $legendText="backend container\neight sided shape") +' $legendText without \n defines only a label +AddRelTag("async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine(), $legendText="async call") +' if no $legendText defined, $tag is automatically the label and all additional displayed properties are the details +AddRelTag("sync/async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine()) + +System_Boundary(c1, "Internet Banking") { + Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device") + Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API", $tags="backendContainer") +} +System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") + +Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS", $tags="async") +Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS", $tags="sync/async") + +SHOW_LEGEND($details=None()) +@enduml +``` + +![SHOW_LEGEND Sample, hide details with $details=None()](https://www.plantuml.com/plantuml/png/hLDHZ-8s47xdLypczbIGM51rlPTAICT1sjiJ2ojWspwS54tY8LZds97ji8kg_lUE4nAbx5PzAGyeu_7CVDytdpyvZzPNXHhy09dH9x8Uf8TdwO-0GaWlZKR5gQ90BK19JO0shmhI7kwMstWrtz__5YVtwyNgQHdFeibqCed06wWSWJ8PAdKUtCW3l3-XbPWgIkX5Ek-6qNLnD1e0t4YTgKeGlC_99rtD2LL5RvLC5pyb2wCzCZ8xAGEJ6rAE-gsEtfVkv-dKulCaPsPLok1inbNCOiBSfgL27LIuSruecNBJkyTmzFImcXReFDatvsWX3opShQASl_VqSb7kcmP11xxfm1y95AQa8EWdY1ie1-PG9vewO1Js3CCenUnxYBDsJWJIDTLZY4ZcHmzE2XBWZbXIoBOTHp2O2n4h2elPOzurwp17OxWzSB0mojZPRRoA7-BrFlbbmt-BpMgpvNoQDzdetOSF7vVpZw6c7ZMBm_1TcBqByN0qxhEUlOR-JR_6Etf3ArFvlbn6gpDWmxccj2LLqq5trbd0u-cbvJ3VRZU_T-23D_yriVDdHRCbkYE95SVN19h-4EnQmsJ3QjE_SK4e0WBCW_9OULEWbxN5h_RCH_td8wHZXvr9G6bDITPBudfBeQhTO9zim3BzVnWRxrl6ey5WTtQUYkIpgRH0UnvcFxAnxhKdgyd3PzJVfSwZ4Vmv0FvrtXaM9fMA4YnBllzG1p0louYZnRin_845Mgb3-6ZDIOf03vGif0_Bhr97llLyDorjfi6XqbcZa_Iieu6iSgmiMGSdYQ56McW0WA2JpDX8L_0kxcDyaY7C7-y3E2Kp37q3ggzumZ4i3L-pqDNryVuNhW256qVD_jtirVjYK7-r-iOlVdXfaxZwACZ6rmuM2sfrXkPsGB7pnWRDb6fbolYWWyA5nXOr6y0qF9bEep5Wbl4wFNzvYzfX3PeZyjc4GGtOLFtzmJ_5UdBa647Z_p5ytMtMqo_x_UEkOzgak1CtIjRXLQVcIl9hhctNdf7P90-hgyvzdmTpVc4Bh-9Vu_LoU7jv5RErQQpxYOTLXVeR "SHOW_LEGEND Sample, hide details with $details=None()") + +## SHOW_FLOATING_LEGEND(?alias, ?hideStereotype, ?details) and LEGEND() + +`LAYOUT_WITH_LEGEND()` and SHOW_LEGEND(?hideStereotype)` adds the legend at the bottom right of the picture like below and additional whitespace is created. + +```plantuml +@startuml Layout With Whitespace Sample +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +Person(a, "Person A") +Container(b, "Container B", "techn") +System(c, "System C") +Container(d, "Container D", "techn") +Container_Ext(e, "Ext. Container E", "techn") + +Rel_R(a, b, "calls") +Rel_D(b, c, "uses") +Rel_D(c, d, "uses") +Rel_R(d, e, "updates") + +SHOW_LEGEND() +@enduml +``` + +![Layout With Whitespace Sample](https://www.plantuml.com/plantuml/png/LSwnReCm40RWtK_XCZbI0qkdJca1jGDjew2A4HdxL91iOzbdjNdx7eb4meJlk_y_SOWe0oPhU2FFSqBUJJZoRfmGefSAU2kjDy0U9gTCqi17H1-VYoB8t_o7icb84OAQ7OB3NCssy4QwvU8-eZRJK9HF--D2tnzDOML424HzIGqvEGYvfonZHmXnTa8-ykpwv2_PZgqfCT1YdVXhHYE26Xs5sZCTjK8HNP-yt5JrfbhTLrVkwpyKG1lwvloMhk_Jx0IcFot_E90gQKmaNR0I98emHRWPWTuObGbWCQybNfYrxrzTtzHlzMSbTkm0JYTh_W40 "Layout With Whitespace Sample") + +Therefore a floating legend can be added via SHOW_FLOATING_LEGEND(), positioned with Lay_Distance() and existing whitespace is reused like below. + +- `SHOW_FLOATING_LEGEND(?alias, ?hideStereotype): shows the legend in the drawing area +- `LEGEND()`: is the default alias of the created floating legend and can be used in Lay_Distance() call + +```plantuml +@startuml Compact Legend Layout Sample +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +Person(a, "Person A") +Container(b, "Container B", "techn") +System(c, "System C") +Container(d, "Container D", "techn") +Container_Ext(e, "Ext. Container E", "techn") + +Rel_R(a, b, "calls") +Rel_D(b, c, "uses") +Rel_D(c, d, "uses") +Rel_R(d, e, "updates") + +SHOW_FLOATING_LEGEND() +Lay_Distance(LEGEND(), e, 1) @enduml ``` -![LAYOUT_WITH_LEGEND Sample](http://www.plantuml.com/plantuml/png/xLXhRziw4lskNy7hV4W3E8sJFfhD9aRzK9fW7IUmbCtURGk3jiQnS2LI8Ecwtct_-mvbcP7D28BitW0BN1cmPN7cp9aHUVZuA1KLQXP7pZxfy8WBYJTxfPVZ_1R096H0t9vxu_RzuUKjVdLkUxS3idUPNWuYUMeHXUon8gRlTgxwIqJl-jykEJvn7Fb7o18gQ4pGYCuYvSDtrOh2HnO3KsICNo3oPdD1auSmK5DoqcZadiVq-mr8IH_12_y3vFXT8-ybOAmeUuo0_DSXU7c82bmj4hZaJ2qzJj8MEQK1dsDoP48Z2SxFF4nB23xF8DAoahttwPK-qL3sqto0dyzoEZyVyHaBg5Wqcoj-6omAE3Ui21iytgPN-hJDHG2YwBb-eq02AgSGQ9hxf4SNVAQglUA88-DUw_VRUt_OyeRUFro_SvLBUKJ7VpmAdMp6mtNTThUJivXI5in5g1GmeiGCx0wYi-lJ64Yjm-DmJ3pA9BdnQiwohv09v_hdVC9r_z5XBWG4pGSg6DRpxFn8DpH9Hm1L4A2v844enpCfGyxgX044aYXEHa2-qIWCj9Np6x3WAKMJxofN__PksBrzwADValfofNYCkFeT8-ocVS-zz8U3wqzNFebWehIB21-dAkU1XMylUqK8LGTlvhXu1KFCWCewWM54Hn0Tv0P2xU8YUreZQpsGIfBvbGFg6zqZdmScdvUjNuiZO6O3YAXEMKx3f6AYw3fSSJgkhq1FrkYPabxKQWTaPPnlC7xaJ9CtPQaKHi5uodQAzuKT7PrB7CTd6qBP_9p1Vpq_qktDewFQMWsGsqJmk8vcFFUkCzfsKvtK3W-RjODI39EO3MRR6DIrkhLnoBzQEMXlcw3TfXcU7nvgXkLGDiyI8mE-Xju7784ZBhOf9cPTZBLhKP-lgOcnPN4Hinnono9RDUvkKrmjh5Q5kxkNjXYRpranqOBGvH0smz8qDiftlqtvxk-i1EztBruHSb94iPX-EO35xRvIsNhRb4rFqLPwlTqBLumD4rLCj21q2KG1mrwbyWssAPzUtDWv3dv1_Oh1KRoAArYOHpc6JR8yawSLDBc2A87A6p1qDkgGmlA3J6l9uUTf60J0ldOFquOrd_iId_jdV0ObFeDdV7ebFhtC9zqkZda2PwH5P9Yk42MVg3aLUBEG2kBNQ78dmfYA1O48zCPFdX5_QXcIa16fiRI7DqiIBXGYvfpkW2SOWB9WqrTcQ-jeGSQSCRo3W2XEL4cOQwQ01MXBPq48R8nvkDz0B4OyMDJrGdzAqZSUZccKncMS7JuzIL92TOIKOR0ancSglUUJzU01V8E89peJXAHObcqtxtVkmBlj3zkVLZltnkdRamzjq-x-otS7_LPlQ1c-FzKVO-ZzxldkJQxz-FZzQRjh0rc6VqklgcS51TjZFNmuQpRjpRlPwThd5QbfgK5xOqUwKH5xvzpuyARz_h9m9m_VaHoZqV05EPktK4h-jAK_XUINtVybE9kULKZrJUV3PQTHNkSNv6ptzl8wxtwEyd3jNmrxxYUtttMcMZUaIT69u15Oi3mxS7vSaBKB__jeH7uuFyutUaOpio3BNfgQcEoAR5SbppjjLAAf3JCLNGSrXaMWnWaJIjEo3rtsYPi9VLKzJ0bNE0rPPhXsKb46fcy2a6FnFEeNzeMjB0eYRF8TkjzL1SuvvR6XRUJT4YW9P-9vwLkja8KPpXPv0xORSJk2pNVRofUJtxdo9U5sE3Oq52kU7fBFIx_YGxxjru0TpXH5QaAIUQYc8IFgvLQ5OnEyO1teRwpojbda_HsTnX528c5ZHCLu6Yea8-ih1sIHukgxvMdfaLocIgIYaydsYyKEJdgjwxuxoAtUthuvxNRV_QBLcwdZYqpI9ftojKNrwVclwHcTh0fdkEOz_pcJkD42eqlMhjiIgEhdwYJVN_CYLeM74VJT2UN5toAtc-nR2LLNVkDQKVnD5aMo7oUSwVkyx1kdSi7FpHkloYSEE219D9CasMwQC6GBfWdFbdKT8wVikuZtpTrj7sKn9zwdxzhjoyOl4c-JtMxYlTT8hmB5DZaKAlO7t4zrJ_-l5FilnJR3-CzNx2nGaM9dpI-lsCNad6TwevFjBMaGXqYfrjA_eLI2AYxmj7jpWJu-hfDzZyP91Fi7o-6PcvxcC1hI946S1nYHLf94uJXTEjRmKMUlJbhUtUk-wwEB07Bo-fZS_BEZsrfHnEUIp2IoqIgdCz3w5SyY5Mg5z55J5GYYmXWYZ2MHsy-CtIkrR4ISp0mRdG54gwoUQDrBa3hUbU_VUMYbZKph4ymdK1B_WlxHPynvbu_0WbaS_Gy0 "LAYOUT_WITH_LEGEND Sample") +![Compact Legend Layout Sample](https://www.plantuml.com/plantuml/png/RP5DQxD04CVl-obMUU1HQ9H2JuL2qcZJWar2qjBZigwJH5XNsHrfy-qxniH4w4LdVl-N4Pmwb1RRIZElD4gt1V03OkCUuzZAxsXVug7DMmTMrGR1OAJgAcwqD5rcuh3GPHxF7oRh3ds-Pt4b7O8b9EQKaAK16pLTFsDhiAusWRpZVZ_ocH-omHRa90mRV_PfHL07GwRjaLghG17gHpuVHOjHDBcD3bYaFnW0AVIE-DMTthhP1hJOTD-O4rLIQqUqWqb0H15i7LmPWMB4A4m0EjOK4a-OURlMA2nhmxDqaIwJ86IU1MojuVvErn9BinSQzc0AdtdqlFZPzdNr9LworUpZRRaGv_Ib96IPF8gaT2YDWW6Vpj_JMVQVU_zwof-utnyGqeBqIVgp-cmFIHzrd_cbUaf5z5D_0G00 "Compact Legend Layout Sample") -## LAYOUT_AS_SKETCH +## LAYOUT_AS_SKETCH() and SET_SKETCH_STYLE(?bgColor, ?fontColor, ?warningColor, ?fontName, ?footerWarning, ?footerText) C4-PlantUML can be especially helpful during up-front design sessions. One thing which is often ignored is the fact, that these software architecture sketches are just sketches. Without any proof -* if they are technically possible -* if they can fullfil all requirements -* if they keep what they promise +- if they are technically possible +- if they can fulfill all requirements +- if they keep what they promise More often these sketches are used by many people as facts and are manifested into their documentations. -With `LAYOUT_AS_SKETCH` you can make a difference. +With `LAYOUT_AS_SKETCH()` you can make a difference. -```csharp +```plantuml @startuml LAYOUT_AS_SKETCH Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +LAYOUT_AS_SKETCH() + +Person(admin, "Administrator") +System_Boundary(c1, 'Sample') { + Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") +} +System(twitter, "Twitter") + +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") +@enduml +``` + +![LAYOUT_AS_SKETCH Sample](https://www.plantuml.com/plantuml/png/NL1DI_D04BxlhvYtxw4fj0aLJvuQGx5Wgy6aYgUmILQxi1_BxeHGnF_kBDLMp6N8pFFnFBiAo3qEMi4sVttSrqrUDTNzkYusK77jb63_fEdKq0iu8BfmasMUZ-cxnCFG3a7upXeK1jFEwimfRgBM8c2lP9iLruiohlQxRQPvGE5frHJ4uD88dph2ClRNE9anLWeVh4buhwMPmoIFKmRq7AsVp5Xr937TtDh1zDmVasuvX-afxtG67mpeEziaesWRxXpfl8WMSkUKx3XAQoQqAlxF8Q_Az65T4yKBk4gNi7ikuYrNoeu1Oiq0Q84wEauGFIYKv0NrA95Q0Kej57a5olRvdIx1qv5qJh0Od3q9zTFg4ciVY4bpKzTbHQW8EbylCdS20_sAEDwyrRyfAs7w-9fV "LAYOUT_AS_SKETCH Sample") + +Additional styles and the footer text can be changed with SET_SKETCH_STYLE(): + +- `SET_SKETCH_STYLE(?bgColor, ?fontColor, ?warningColor, ?fontName, ?footerWarning, ?footerText)`: + Enables the modification of different sketch styles and footer. + +The possible font name(s) depend on the output format (e.g. PNG uses fonts which are installed on the server and SVG fonts have to be installed on the client). +Additional is it possible to define comma separated fall back fonts (if the diagrams are exported as SVG. Atm +PNG does not support fallback fonts based on a PlantUML [bug](https://forum.plantuml.net/14842/specify-fall-back-fonts-is-not-working), but this could be fixed in one of the following versions) + +```plantuml +@startuml LAYOUT_AS_SKETCH Sample +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +SET_SKETCH_STYLE($bgColor="lightblue", $fontColor="darkblue", $warningColor="darkred", $footerWarning="Sketch", $footerText="Created for discussion") + +' PNG with font jlm_cmmi10 (typically another font is used) +' SET_SKETCH_STYLE($fontName="jlm_cmmi10") + +' SVG with fallback fonts MS Gothic,Comic Sans MS, Comic Sans, Chalkboard SE, Comic Neue, cursive, sans-serif (typically without "MS Gothic") +SET_SKETCH_STYLE($fontName="MS Gothic,Comic Sans MS,Comic Sans,Chalkboard SE,Comic Neue,cursive,sans-serif") + +LAYOUT_AS_SKETCH() + +Person(admin, "Administrator") +System_Boundary(c1, 'Sample') { + Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") +} +System(twitter, "Twitter") + +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") +@enduml +``` + +PNG with font `jlm_cmmi10` + +![LAYOUT_AS_SKETCH with custom style png Sample](https://www.plantuml.com/plantuml/png/VL9TQzim57tFhxZp2ad1JTQnfq6WcGajhCt2xBRqoSZoJQD57qQwMXR6_lkkcgJEO5jUP9rxFiv5kGeaF4MZ1s-KbJgs26kYBdoSJBpOZfyLhMCJ0thfBA6biNHcqcbXa-OYKAjLCoa-N2mJT7ztEp4Y47g6we8LGbdquoxv3yfvLPUVvrLnKvVLq-ryTDOy5quxFysqUbvJeoDcEPojM7V0Zz1MUAliaTqAl_7OxhcEqnxtusbMRf3akXzK-8EcMU5H4BQmSXvQ5MGCGJcRdGy6GrWkhc7BIq9AXM_QrD8OTVaEHhJhb1HQxq1OHslqUueA40EsvtzP9yqNmk0qwttsAUN3COKD6o4tBru1xaguPcybyy8P9Q4KDe4vz5V-NWkzQPpmBPJpusY14NEGqGVrdJy2Coy2UhKwBPuYNIJ8NdEupX3-r_nVZKuA_TddfCwnJLycRNyxU_foNzMpyf0vOco9FZWx4grHDeTibauLo0jodZNbBX2Q-fEBjXL-DvANEGnBOJgDmtFuEG3-lVwxHbjiQj5rxFE83SowJlFwb5wOeU9j3hDoELxCAvPuXFVZIxXxAD9ifhNRlZod3q0Ef3ETO8g9cXHdGRLLHEY1b47DMO6x_Jgq6z5-o3u7MbhsA-hZLdsj-y1AFc-gQbaoYqbzwTxc6Ydm5TEnyiwSIgxGjj7etm00 "LAYOUT_AS_SKETCH with custom style png Sample") + +SVG with fallback fonts MS Gothic,Comic Sans MS,Comic Sans,Chalkboard SE,Comic Neue,cursive,sans-serif + +![LAYOUT_AS_SKETCH with custom style svg Sample](https://www.plantuml.com/plantuml/svg/VP9lQzim4CRVvrFSl49TS9DrxDKWqCo45jPcONPR-ih8ygNHeZz6EYqBOzzz9vBK6MFB6rbtpptFxr2k0mbFqUZH6sMbZXt2cgWF7oSJBxRZ5qNhsCQ0NZfBQ6aidPdqMjWqSnceqwgTb1ykbwdqS7ytCI8GUYur9Ky8PT6F--G_gkPrKtsUr-LjKzNFT_Fyh7qfdNP-ccdrigPMHymAE5lntA5-B6s5jyeUrPtm6u_TNkiuxMdVdcRL1ackXqQDFsYQbHu5OGShvw5JGSOGbBFPnMXq3il53MnvIKYfy4sRHXgZhjv1JhjUIQ7r3eHrj4Q_bwW0CM1tmRD_BvGK2s5mcWrE-vpgyPZ3bgsG6qZQ0FSLtB2xaaNfZ99G2PkA1GnN_buBlMcTy1rd7biBZ5Y0Z3wex_mHM7aPqAlLANgAT94WUyrXdFzn_uld1ETFcXEO8yk0adQ_cpr_UQYRMNN8pBcsH1-SpKLdb2qWcwLJ1VA2d4-0kq1ecayksaxuNIwl2ZYlXEardb_0pn7mx_NVbM-nRKJViyyJjZ3hUytBKtfXBfLl2vXLo_5YNlE8HtW_leBxnpBrPbgxRNfEfW5o89tf1KjCrAGu2-gj8a8Ff0ngpWhCzkj0bzE-oJu7MLhsA-hZLWFMG-19Fc_hUbcnYaK3z61pWnJuYkbOUMTEHwxHTj7etm00 "LAYOUT_AS_SKETCH with custom style svg Sample") + +All available (PNG) fonts can be displayed with + +```plantuml +@startuml +listfonts +@enduml +``` + +## HIDE_STEREOTYPE() + +To enable a layout without `<>` and legend. +This can be enabled with `HIDE_STEREOTYPE()`. + +```plantuml +@startuml HIDE_STEREOTYPE Sample +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +HIDE_STEREOTYPE() + +Person(admin, "Administrator") +System_Boundary(c1, 'Sample') { + Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") +} +System(twitter, "Twitter") + +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") +@enduml +``` + +![HIDE_STEREOTYPE Sample](https://www.plantuml.com/plantuml/png/JKzDQ-Cm4BtxLsYpXpYGs6JPqvxYTKrJQ5eJEoqz6TcUDW9z26c42QN_lIEQ9jLbqBoFUM_ZaJiCIYQ_X1va684T4Qt_b-UEJzcRm6FeWmSt68sWCHkCogtaEcfM7aSf-hpykwhZwh2xpnNt28vMNKaABZIup4R_P7jtKtLDM-shn_Qbhj95ajJWlD4f7vNGIpOhuXGU7KVZPekaEP6NwlwRe4VkJkcmNh9vmvMLC5-mzuJHkrn99-WxRYtvF4FF2ckb63WAesUqAdylMT7KsKFLaiG1-vEjsUwfZ5WXfPayYoqzGyEeekL4KK6Ye5kidGHIAOP2WQHRdh9zdDEb-0MIpvb6OB87-Ttg6klWIKbpsxPrGwn8kg1Ncrj0Jr-8uzKPzLEo0Jq69Jy1 "HIDE_STEREOTYPE Sample") + +## HIDE_PERSON_SPRITE(), SHOW_PERSON_SPRITE(?sprite), SHOW_PERSON_PORTRAIT() and SHOW_PERSON_OUTLINE() + +With the macros `HIDE_PERSON_SPRITE()`, `SHOW_PERSON_SPRITE()` and `SHOW_PERSON_PORTRAIT()` it is possible to change the person related default sprite or person layout itself. `SHOW_PERSON_SPRITE()` is the default. + +- **HIDE_PERSON_SPRITE()**: deactivates the default sprite +- **SHOW_PERSON_SPRITE()**: activates the default sprite "person" +- **SHOW_PERSON_SPRITE($sprite)**: activates a specific sprite as default sprite +- **SHOW_PERSON_PORTRAIT()**: activates portrait instead of a rectangle +- **SHOW_PERSON_OUTLINE()**: activates person outline instead of a rectangle + +"person" and "person2" are predefined sprites which can be used as default sprite too. -LAYOUT_AS_SKETCH +```plantuml +@startuml predefined sprites Sample +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +Person(userA, "User A", "with predefined sprite person", "person") +Person(userB, "User B", "with predefined sprite person2", "person2") +@enduml +``` + +![Predefined sprites Sample](https://www.plantuml.com/plantuml/png/XOxDIiKm48NtUOfuLrxmDY2kNFLdgr2GhYLjHXj89c5cGb_VH2m8BbpDOVZupkbPB4c9GMS21nyUmMdEv0LOlzcO0wWxZrie3lGkaldP6B97z-bbBsjXe2sX04gtfMXoiDXiDnON_6gcfzlSNilhYucM1QY-tgU4OciJTRcoIir0dF2-oOO7VLdgrSEbfgEM_1scypVVW9zq_QqOJyNuh-An4MUygXxGrK5V "Predefined sprites Sample") + +### Using HIDE_PERSON_SPRITE() + +```plantuml +@startuml HIDE_PERSON_SPRITE Sample +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +HIDE_PERSON_SPRITE() + +Person(admin, "Administrator") +System_Boundary(c1, 'Sample') { + Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") +} +System(twitter, "Twitter") + +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") +@enduml +``` + +![HIDE_PERSON_SPRITE Sample](https://www.plantuml.com/plantuml/png/PL1TgzD047tVNp7MXvj2Ry8LdtowCGPRi3KqgJw6JJBQXVrOTYU48lvtPsbj1VCoPCwPyx6laMIWsMZOxZxLVLCVsw-7lcsEkww6LXglKRnHTjJpX70cyl53KGIvv3yLdUTXZXX6PmajvQCpXTVI9hNdI9DMGr6zVsxIwhJ_KXWP2GEl-eelfB8OSizS8VwtpjP2D1YYivcSZB8RM9LfgaX1aWkhjMWlaT3q7zri9naksVYoWQThugSr_1B0tzqeMt3efVUiynq7ABtNQfIad5tngdgxWR9jyaFTyKb0U9U_mFvRbR1IQxT4I4KZa0DkwILJpAn9iHTqYoB20AGCQlQAdEttBLr6Lv1rRZG6nH7rtrQFMAU8CVbjkwvfcPL8T_GXynafyY-cyICuy-_9AzeflUSV "HIDE_PERSON_SPRITE Sample") + +### Using SHOW_PERSON_SPRITE() + +```plantuml +@startuml SHOW_PERSON_SPRITE Sample +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +/' Not needed because this is the default with sprite "person" '/ +SHOW_PERSON_SPRITE() + +Person(admin, "Administrator") +System_Boundary(c1, 'Sample') { + Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") +} +System(twitter, "Twitter") + +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") +@enduml +``` + +![SHOW_PERSON_SPRITE Sample](https://www.plantuml.com/plantuml/png/PL5DQzmm4BthLqpTWxsmiKdfgQUuPcaApSQidUPeP6lI5UX3I6DCAFtl7JLfjb1V1i-yz-QzqKqY6Mcr1eRR-yUfFvo6--CqzAUlum46QOD1yKwxnQmAuKmKqgUcYNAhVsWwh_EQC2xU4Jgg5s-ROAJBQbU9bD5pqtsywdFhuUvROsKYZDoQEcP8xJ3MWR52D2KSFO53LAXWnaMoBj1P9z29AuB29xaQWestGWfH4q8HC2Rl2YWRyR_vQYT4_mTGIMMrsqFHvgeJHKa-5ZinFBCXEttsgrCoFbVBzHxAbypb3duAuE_DQhNXFCaGMESHPsX3C7gHfDa0jxhtUsY7lZuUHgP4X0_rDTnzx_AiDSPl2VAf4f07lbEG3B4SIFCk63aLOGJI5WtlIkpjrwkxYbw6hFCAuw4ueVcRwcBh8J6Jw-quzWEZCkXjUf7vWfJu5tDvYjx-Ixb1f_AB_0O0 "SHOW_PERSON_SPRITE Sample") + +### Using SHOW_PERSON_SPRITE(sprite) + +```plantuml +@startuml SHOW_PERSON_SPRITE(sprite) Sample +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!define osaPuml https://raw.githubusercontent.com/Crashedmind/PlantUML-opensecurityarchitecture2-icons/master +!include osaPuml/Common.puml +!include osaPuml/User/all.puml + +SHOW_PERSON_SPRITE("osa_user_green_architect") + +Person(admin, "Administrator") +System_Boundary(c1, 'Sample') { + Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") +} +System(twitter, "Twitter") + +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") +@enduml +``` + +![SHOW_PERSON_SPRITE(sprite) Sample](https://www.plantuml.com/plantuml/png/ZL1DQzj04BthLspTGnIm9H9wwYckC4sXIOGbDqUnbYRnmduiCxCOK_hVEzieTkcfkYmpx-EzqHsnHaxE5X-C7ssQG1sO8tskQzJ7wjNm8UqJ0Ox1CtYknk3gQBNFcXNnPCs-RZwjshpQFNoldIO6bDNGY48R3rZ5F_uJlCYa0kbMvl-8QL3J0IPd_5I_-wz214ym9ZHyqZWU3CF82U5sPKHBS_xbcZckRe9pmSzL_WLtabnhQz_Wehj_UXxQpRPxUXowTlkjtvGBeGwvuF2A07uuHo-kYw85fE1BdQikrMATNqECcWCAtfs8mGrVGlAJnbCvtYpLLQTTj71rhNuMIhxppogFi1zqZEBp37krZj6QKRC9VY6hvkDIhRksUjpq8a5GjzMDUlZHP6njRJYIoYL9SL1ZS54BnINBHh9KVpJCW8gD0ojP9Dr-pUrAVWF5PwRbmxPWtw-wrDeHKCwxx_ks4rOcdT6BpLTWaX7oyuB1_Isv0pybPty3 "SHOW_PERSON_SPRITE(sprite)") + +### Using SHOW_PERSON_PORTRAIT() + +```plantuml +@startuml SHOW_PERSON_PORTRAIT() Sample +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +SHOW_PERSON_PORTRAIT() + +Person(admin, "Administrator") +System_Boundary(c1, 'Sample') { + Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") +} +System(twitter, "Twitter") + +' if a person is combined with a sprite then the rectangle layout is used again +Person(person, "Person with sprite", $sprite="person2") + +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") +@enduml +``` + +![SHOW_PERSON_PORTRAIT() Sample](https://www.plantuml.com/plantuml/png/RL1BQzj04BxhLqpTGcHm919wAXIYcj0KcbXOIdCKAsbYB-nZsPd5cDB_tbcKHm_LGRixyptccnjY5JbP0ztTxcbeR_VTxc5eT_j-t_peopLqoWQ3nGVj9fDcX2Dpe2zr7TMfEcW-fZ4HniaxHiVLv6qTZ79PyP9uDdgijvylsrnwlFzPMqMCKKh3LXXAEunL46nH_D--A5gCv5sfPglT1bPDFZLnLEpZQbrqPsAqmpUVtApYkPokDd2np7onXjy5oFTcLPvm75G8elE48pGX63qfrjwjfBJzk86cQwk7srue4U6wkeBxNzlSQupn9u8SbO0zICwW16AJOIrUq9yqCqPWRT685ybiVrwcAtbfYiuBJ9h51UXdK10mvmDDMNCKvWo2EKg7GjICm4Tq-GSH9rRk86P6dNtYp4aaU7MGTA-BMlJ4QdalOekK1FcqtBwk5jXr7cIFvdMzx_jv9AGS_AxlsqvG6VJMVS_p7PdaYVbuZjx-Ixb1DoTh_W80 "SHOW_PERSON_PORTRAIT()") + +### Using SHOW_PERSON_OUTLINE() + +> This call requires PlantUML version >= v1.2021.4! + +```plantuml +@startuml SHOW_PERSON_OUTLINE() Sample +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +SHOW_PERSON_OUTLINE() Person(admin, "Administrator") System_Boundary(c1, 'Sample') { @@ -104,9 +554,181 @@ System_Boundary(c1, 'Sample') { } System(twitter, "Twitter") +' if a person is combined with a sprite then the rectangle layout is used again +Person(person, "Person with sprite", $sprite="person2") + +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") +@enduml +``` + +![SHOW_PERSON_OUTLINE() Sample](https://www.plantuml.com/plantuml/png/RL5BQzj04BxhLqpTWcLm919wAXJY6jCK4bj4SdCK8sbYB-nZsHqXJEb_xopAeuVeeDNEV8_vHhUHCV1eDDHtXwUssZtMXtrxE3Rtl_QxV0Kr6gyf-wHihyU1uCpiuxUo33WL9yNdiHiZXTvP9ij5xqpfDTeaU1LvqAehjr-lgbGwFjoN1YDJa5Ax5GOgIw7mWiso3zsphA8GdSrnCCgkOR59fueSa5rOhBBw8dgc_U56Es2uvFtr6fRpoCiL_Cb0dZUdVAAkHUz5vuaws7YlLO-id5r8QVjv3PkwAlQxHYY1uAQuXeVVszJRQEsc22bf17OWCJqAn8oQbNX1CocMOC3Aa1QlABFzVPakvxafEYymQMPBKC-0u2db0nMJPYVC0GHpbaxqGJ41dycc5mJg6Ur9p3HUtCY9CqR1uqdIlIvgrXEh-JwBpL8IvClyzNqnmsxI88-aNzVxlfzZb0XotZLDLGigWTwwxtb-4aUvKZgUWpF_Ksx93kdF_WC0 "SHOW_PERSON_OUTLINE()") + +## (C4 styled) Sequence diagram specific layout options + +- **SHOW_ELEMENT_DESCRIPTIONS(?show)**: show or hide (hidden is default) all element/participant related descriptions +- **SHOW_FOOT_BOXES(?show)**: show or hide (hidden is default) all element/participant related foot boxes +- **SHOW_INDEX(?show)**: show or hide (hidden is default) the relationship (call) related index (sequence number) + +show is defined with `$show=true` and hide is defined with `$show=false` + +### SHOW_ELEMENT_DESCRIPTIONS(?show) + +```plantuml +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Sequence.puml + +SHOW_ELEMENT_DESCRIPTIONS() + +Person(admin, "Administrator", "People that administrates the products") +System_Boundary(c1, 'Sample') + Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") +' in a sequence diagram Boundary_End() has to be used instead of { } +Boundary_End() +System(twitter, "Twitter") + +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") +@enduml +``` + +![SHOW_ELEMENT_DESCRIPTIONS() Sample](https://www.plantuml.com/plantuml/png/LL1DRzD04BtxLmpX44TARHLnujHWB5gfIQtQfKThx9qsA-t7iZihgqByTtOX8U3Boc_Unvkv2OoUerR5Esbc5GN1aTc5JtNjSQbU9H_Z50FvsHecmzLiTUqKcgov2YoKdEhcurMNeQVzVQqnCFa4ZJrzZsHcgbosB_hRX-UnlM_txM4OlxHzytZN3NSFXxxS54L7FbXJej3IR66rowyCx96jNoMW8-iK0H-H0Iz32WaYSDwAE7DOROh-BSNhyREDHg1_A-VhBQnxr4cztXIGliOQHcd8bmjD8pgNx9zfWfrpIix8qfgSsBpVmgxlgaCx98ad-51Tm_vRasSxfUmI89yb05kOhNQOA3egbhddi4Xcyi1IaqfPkTaQf064SBeA28cl7ZMSguwj4UK6ZlZRSg9iBv8cCA40-mBm0tuM_xDFwvRy9ozLEoMdlEAHrFcWbqsV0eMymkqmT7rYPTBVwSNcAt58lvIV5s_rlv8RCY9gzGi0 "SHOW_ELEMENT_DESCRIPTIONS() Sample") + +### SHOW_FOOT_BOXES(?show) + +```plantuml +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Sequence.puml + +SHOW_FOOT_BOXES() + +Person(admin, "Administrator") +System_Boundary(c1, 'Sample') + Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") +' in a sequence diagram Boundary_End() has to be used instead of { } +Boundary_End() +System(twitter, "Twitter") + +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") +@enduml +``` + +![SHOW_FOOT_BOXES() Sample](https://www.plantuml.com/plantuml/png/LL1DRzD04BtlhnZ28OwKsYhYnAbf5EY1aWYxb9irzawRbVPZsPrLL27-ExEY8U3Bo3FluxszoOo9YxFgZV6pBPhWo1ppXwvBU6gV3H_BL3AbENWcp-qSN1Sj-igvogojcRhj-wj3NJtSV-uSPgOagx6d7uNyJ6siygg_sp-E7_VxORpTVz_rpKgf0wKSV8FQ6R-6nQPEapaXXxHOgVv5fDnu6uhNc5wQ-NeDonvTjBHSAP1lAw7GU4hDYQOHOnILHvfW4wCrCx89VY6hxTirRFf3-sKt22KHl6kluVxRjjusrePJXben0mUGVX45uefb8qumd0nB8s3Zo8fNbcHBC1uGycj3q0QV4peuHnrtNZShE6ALX8cgl1QEz44DuGdW9_nI_w7FTHl-uoVHNft5JtqbUtwcIzE7B65atWt3eHTK1VszNcG-4MVvfJgUKd3_Kcx8w-BiRm00 "SHOW_FOOT_BOXES() Sample") + +### SHOW_INDEX(?show) + +```plantuml +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Sequence.puml + +SHOW_INDEX() + +Person(admin, "Administrator") +System_Boundary(c1, 'Sample') + Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") +' in a sequence diagram Boundary_End() has to be used instead of { } +Boundary_End() +System(twitter, "Twitter") + Rel(admin, web_app, "Uses", "HTTPS") Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![LAYOUT_AS_SKETCH Sample](http://www.plantuml.com/plantuml/png/xLfhRziw4lskNy7hV4W3E8sJFfhDEaRzK9fW7IUmbCtURGk3iSQnS6LI8Ecwtct_-mvbcP7D28BatW0BN1g8PN7cp9aHTVX0Faf5XPhF8cUVT7d4XSIBlSBcEBy5C0aP4BVlNhi3VtHnWt-wD_sR8TcxI9g3I9vQHY5xB8dfkztBmGhHk_gtIuvF74V-4RAO2ZeZQ4JdaVBXksf7uIER0LDaZ7z0PCqMWiRtOQ2cvAJHoDoVqU_N82Lz12_y3v3ZTusibu2nekmn0l9VXs3p41MuMiPmmPbQUPmaFN9A0xx0vCY4HXASdrcOjX1yaK8aPILxxvEMtD5GzjriW9_FSces7_YS1LGiMwqrloqMEPmRLeGj7c-JbjpjS160oBkldoYGWCef19hcFkdJ9P-hSeyuuiYut_xzviuVjRsHzm_NxrvcKdwWupyUXKusvU6wRgVNpLXCAGiM8bGA655Y3lO0qTaDw0n8hSjduPXub4boxTMSrLWX4yxrLtF2zVZHOSu51ArxAXZMywnvf3jQf2k0AWZGN90WbEEvb25dTS800aaK9mz0lj4e3BILynkmu2b5a-ywL__cTjIxkH-WNvpuSgKuCWxrCqRORVk-U-6FXbUVBdqImKHf5n4-JbN60mlVMOsA4Cg-lAdZyXMCC0CgwmH64Ns0w23p8jJEpzExDR8n0gaagLyneBxG8_9vOF9vrVirFm9cDeI8wfJbD8nB9egkepMdu_eQz6I3dYdfUQrsGDR6sGxZHyuqULEMKc4KZATiftXVsD5HK-9xVBObbAtFAVpNvf7kRnqTrJPgWDmcWi_gQCOpppgbRNVLIUtmi5KxACGmYTbWjer1tQXR1r_vLwb3ucqJjFiqm-RXeMPO36NpB30ou1le0y0ty86BAiN4h8kmgXVr-PgQ61MBYvX5aBiNUPjuhqfnjR1Q5UxjNjfyRBvW-KHpGXT3M0oBqzWgtrsLyjtTMWdUxLwyFEGuds8U_M80YzjTgRBrgvHDJz5MUltT2vUF3HELJpGdT0543iD-gV8DgvHFBsxi78U_fduvu2XU-HNCpQCOmoPPdCdJ2ffSGXH3wGqOEXjrI63vGQgrvF3pD0m2O5zxXqd7XizTWS_TCpx30f_XCpxz0fz-wfDi5ySyXZFI9Z9CLeYIJzI22hnOIWMprsXoAy8P5Ki24UYDdpmZ_jGo924ZKcDf3syUnrmeHCmutGAFCG1bmRQlJDVMqPACEMDu1G5HdAY2C5TC0GlGbiw34DWOyt2_WLW-y61PrmlzAKcUU3YcKHANSNRuT2TE2DKHKeR1YXYVg-IQJpQ31_0D8XxhJ12IObcgRjvltQ5tCnXrFgrtxetJjoSVEgRV_PVl3WVj_iWoV7-gFyRG-ztptUjC__7n-zDEpmQo3F-MjB9d1JdRO_twSDPgsPjtizErpoiIqqA3pjQETAiYziwvyU5Dv_r5xauUlYCvHgFH2t8sJw6G_6bRVtB9huR_It0s8okNwflkXujkexZEByZP7kt5TTxz7EN-ohySzTrFxg3dJBLkI9EY4y4Zi61rTk3yE2SR3N_xQ4H-E3-QMoEZbLgGrIXDJ4nsURRhacUTjYhHqeQfYcw26iCyKEE42ILfsOSk-yHDXRwi7YQ4Ivo6h3BSEAae0jCN0SYnU1xr2_l2rXOv4RRvZjplgWHdMtbiyZPonGGAmfbuNl9KIsGX4mUBl0LMdRWLmUPRjVB5v7UlV46uwiU6XcB9qqFoUUMNVyXNVGtOvKnHf2OaMOHg6ZAYNcvLE3R1SzQ1_jOghyeYx-_eD8uG4WaR8oh6qr0X6LbVEo2B15TVhKvBZ-GgLI8LdKogBnQxEEcrhmRkCBDwU_lcjDTxzujMRwQEBp99ctIArnRbf-U_fcTqiYgSufhd_ETCuaOBZ2xPksvReCgUgvFiUCsAM1aUbg1N9xGj_ZQvoh9l9LHU-OrhIV4tMUJ9_Ypc3AytPDyu5Gj-PjvuLJnnm069exaaSRLfmf3DcIOyMzPrZ8ooxoBUrxSt0vJ5Z7YVlkjqBXg_IBnDThk9zruZQJcARNB8LUmFk9_gdVwVAVPVYfsEdJzViTD0bc9RF5vOiVF9ETQ_IJZfpf86in09rThwEvHAKCK5ddLlBy_7ntMoxz5P7C7-GVfoFarE2tWOqJX6d7ju8EquZi9nid2iuQtkNfsqlTlN0zT75m7avFKnkVvdL_UreuWl99bBPACrJlFNwZMRHohK-kYZeYeGH8KpY32MH6u_KtQlrAeJSL8px7I64AspUg9r9q7gU9U-V-kXbJOolKymdq19_0dwIvymPrq-0Wlci-X_ "LAYOUT_AS_SKETCH Sample") +![SHOW_INDEX() Sample](https://www.plantuml.com/plantuml/png/LL1DRzD04BtlhnZ28OwKsYhYnAaXH1I9bWYxb9irzawRbVPZsPsLLI7-ExEYeU3Bo3Fluxszoeo9YxFgbV6pBPhWn1ppkwvBkBIFXazbAfdI73oJvtOEheiMVULSPDRMJDt-xSMnhkvkFdSECrEIrTZJZq9-fZPMUTLVVxaVFzr-E7nlDaeTAUNW6zJE-2siTdMQp0avfDL6zK-YuiRteNYDwQcPBxUmxj55I-kD0ldsaWUDfzGiD8qOewZSqmIx6AsPaKtmArdjNszXrn_RsyCWb4Jmfhs4cs_xUjjP6vOCjLq63Y3L8Wh45Sj6d61O34iPOEF8YbUMP6im7X3oSpdG1XyJEZX77GzUDniuOPM4YQgy5exqGGtX0U0d_5B_eSzr6_xZ9z6UdSLFVILxVgQNfdTPmiYy7ePZBwWA-djzaVb8dEMNwdX8mVrBkIAlYxE_0G00 "SHOW_INDEX() Sample") + +## Optional support of additional PlantUML elements + +More often a full support of all PlantUML elements are requested. +They can be set via the new optional `baseShape="...."` argument of the calls + +- `System(..., ?baseShape)`, +- `System_Ext(..., ?baseShape)`, +- `Container(..., ?baseShape)`, +- `Container_Ext(..., ?baseShape)`, +- `Component(..., ?baseShape)`, +- `Component_Ext(..., ?baseShape)` + +The already specified `...Db...()` and `...Queue...()` calls are not extended. + +But based on the additional (internal) overhead it has to be explicit enabled +via `ENABLE_ALL_PLANT_ELEMENTS`. It can be set with following 2 options + +- `!ENABLE_ALL_PLANT_ELEMENTS = 1` directly in the scripts file + BEFORE the first C4\_\* file is loaded, like e.g. + +```plantuml +@startuml +!ENABLE_ALL_PLANT_ELEMENTS = 1 +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml +... +@enduml +``` + +- or via additional command line parameter `-DENABLE_ALL_PLANT_ELEMENTS=1` + +If `ENABLE_ALL_PLANT_ELEMENTS` is not set, the diagrams displays the requested "PlantUML element" +but the style is not correct displayed. + +**A simple sample with additional "PlantUML elements":** + +```plantuml +@startuml +!ENABLE_ALL_PLANT_ELEMENTS = 1 +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml + +Component(comp, "Copy component") + +Component(config, "Config component", $baseShape="package") + +ComponentDb(dbA, "DB A") +' alternative syntax for ComponentDb() with $baseShape="database" +Component(dbB, "DB B", $baseShape="database") + +Rel_U(comp, config, "Configured by") +Rel_L(comp, dbA, "Reads from") +Rel_R(comp, dbB, "Writes to") + +SHOW_LEGEND() +@enduml +``` + +![Sample with PlantUML elements](https://www.plantuml.com/plantuml/png/NOzFQy904CNl-HHZA5H13OMU2eA9XlQmfk8VF8P9CcfeiXjs9xL---vMQqrly-VttioR6aRDRLrvlJW98n6deH3fKeJ99er5l8YJpHecyEJrIfbNRK5mP6xCIn1eF8qF9H_Rh3MaSoMP98zpLGTDXT9PZWmNLPa5i-VHqess2n7KQ9Yq7QKpLJTAEatZpdktlf_RQWZ-J3Ldo7-d_g2Bo7rvSD1FSOSDuI53G-iZDZJn6ym_y40TyJph5rbejVC8Ghjv1AoOj4GkFmdCMJ9-mLvfk5SCu6IpThmBP7Ij_sTjZQEBSNHxf0kxJrPKfTjhodz1Maq5P6TBEKXSeSkxAyB2m5wh-hfUtTRkw4wNJ0POkHFhj_TTAkBNE9dt1zwKPD7MrJS0) + +### List of supported PlantUML elements + +| PlantUML element | Support | Comment | +| ---------------- | -------- | --------------------------------------------------------------------------------------------------------------------- | +| rectangle | ✅ | already supported (works even without ENABLE_ALL_PLANT_ELEMENTS) | +| database | ✅ | already supported (works even without ENABLE_ALL_PLANT_ELEMENTS) | +| queue | ✅ | already supported (works even without ENABLE_ALL_PLANT_ELEMENTS) | +| node | ❌ | **should not be used**, already defined for Node() (works even without ENABLE_ALL_PLANT_ELEMENTS) | +| person | ❌ | **should not be used**, already defined for Person() (works even without ENABLE_ALL_PLANT_ELEMENTS) | +| | | | +| actor | ☑ | requires ENABLE_ALL_PLANT_ELEMENTS | +| agent | ☑ | requires ENABLE_ALL_PLANT_ELEMENTS | +| artifact | ☑ | requires ENABLE_ALL_PLANT_ELEMENTS | +| boundary | ☑ | requires ENABLE_ALL_PLANT_ELEMENTS | +| card | ☑ | requires ENABLE_ALL_PLANT_ELEMENTS | +| circle | ☑ | requires ENABLE_ALL_PLANT_ELEMENTS | +| cloud | ☑ | requires ENABLE_ALL_PLANT_ELEMENTS | +| collections | ☑ | requires ENABLE_ALL_PLANT_ELEMENTS | +| control | ☑ | requires ENABLE_ALL_PLANT_ELEMENTS | +| entity | ☑ | requires ENABLE_ALL_PLANT_ELEMENTS | +| file | ☑ | requires ENABLE_ALL_PLANT_ELEMENTS | +| folder | ☑ | requires ENABLE_ALL_PLANT_ELEMENTS | +| frame | ☑ | requires ENABLE_ALL_PLANT_ELEMENTS | +| hexagon | ☑ | requires ENABLE_ALL_PLANT_ELEMENTS | +| interface | ☑ | requires ENABLE_ALL_PLANT_ELEMENTS | +| label | ☑ | requires ENABLE_ALL_PLANT_ELEMENTS | +| package | ☑ | requires ENABLE_ALL_PLANT_ELEMENTS | +| stack | ☑ | requires ENABLE_ALL_PLANT_ELEMENTS | +| storage | ☑ | requires ENABLE_ALL_PLANT_ELEMENTS | +| usecase | ☑ | requires ENABLE_ALL_PLANT_ELEMENTS | +| usecase/ | ☑ | requires ENABLE_ALL_PLANT_ELEMENTS | +| | | | +| actor/ | ❌ | requires ENABLE_ALL_PLANT_ELEMENTS, not working (font color not changed to $bkColor) - and/or conflict with existing? | + +If `ENABLE_ALL_PLANT_ELEMENTS` is not set, the diagrams displays the requested "PlantUML element" +but the style is not correct. diff --git a/README.md b/README.md index 198b334e..0128e36a 100644 --- a/README.md +++ b/README.md @@ -1,44 +1,113 @@ +[![release][Release Badge]][Release Page] +[![license MIT][License Badge]][License Page] +       +[![commits since][Commits Since Badge]][Commit Page] +[![last commit][Last Commit Badge]][Commit Page] +[![build result][Tests Badge]][Tests Page] + +[Release Badge]: https://img.shields.io/github/v/release/plantuml-stdlib/C4-PlantUML?display_name=tag +[Release Page]: https://github.com/plantuml-stdlib/C4-PlantUML/releases/latest +[License Badge]: https://img.shields.io/github/license/plantuml-stdlib/C4-PlantUML +[License Page]: https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/LICENSE + +[Commits Since Badge]: https://img.shields.io/github/commits-since/plantuml-stdlib/C4-PlantUML/latest?label=new%20unreleased%20changes +[Last Commit Badge]: https://img.shields.io/github/last-commit/plantuml-stdlib/C4-PlantUML?color=yellow +[Commit Page]: https://github.com/plantuml-stdlib/C4-PlantUML/commits +[Tests Badge]: https://github.com/plantuml-stdlib/C4-PlantUML/actions/workflows/run-percy-tests.yml/badge.svg +[Tests Page]: https://github.com/plantuml-stdlib/C4-PlantUML/actions/workflows/run-percy-tests.yml + # C4-PlantUML -![Container diagram for Internet Banking System](http://www.plantuml.com/plantuml/png/pPLjZzCu4CVVzrECojlssbrWsKFTYZwmEX2zwrrw1n8WD4ccgOLZHxQpfHnyztDSDoJhLjp3eYChhTePpzy__psPFj46bIbptj7lcIXGOGufhR7aPaKVp8IpJEGa32Js7wd6ggt2uYLBpGREXyD6FCSF2z8QCuhOHuApXysaeiIWo3Z1dnsmJsGrIPfTGTTIc7t1kSle3QPooqG6Q-IQEf-RW6WmHltVH2PAoQrNc4ak5ToxS8-BL4fXjAd_-TYnHgDObY95jHkF3tHjXbF4ms23MnWFtEEYKwbIKgVYaTbnWXJrXj9Jb0KfBOLZ37cyyBLxQemmEiNaVQQgy_hSyFB1-QDfY3XyT7zwSNsAnROPAO7ytRU1khYi_aAeoqdrTmfAxxIX_AvPpiukBgVpaEN-xD7rRFXLWxuDr8_kEMrG-E9z3_vubE_4dk3E4YkEJ92wQvm7zo_dyuV_qAB_ZyR80eo4M1eZBH6hB69IT3Oi9T0rH8TJHY85nRADwNowWjPZlw_i8lZK-JJoGsRiCx0V6YxbN_KwTMYCvXhVOcEtODymBkwlEQXjhl6dtTVMbjgK9T_pTmmpd61MvrA6MNKLQwdWcQWaoLWNXRsZ328dtQcx1hfNLxDIMwD8lH5l14mWyLz1hi5i269RseCjCnj_AEGk1fWazbgCxa9ZkAEk1Tgx12Ylzonlkz3y1NC2PxvZMW8lAOP9KN2Me67IiWu68yq-qkEpy_7hvtY3FOWALIal_fYz7Gsgt7WmSAUQ4sSt5j4TI1iha3WtIHX0aRfm3HWVl5fEkj1kP0ktfVWT5aN85x7gKt-96LMS8L-KA5QO7an4Ld9Kjn2NIjwmb3GWvyTvrgLmZOoScHqOQOrsFckuOLYLC5NHGQpaLfCwmguB3BaNCcRy2FBiNWzUOOwAYPEem5dE3AMWorXRLBd-s-WwOC_t82dTi8H2Uf-lpVUZnfrXxZ-tJn3z-W8EcLj7Y8nKfA7Kf41HnhHHQFc0YRLKkMkm7cniNGfOcWqaYb8IXY7NlQhnIMlWChDVo2G_XB0rNUZtPFdiQtqybybxKlKxVQfLlkApizRkTeGkHhk1IAsNp0xC5jxJ_W8PzuF2RRVQ433XPzE29KfgkJRmz4EoiLNanrKNmfz5jnVbo0wHzbPs8x5McDEjyTIy8UJyq5M93TGdRLmKO2nBywMbUlLawe5HA3GwJ_nTdUJqoWVIWnpq--F3Im-FA-ohtpNfzhNzj5ejeo-tr6rNwmB_NMMZvHi2tSu1fwNjPvnDsvYhRjpooVrHxqJIW-VHBpyF0fR6zdUYLx-oe_uHiTy8Kmrh9NCtaxUA6T9WP7i3hp-VpewvPfNxhOxpsX49gqtzAbDfTZlDHROg00gAIir4TembMgoMJPQca7MjtLTDumAjWNVlrU95QDuJgrdc_2y0 "Container diagram for Internet Banking System") +[comment]: # ("image is based on percy/C4_Container Diagram Sample - bigbankplc-styles.puml") +[![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/hLRVZzf647xdhvYGH0690rLfNYgT50xSvYAuey0bVKDZxs1MMU-wksiuLFL_xwmnDYOdvI5zkMDdThxls_anyD5vjBx8LEST94RloNgG7WxIxm25a5uQZOfTMOPQW9AQ06rQPAGzt4oNqMoyllyIRUuV9hEdQNJR7Ow6movu0uKZK2P1fOwTLt8BR_Te9SQADlGidNUzxdLmjzy1U2LreWf1y3OblwbZzgWAUYbaDFbrCp7Q8okpmpoyv1KfHvTGE-zpzzjePF4mJFbbHSpYRC9HfFsGtpRA5UgGXHldXP8nWzuiWkbfFXjbw3pP5tcqaDjEP_NfyUjc4IrNZm-RnwVrxFuXwlKvdsjC7RWYputre0su71Do83Nu7O76ZA0NeoC1vcGgj23BAPOwXS19nXzpSWCux6Io0s7qEry3LcYeZvcnr1y2CzvlQxCbiFHtGOmZpfIAKfOygFw3f-UgqcKGxD25miK4WhPIa-YCXOWKXLhpMthT69Dl75YdeJk0Dri-J8mozlPDD8lcqSDwy_iZ_vaypXwNx8_JaxVx-ltx3zFnXn3ZTfZJRIJJdLz9GM8Lphq-UqxArYpizim6oPaEUXH2m8MOVhSVv2r9bTBG7NKIiFbHPptZvP8Bqr8J-lVIstAi_57HxHJTZiHCQbRKeWWCe_-HntZVy7Iyz8gWJYq8YQd53BR6mhtsP3Lvk4FzBJJ7wkWyPPtEWgmpkfSKpfkCx00czQVk6CvcCDko_3573qu5pyj0LAKDC4bCeRthieuJzEQE3GBjiPVymbZN0hfz-AS308tUte7Y3UOvN_vACOppNCa4m_Reikapxd40gzm6yVClas2Raf9xbb5ASvxl9b2D9A0MfRdcZSyFNunPP9lPvSXmAtOhkbbWIe7zpBfAhCpz0COwBHJQO5vOivSYp8XIBxDi2vsS5f_qH_2cpgI3lSGG8otmWo6svk38VYSfCx5KLELZ7WwrgCdh0Vo56N8gsc90oKo6ONL5xCXpqNv2t4a02DhBXAxbJUEUG8zXzOGwL1-3cjMVCsYTlR7a86nBi9HAvsrPKv2Q-p8hFmzWLquCOE5ta5WIfBr4vGQXhyWvK2Rb0_ba-5sYgXddJCdGielxbpjdQlYQRU9QcVj1Xa9I6BYSMKpTxNTRZ4NzM_TzzEnxbA5K6rSQc2YwcVEvchd0lDuHo98K5SnbOeqpMm_HSx93dHAS8Xds0hFIrg0ofjvQpEXgg2_IZagTko1XG_s-Y-G3ngRmJGiCwbaUWBUe7PQPQDBVMPAws1VDr3uvSe7xqtgzMF75zZsNum_lL4tVm5LqcuUmjcFJx8WIhja05L9fR3L4JLXktG5yvc_OKKdULBDqLGYDWfy3sjnnS2Ex6POsw99GEDXQavKBws2b9mVU1AAAPtetOSWQyo9RLqssObW7T1Ei9KOZvAeVsnhQSONZ_cZeL_FrWe5QDMY5NtLbawVckuwtrNnsdQl6pV2dtp-pw8_eOThhTxR6UB8WB1xqwSlc_4iAzaDu6mekZUxrovmrlxE2buzVpkxEHrPPPEe_ "Container diagram for Internet Banking System")](https://www.plantuml.com/plantuml/uml/hLRVZzf647xdhvYGH0690rLfNYgT50xSvYAuey0bVKDZxs1MMU-wksiuLFL_xwmnDYOdvI5zkMDdThxls_anyD5vjBx8LEST94RloNgG7WxIxm25a5uQZOfTMOPQW9AQ06rQPAGzt4oNqMoyllyIRUuV9hEdQNJR7Ow6movu0uKZK2P1fOwTLt8BR_Te9SQADlGidNUzxdLmjzy1U2LreWf1y3OblwbZzgWAUYbaDFbrCp7Q8okpmpoyv1KfHvTGE-zpzzjePF4mJFbbHSpYRC9HfFsGtpRA5UgGXHldXP8nWzuiWkbfFXjbw3pP5tcqaDjEP_NfyUjc4IrNZm-RnwVrxFuXwlKvdsjC7RWYputre0su71Do83Nu7O76ZA0NeoC1vcGgj23BAPOwXS19nXzpSWCux6Io0s7qEry3LcYeZvcnr1y2CzvlQxCbiFHtGOmZpfIAKfOygFw3f-UgqcKGxD25miK4WhPIa-YCXOWKXLhpMthT69Dl75YdeJk0Dri-J8mozlPDD8lcqSDwy_iZ_vaypXwNx8_JaxVx-ltx3zFnXn3ZTfZJRIJJdLz9GM8Lphq-UqxArYpizim6oPaEUXH2m8MOVhSVv2r9bTBG7NKIiFbHPptZvP8Bqr8J-lVIstAi_57HxHJTZiHCQbRKeWWCe_-HntZVy7Iyz8gWJYq8YQd53BR6mhtsP3Lvk4FzBJJ7wkWyPPtEWgmpkfSKpfkCx00czQVk6CvcCDko_3573qu5pyj0LAKDC4bCeRthieuJzEQE3GBjiPVymbZN0hfz-AS308tUte7Y3UOvN_vACOppNCa4m_Reikapxd40gzm6yVClas2Raf9xbb5ASvxl9b2D9A0MfRdcZSyFNunPP9lPvSXmAtOhkbbWIe7zpBfAhCpz0COwBHJQO5vOivSYp8XIBxDi2vsS5f_qH_2cpgI3lSGG8otmWo6svk38VYSfCx5KLELZ7WwrgCdh0Vo56N8gsc90oKo6ONL5xCXpqNv2t4a02DhBXAxbJUEUG8zXzOGwL1-3cjMVCsYTlR7a86nBi9HAvsrPKv2Q-p8hFmzWLquCOE5ta5WIfBr4vGQXhyWvK2Rb0_ba-5sYgXddJCdGielxbpjdQlYQRU9QcVj1Xa9I6BYSMKpTxNTRZ4NzM_TzzEnxbA5K6rSQc2YwcVEvchd0lDuHo98K5SnbOeqpMm_HSx93dHAS8Xds0hFIrg0ofjvQpEXgg2_IZagTko1XG_s-Y-G3ngRmJGiCwbaUWBUe7PQPQDBVMPAws1VDr3uvSe7xqtgzMF75zZsNum_lL4tVm5LqcuUmjcFJx8WIhja05L9fR3L4JLXktG5yvc_OKKdULBDqLGYDWfy3sjnnS2Ex6POsw99GEDXQavKBws2b9mVU1AAAPtetOSWQyo9RLqssObW7T1Ei9KOZvAeVsnhQSONZ_cZeL_FrWe5QDMY5NtLbawVckuwtrNnsdQl6pV2dtp-pw8_eOThhTxR6UB8WB1xqwSlc_4iAzaDu6mekZUxrovmrlxE2buzVpkxEHrPPPEe_) -C4-PlantUML combines the benefits of [PlantUML](http://en.plantuml.com/) and the [C4 model](https://c4model.com/) for providing a simple way of describing and communicate software architectures - especially during up-front design sessions - with an intuitive language using open source and platform independent tools. +C4-PlantUML combines the benefits of [PlantUML](https://plantuml.com/) and the [C4 model](https://c4model.com/) for providing a simple way of describing and communicating software architectures – especially during up-front design sessions – with an intuitive language using open source and platform independent tools. C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippets) for creating C4 diagrams with PlantUML. -* [Getting Started](#getting-started) -* [Supported Diagram Types](#supported-diagram-types) -* [Snippets for Visual Studio Code](#snipptes-for-visual-studio-code) -* [Layout Options](#layout-options) -* [Samples](#advanced-samples) -* [Background](#background) -* [License](#license) +- [📄 C4-PlantUML](#c4-plantuml) + - [Getting Started](#getting-started) + - [Including the C4-PlantUML library](#including-the-c4-plantuml-library) + - [Now let's create a C4 Container diagram](#now-lets-create-a-c4-container-diagram) + - [Supported Diagram Types](#supported-diagram-types) + - [System Context & System Landscape diagrams](#system-context--system-landscape-diagrams) + - [Container diagram](#container-diagram) + - [Component diagram](#component-diagram) + - [Dynamic diagram](#dynamic-diagram) + - [Deployment diagram](#deployment-diagram) + - [(C4 styled) Sequence diagram](#c4-styled-sequence-diagram) + - [Samples](#samples) + - [Relationship Types](#relationship-types) + - [Layout (arrange) elements (without relationships)](#layout-arrange-elements-without-relationships) + - [Global Layout Options](#global-layout-options) + - [Sprites and other images](#sprites-and-other-images) + - [Custom tags/stereotypes support and skinparam updates](#custom-tagsstereotypes-support-and-skinparam-updates) + - [Element specific tag definitions](#element-specific-tag-definitions) + - [Boundary specific tag definitions](#boundary-specific-tag-definitions) + - [Comments](#comments) + - [Sample with different tag combinations](#sample-with-different-tag-combinations) + - [Sample with tag dependent sprites and custom legend text](#sample-with-tag-dependent-sprites-and-custom-legend-text) + - [Sample with different boundary tag combinations](#sample-with-different-boundary-tag-combinations) + - [Custom schema definitions (via UpdateElementStyle())](#custom-schema-definitions-via-updateelementstyle) + - [Element and Relationship properties](#element-and-relationship-properties) + - [Version information](#version-information) + - [Snippets for Visual Studio Code](#snippets-for-visual-studio-code) + - [Live Templates for IntelliJ](#live-templates-for-intellij) + - [Prerequisites](#prerequisites) + - [Install](#install) + - [Usage](#usage) + - [Advanced Samples](#advanced-samples) + - [techtribes.js](#techtribesjs) + - [Message Bus and Microservices](#message-bus-and-microservices) + - [Background](#background) + - [License](#license) +- [📄 Layout Options](LayoutOptions.md#layout-options) +- [📄 Themes (different styles and languages)](Themes.md#themes) +- samples + - [📄 C4 Model Diagrams](samples/C4CoreDiagrams.md#c4-model-diagrams) ## Getting Started +### Including the C4-PlantUML library + At the top of your C4 PlantUML `.puml` file, you need to include the `C4_Context.puml`, `C4_Container.puml` or `C4_Component.puml` file found in the `root` of this repo. -To be independent of any internet connectifity, you can also download the files found in the `root` and reference it locally with +To be independent of any Internet connectivity, you can download the files found in the `root` and make use of them by supplying the command line argument `-DRELATIVE_INCLUDE="."` to PlantUML: -```c# -!include path/to/C4_Container.puml +```bash +java -jar plantuml.jar -DRELATIVE_INCLUDE="." ... ``` -Just remember to change the `!include` statements inside the top of the files. +> For Visual Studio Code, add the following to your settings.json: +> +> ```json +> "plantuml.jarArgs": [ +> "-DRELATIVE_INCLUDE=." +> ] +> ``` -If you want to use the always up-to-date version in this repo, use the following: +If you want to use the always up-to-date version of the C4-PlantUML library in this repo (which obviously requires an Internet connection every time you render a document), use the following: -```c# -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Container.puml +[comment]: # ("!include followed with 2 spaces that it is not replaced during release based branch updates") +```plantuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml ``` -Now let's create a C4 Container diagram: +If you don't need the up-to-date version, PlantUML includes the last released `C4_...` files as [standard library C4](https://plantuml.com/stdlib#062f75176513a666) \(no additional files or Internet is required). You can use it with following: + +```plantuml +!include +``` + +### Now let's create a C4 Container diagram + +\(If you don't want run PlantUML locally you can use e.g. the [PlantUML Web Server](https://www.plantuml.com/plantuml/uml/ZOvFIyGm4CNl-HIrfowupSMJfvNrk6BnprccwT069fEGcI3zzhO5YoAAf_VcmVlDEub2rXB8N7bsL0Qi9jKajzPcU6z7hrFfYs1saHLPMnU3JGIyTewY0_dUdc-EtHgzFbni057CI_HsNXhW6NERLhxfC4la9croHnxakgelq2FLYtbCwYC3LVSeBlljgWzcXpJkq_selg2RE58Svpz0pxCeXaOs-UztyuJqVV3lAtR4bpa7Sq8UIg0F) too.) After you have included `C4_Container.puml` you can use the defined macro definitions for the C4 elements: `Person`, `Person_Ext`, `System`, `System_Ext`, `Container`, `Relationship`, `Boundary`, and `System_Boundary` -```csharp +```plantuml @startuml C4_Elements -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Container.puml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml Person(personAlias, "Label", "Optional Description") Container(containerAlias, "Label", "Technology", "Optional Description") @@ -48,15 +117,15 @@ Rel(personAlias, containerAlias, "Label", "Optional Technology") @enduml ``` -![C4_Elements](http://www.plantuml.com/plantuml/png/xLXhKziu5FtkNw663oqpOGcq1PODcUPX2hCXOV8Ojaix6H4hYQUEv96KGdQx_tqbsH5EX5Phf_2fOWQCTU-vvrx9HuyFZ4FA5_F8UmsQ92AKYOSTP_EyLm6QX1W1l-rV-Pt1wBmhVZMxxMuFx9ohvWcaFbz68Pxcn1pupOjEWjY__DC71uUUnxw6E8OKpe4mWek83z03hqVX5CyHvc0iVY6QDRkdCBu90pu3XvLAvlqSFbmXnk0KzSE_43XuNybwKJJc44yZ1FxsW6XzWOe8NyRed62UU1og7ZQ30RaNoO49Z1Zo_id2r2abzoc4AYlOEL9DlP5Gvjji00bcSgfMxyW21v0kQxKLlmqM5iuL8y86ZtUggRSDGWD4RU_bY28GG3P3WQJv6hJXaYnulY6EY63Shd_g3WUZUd_K_zqVD2yoAT_1yTSfbSccF7pVRxIQ6OiPnC4z3Jb7672wGEO4aTbru1o1KfFCmp7eGyp0LR_a9NC5J0YHVweJ8kUF37D6KL2xWHIBUfvMzsL73JGfWXm5mfo286JZ1MCXmMM04GeOu0JS8V0DHc4WhRnN20UFAUfyLxaEkjUZLlUc8_nYvKiu9u9nACTOm6xQj_tpmQXt-V5Y028quTA5XjCPptY8mZUIMH6Yl1zlwhXyWqOY0yZA08qYU8UYtSo7K3exIz-MmDeCX0oaVcv0-I1dvDF0u3Rf_MAF83BheGZAbDaiZ7CcAbn7Aqu7vHNeuHezNTApKcaNh8op7TeFd4hokYovmd0qdk6judt6-_jL9hxZqmsXhDscy5-g-xA_jhzVMgk1u3QXP5uMPYGprYbjiwiCIdjxjTAk4qCdPeAPDXfrhMuDySc_IHsKjqdGx9CCgtjxag4RokJfCDBWQ-WT9Bx0EqAB55DaxSOgMjIdQwfZ52okm7H3RblaJUAj8iMLmcfKkBLzQUtOv1xRYLf2Eo5CXkuqDietB5A-uRMHu73xujcGOnj5EtqdWCbjcAjixI9baqkqaLvx-yBPiT64subQGbiW70pRkShNAr8-kRanS-pzWFhPmOLuMIjepyEDOP9qP_AuWmONA8fHxWEOSDRge639RggrOEzs5WO1mbzQUwfZpMVey1a-uTDp-FIUy6axVDgfZpekZacCJa4Ti53j41cPy7j8nSEISJJ_HPXSqt0EwHAW2Cc37pi5WvbX248CcCII7lr571FA1MB6wHgHM0I0EDZqPUdUEbg2CS5OFA40S0Au8ymbvWW7mXOkWX3XiSZ3_uReyeu4oxBSwC-06l5m32CL5nEyz_WcLeJA0fA5GK9Cp0drJ2RhmGFq3KKabfa8I2ZAKlJmVktt-jtEgF5nTNAldBmxF6xeVl-FWT_hrDiZm_3eHFvem_wd_i2_olGV71oTD5eca67ugsfvxmeinsFv-H1Sgvc7TttIDUyhbAdJeB5n8jseY7bohXo_RHoTMq_ow46Gmp0QlI1dFGfEyYTr-MCbdqp_b-2iPvQLwjlcyNcpugxp2t8sPxkxpjlVeznS3Yv6RV-ZtsbvCwaRJAVeHMYAS93S7NZVpy1Q4_yFX17uxdslRioCMce1abcgJ7HsDjjLoRDE6vMeISDKHTT1jQ4DL3k9X5HQvgNBQ-2dGfzN3nNX7BSXIORhDnKECFaG83QcJwD-nf_noi8IOPFlo7_WEJWRocEGDv2B9k0Cf-FrrQZco88f1vEy2LQKk1d1u5kqycxosrRU6QxujQ6ccFFs4DmcVlPBlk9xm2R170fgb87xaCz23FZBxGh7EhXb7pZOsEKLsUJz9fp6aO0KXBKHfEDPo0KPLbuv21OALpubjwNxB4aLC0uda-ARnQPOzEgN7R-NsRszUtlIQht_GRitNSSNMQHrEkwzHVxb-UVoB9oC2gUuUfoVPn7NMc3gfpvrcmALzruTPEThLiJoy305lJ2X3V4to1MNVJEX_CglNNEAlyx29llpc63vd9LzxUGM_CowySQzSA1T44SB1k9YouGcQrac-gQionWPPTz6lA-kknqXYndnFddVQ9nNVf1uw-os4--TYceMnTOvM1NxM9odMYVFfjW_5LjO6UEWhT8fy5owdi8_jwxhF0nTDtYyiAxRoScM7ZYJIL9Fc9NQwl0X7hen3uaSxvQ42jL_ucBySPNIWsouglqhYSXq-Hz0wQ4hcKt_DxhNGz4wOOE52V58Ho1yG3XOpAD_0G00 "C4_Elements") +![test](https://www.plantuml.com/plantuml/png/ZOvFIyGm4CNl-HIrfowupSMJfvNrk6BnprccwT069fEGcI3zzhO5YoAAf_VcmVlDEub2rXB8N7bsL0Qi9jKajzPcU6z7hrFfYs1saHLPMnU3JGIyTewY0_dUdc-EtHgzFbni057CI_HsNXhW6NERLhxfC4la9croHnxakgelq2FLYtbCwYC3LVSeBlljgWzcXpJkq_selg2RE58Svpz0pxCeXaOs-UztyuJqVV3lAtR4bpa7Sq8UIg0F "test") In addition to this, it is also possible to define a system or component boundary. -Take a look a look at the following sample of a C4 Container Diagram: +Take a look at the following sample of a C4 Container Diagram: -```csharp +```plantuml @startuml Basic Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Container.puml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml Person(admin, "Administrator") System_Boundary(c1, "Sample System") { @@ -69,22 +138,819 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![Basic Sample](http://www.plantuml.com/plantuml/png/xLXhRziw4ltkNy7hV6W3E8sJFfhDEaRzK1vOnmaiPRDtsy9Wf74iN9aKIBgkTzl_laD9PcGpMa7sRJvT1aWKSURCcI5r-FWa5HLgFejghqYFHrn8VDWhRRNQRm5CGWR46JZNpj0Rdz_WhzxDu6P4ziwJLaCaLosZa3rMnFIStkKmHNIl_ksGe-DQJVuHifWAEYDeHEUHyk2xwaJX8vi1KyJ7No3oPWj1u_imK5Dot6pcti_ezskGaZw26_u7oD7xPjvBWAyeUuo0_BT6iBc82bmjOpZdJAKUnqcFdDA0Bp0vCg6HXDhFF4n72Bx889AoahqFIKlUQ2ZxRJx0psSvjLeFVCu2AfRjzehV1ei2paqhmWQFTqbBtdQv240KlTSZ2YIWSWg1flcA3EYIprMr8OuuCXvqVh-vyyOTT-p-m_5wbxcK7wZ_nwFGoMOy7CVfzdivYobbmKA4IW4ZIip1dY0wko6T0Qdt-2pqYKkP9DTklPRE5JBXNFzfJT2E-3hCcO2WVKy5mtgUjWvrHvlq15050PeB4eJIdqiPSjOW322GH77o0EGRZS90MzL-0nOyfMZoNUNgtToE-pVtG_IB4r-k59yXhXvZXDsq7pZdtdXqTN7faGWcIhk8y76gSXvO-6uwAqAe-l5cZilNCCOCg6mG64Vq0QBzt8TGFplBtjR9sWoaacH-vO3wGS_8vu79vxJtQt44p6m44TKfosaOLqmKNSShJaUD5UZn6ZrJqhDwVP-iZFCTne-SQlAcB9N2AF2dRATuNzZXOKlYTtow8PJjpndyrzQXxcyV7jRNQe3S9eBF6cZ6SsETqRQx6gH-SD2kxvTYcCHiCDl6eAxLhOkV_EkLW_Qs2Tfzcc7hu40pB8UoUPOO6V0rz27W5_Z0nJR5nAoBi7OlwlCrDJ6sB2vYba7kNkHDulrjYgk5rQfmV_VI5cFp1IiWMXow7C9cM9h6HldkjYdVtQsLuDtknIj2Zeie5jCl1R2vtLKgss2Rikabsafli7lXYh5XeWg85eSkW2XXEAXKlj4svTER6pl7qUxr-p_WA5w55IpEenp39bcUoTCEcbn254Fb0nWw6tL8OFb-fhNauFCq309WN_i7ISUQprs9pzqpFgCIdz4pFeCIdq7canmNVHx3AUaG6IOxHCadQa45FYobWjaRDBaLuOoA9O48zC5FdX9lQXcIa16fiRI7EuzZBXGYvfnkWSSOWB9WqrTcU-jeINpE63v1G1GdgYJC5LF00hIbyo04vcCUpZSGomSUB1jwepyboOY7FesIk8opWwStSKAeWP0o359YVAwIPpvP3nx0DuXuh3D1I8fbsVRmVkkCt9lXk7knEhatJzuTV-oQVkTVdZCQTWPZo_33YVunXkxlhkTSv_gFZZwSTFisa6NujwHLlIieE1xhpuUpTji-l9kJhdrVaPYM6dGtJgGR5R5FpisFRxiVpWjFyl0ToJ4QZL-Ginc5Kl8d7VrJI3wT_Y_2sKoO8gflUn_FUytoEhyWPtksbzTvztkK-ollSZnmBfnXlpRLkY5DYhK87e45wTr1xSSPMMluluT6v4VjHsjZPhGp2vBEqiJ4P5TakofvtccZ4crjcAdeEgWnB08rJfXGafPzwVAAE9dGLzN3X725sv0qmxMRYZ8m_H20zCNpg5_O5xQoA8YmoNViV5SLEEUKnuQsaNTBe2ISYUScereX2_Cvs-GDs6x4hGWstsqhNqv-vygNXDlXsj1Gh7XxI3wdViMNVDll0NkSAOhKX2IBK4r3HjJBxGfz4xnW7-XjxFAssUJz7Pty226Hi36Ymf-62id8nie1MQIu-9JUbXxAD5KY5PrCjjyizd3HwrmDdL5kz_RkxKc___vFshsPEhx88ctIATzR_BKyLr-UqScgS8PhnldNBE962spzDATkMw2gtgkJ_7pDYrWL7aRGToUq8VuskTrbtoHKNVcDQqNnDraKoVuivam_vsNVE9KBVcxTU5s-SC0-YQEv9F5souGXMx1CkBQiwnWvPTz5lAzlRuOeYpdnFddVxPut_oJnDjdj9jvxpQGLABR9eL2nF-9vgd_oonJxByL6ApCEbbKs1NwLhcVmlrhNJHv5kfvrlxok5vF3bfqtQJ0BaK2ze_-6KWcgkC0RyCrDkt-4HYwTQILB--hxwPURMxaMy32cSOoMz_10Ed4SXNwogwpZgzvUWtJSspT3nqCN0UJupH6v_cTFztMYY2yacKiafGLGqwPeCfj7AjGXFPHR1OAeS0OHnf98yMT6yhLAEn4dCyFEsWYYLN9FjEuaI1tlqlDkNRJIHgRt2UO2bCH_GV_Hryzvbq_0Wlai-Xy0 "Basic Sample") +![Basic Sample](https://www.plantuml.com/plantuml/png/JK_BJkim4DtdA-RcRbAfJLJ4YbL3X611KKHIM5PECb1BVbZsM565-7V6QcdnPkGvZpbd4qXuYbfb_wGPLPmG3aGkt5ML5tFvAUaGXnZGZzOG6Yf7gokdX4cQLQ19oQ5gRbTjMksspvKMWT3pQj-mGaY3ldJ9FslH1siACMbfbf3NQSf0Nf3r-IBhZYpK-tiRpIJyiHZNJEg4TWhXXEKB-Cg0tyMvc77O2-UO-Ou3rCufEGgIrkIyQluleUxQykMXPub7k2dNi7rh4bOhPUS0gLa0ii2rd62AZefaEjdFahW8aDIe-5RWYD_da0MTGFOvqnZCNb7zbhl6sWLMydpg-xPZLY9TqAlD8rBWBwRnuQt-AzcWcQ9MFm00 "Basic Sample") + +Entities can also be decorated with icons/sprites using the $sprite parameter, for example: + +```plantuml +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +!define DEVICONS https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons +!define FONTAWESOME https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/font-awesome-5 +!include DEVICONS/angular.puml +!include DEVICONS/java.puml +!include DEVICONS/msql_server.puml +!include FONTAWESOME/users.puml + +LAYOUT_WITH_LEGEND() + +Person(user, "Customer", "People that need products", $sprite="users") +Container(spa, "SPA", "angular", "The main interface that the customer interacts with", $sprite="angular") +Container(api, "API", "java", "Handles all business logic", $sprite="java") +ContainerDb(db, "Database", "Microsoft SQL", "Holds product, order and invoice information", $sprite="msql_server") + +Rel(user, spa, "Uses", "https") +Rel(spa, api, "Uses", "https") +Rel_R(api, db, "Reads/Writes") +@enduml +``` + +![Sprites/Icons](https://www.plantuml.com/plantuml/png/hP9BZzem4CVl-HHUr0ChBPj3sqkbIek0Tf5uK1v5FQ59F05NZfrw9l3rEmvXD-f3wg4dE_EV-VyyCtaYXi1rQPCxut9RQrGdvee-f6c0o-FHyAdEQiAGUyVe-37tPLfPSB5cGAojoTBHky4gXdRpMLe2CGO97KPI0SPXUAoYVtAdiP1FDPvydOwMYyq_WBYkG8Uthq0Zwg2GZ05LmJ3IZQVn73LweNnQBhR3_MIpd4_-AwY9mGN9bpXu_pgrMrSfk6DjeMtwT_axdE5lMaa_x84mdF7NyautQNmxjJET3RyjTzl3VhfzFimcdoUBSVy-ILQIu5q_9ZwetgWczYM6djnNw2kBYa_0oY5gLGMlwvn9n3VNJZ_s6a3lFdbPO9ygaEBDQXWzsWRZTNj2LKgACeun592trYpnlCLUDH26kiZikw2RKnS5bH7ZuMeQ_UEmulaCJbia1TOgsPqa4YdhZoRlsiNihjSuw-jCgiV0a05XT9gRF7Zo1QlDbrbZxQscsnWUb0yQWnASFFliJOvo5ZwKmCQxBgopAs4cQxJjlA-psX5Ij6z-FKc8UgD8Vt-M3-jhxysJrmYQqdr4HVa9dPPz_mG0 "Sprites/Icons") + +Similar to icons/sprites is it possible to add links to all elements and relationships: + +```plantuml +@startuml Basic Sample +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +Person(admin, "Administrator", $sprite="person2", $link="https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/LayoutOptions.md#hide_person_sprite-or-show_person_spritesprite") +System_Boundary(c1, "Sample System", $link="https://github.com/plantuml-stdlib/C4-PlantUML") { + Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", $descr="Allows users to compare multiple Twitter timelines", $link="https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/LayoutOptions.md") +} +System(twitter, "Twitter", $link="https://github.com/plantuml-stdlib/C4-PlantUML") + +Rel(admin, web_app, "Uses", "HTTPS", $link="https://plantuml.com/link") +Rel(web_app, twitter, "Gets tweets from", "HTTPS", $link="https://plantuml.com/link") +@enduml +``` + +> `png` itself supports no links, therefore the following image is generated as `svg` image. +> Github does not support `svg` links in README.md. +> If you click on the image a new window is opened and there you can use the links. + +![Click on the image that the links are working](https://www.plantuml.com/plantuml/svg/jP9FYzH04CNl-HHjhuTPc4dOnPCmiECWUjZLOB9w39rqQHhxJrDL8GpYTxTxizb5F8W3vf0chrBl_NZ93R52dfmjNXW_s4c369aZlQugL7FvpV0uzHC13i4pU2w7uAfebSyxEs9jJLyTN-tgBDtVtLPE4GCcgJkc3MKyO1cpVr43Kl0RfPtnMo4F-JJ4g3YWt8gN5D4mx6LyUEywIzRuxtkv0YqmVoNeRUXNZ5jr2XD_Z6o2fzBfYz5ew9Q4RWdS1TpH6ERVrUKkBulcb8nSzoPCNYiyROQhnDue5os8PNOkgBmKFmgHhgUYDZFqdOen9No1NXnYj6PGcLqcwNYn5OUcBZ-yRTCAWhWkhyJTvsFErq03xkN1sZ2JoD-B10UH2A9246woR39nEnjcGC76GM86-Yyjfzf-FXQtuIKnyJzcdrzNKNm2k_u_prNT4r3kvttRrisVxglbWtyU9QFiysJmJFWEcD8ZvECh1lUFhZVWTP9-0G00 "Click on the image that the links are working") + +Elements and relationships can be decorated with tags and explained via a calculated legend, for example: + +```plantuml +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +AddElementTag("v1.0", $borderColor="#d73027") +AddElementTag("v1.1", $fontColor="#d73027") +AddElementTag("backup", $fontColor="orange") + +AddRelTag("backup", $textColor="orange", $lineColor="orange", $lineStyle = DashedLine()) + +Person(user, "Customer", "People that need products") +Person(admin, "Administrator", "People that administrates the products via the new v1.1 components", $tags="v1.1") +Container(spa, "SPA", "angular", "The main interface that the customer interacts with via v1.0", $tags="v1.0") +Container(spaAdmin, "Admin SPA", "angular", "The administrator interface that the customer interacts with via new v1.1", $tags="v1.1") +Container(api, "API", "java", "Handles all business logic (incl. new v1.1 extensions)", $tags="v1.0+v1.1") +ContainerDb(db, "Database", "Microsoft SQL", "Holds product, order and invoice information") +Container(archive, "Archive", "Audit logging", "Stores 5 years", $tags="backup") + +Rel(user, spa, "Uses", "https") +Rel(spa, api, "Uses", "https") +Rel_R(api, db, "Reads/Writes") +Rel(admin, spaAdmin, "Uses", "https") +Rel(spaAdmin, api, "Uses", "https") +Rel_L(api, archive, "Writes", "messages", $tags="backup") + +SHOW_LEGEND() +@enduml +``` + +![tags](https://www.plantuml.com/plantuml/png/bLJTRjfC4BtFK-pdhnT6JN3I7qMgX1G4gAb4MWg9Sed6ti5ikzwrTjRGl7rdrn08jLBrQj7CcJbppeov8G_EDvK--q-PGZSInThxcZvbcODjlrH-tUGDeIkiyMXylx1LLcimeUQ2lDGgpqOVBcOXz70tpIeWZuv3on5NW3Be-dNeVpQKSgAnuYRtKAR9vgf_cPoBDxbr4jt8Qki6oV_o-ltbk-karu6-2kWLD_qRDeVYPrEVeAq3KoA30tgE-WJfyTS9aeEQf-yCBloJHZ4GOw0roYb7qXvtdg4ZQz9Wrxb8HWrvMw7ZecI6jkOAlmOl3A8KjREoAJmblNqLo4ePXWx3gyWxyFQFMZWaaJY4put4Ha4C6DoAu9RWJTNMi2aK1K99WsWZKpwl9gKQc68n6mOcbjXeYAJttAbYY536erj1qGuG6OgTi3O7WNpBTn8dY5izfhiyfHiUwnJTp73imR-Ei3VW5TLGgp31x4iW_04R2Eyj6AcH16Wj-EGPI2IqBLKXql1jz0_Myh6W8MKDzLwAVNjADSvJcNFpCNZ8WJ0GtQd2MR8hBnRVfv7PQadxJPwB-448deRLRQmgaD-LTHLuPdofmnLhjS6WfVsLX9-DL3uCNYfJXi22JMHT7yKJWZiSm_xw-N3dg7TNszx30o65olXNm82GZnashZkzdBUcHh5p14dPerCUT-dzTH_jlvkZJRz6D6s93j9RdW2ha0XAx9IukFtsk9nEFa--ZjFUsGqQsLJwDm00 "tags") ## Supported Diagram Types -* System Context & System Landscape diagrams - * Import: `!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Context.puml` - * Macros: `Person`, `Person_Ext`, `System`, `System_Ext`, `SystemDb`, `SystemDb_Ext`, `Boundary`, `System_Boundary`, `Enterprise_Boundary` -* Container diagram - * Import: `!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Container.puml` - * Additional Macros: `Container`, `ContainerDb`, `Container_Boundary` -* Component diagram - * Import: `!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Component.puml` - * Additional Macros: `Component`, `ComponentDb` +> - `arg`: argument required (e.g. `alias`) +> - `?arg`: argument optional (e.g. `?tags`); an optional argument can be directly set via its keyword `$arg=...` (e.g. `$tags="specificTag"`) without the other optional arguments + +### System Context & System Landscape diagrams + + - Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml` + - Macros: + - `Person(alias, label, ?descr, ?sprite, ?tags, ?link, ?type)` + - `Person_Ext(alias, label, ?descr, ?sprite, ?tags, ?link, ?type)` + - `System(alias, label, ?descr, ?sprite, ?tags, ?link, ?type, ?baseShape)` + - `SystemDb(alias, label, ?descr, ?sprite, ?tags, ?link, ?type)` + - `SystemQueue(alias, label, ?descr, ?sprite, ?tags, ?link, ?type)` + - `System_Ext(alias, label, ?descr, ?sprite, ?tags, ?link, ?type, ?baseShape)` + - `SystemDb_Ext(alias, label, ?descr, ?sprite, ?tags, ?link, ?type)` + - `SystemQueue_Ext(alias, label, ?descr, ?sprite, ?tags, ?link, ?type)` + - `Boundary(alias, label, ?type, ?tags, ?link, ?descr)` + - `Enterprise_Boundary(alias, label, ?tags, ?link, ?descr)` + - `System_Boundary(alias, label, ?tags, ?link, ?descr)` + - Sprites: + - `person` + - `person2` + - `robot` + - `robot2` + + - C4 Model extension: Person() and System() support `$type` argument too. Is uses the same notation as `$techn`, e.g. `$type="characteristic A"` is displayed as `[characteristic A]` + +### Container diagram + + - Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml` + - Additional Macros (based on context diagram macros): + - `Container(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link, ?baseShape)` + - `ContainerDb(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link)` + - `ContainerQueue(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link)` + - `Container_Ext(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link, ?baseShape)` + - `ContainerDb_Ext(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link)` + - `ContainerQueue_Ext(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link)` + - `Container_Boundary(alias, label, ?tags, ?link, ?descr)` + +### Component diagram + + - Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml` + - Additional Macros (based on container diagram macros): + - `Component(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link, ?baseShape)` + - `ComponentDb(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link)` + - `ComponentQueue(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link)` + - `Component_Ext(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link, ?baseShape)` + - `ComponentDb_Ext(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link)` + - `ComponentQueue_Ext(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link)` + +### Dynamic diagram + + - Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml` + - Additional Macros (based on component diagram macros): + - (lowercase) `increment($offset=1)`: increase current index (procedure which has no direct output) + - (lowercase) `setIndex($new_index)`: set the new index (procedure which has no direct output) + - `LastIndex()`: return the last used index (function which can be used as argument) + + following 2 macros requires V1.2020.24Beta4 (can be already tested with ) + - `Index($offset=1)`: returns current index and calculates next index (function which can be used as argument) + - `SetIndex($new_index)`: returns new set index and calculates next index (function which can be used as argument) + + - All relationship macros are extended with `?index= `: + + > All `RelIndex...()` calls are obsolete and can be replaced with calls like Rel($index=..., ...) or Rel(..., $index=). + > A full sample see [samples/C4_Dynamic Diagram Sample - message bus.puml](samples/C4_Dynamic%20Diagram%20Sample%20-%20message%20bus.puml) + +### Deployment diagram + + - Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml` + - Additional Macros (based on **container** diagram macros): + - `Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, ?link)` + - `Node(alias, label, ?type, ?descr, ?sprite, ?tags, ?link)`: short name of Deployment_Node() + - `Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, ?link)`: left aligned Node() + - `Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, ?link)`: right aligned Node() + +### (C4 styled) Sequence diagram + +C4-PlantUML **does not offer** a full sequence diagram support, +but existing elements and relationships can be reused as participants and calls in the corresponding styles. + +> **!!! Contrary to all other diagrams, please define boundaries without `{` and `}` and mark a boundary end with `Boundary_End()` !!!** + + - Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Sequence.puml` + - Macros (based on **component** diagram macros): + - Basically all element specific macros (Person, System, Container...) can be reused with following differences: + - element descriptions are typically not displayed (can be activated via SHOW_ELEMENT_DESCRIPTIONS()) + - **boundaries have to be defined without `{` and `}`** and instead of `}` the **`Boundary_End()`** macro has to be called + - Additional (element specific) Macros: + - `Boundary_End()` + - Additional Layout Options: + - `SHOW_ELEMENT_DESCRIPTIONS(?show)` + - `SHOW_FOOT_BOXES(?show)` + - `SHOW_INDEX(?show)` + - Only following (extended) relationship specific macros is supported: + - `Rel($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="", $index="", $rel="")` + `$index` enables the definition of active/next index with e.g. the related index macros below + `$rel` enables the definition of all PlantUML specific arrow types, details see e.g. + [All arrow types](https://plantuml.com/sequence-diagram#4764f83f72ed032f) and + [Slanted or odd arrows](https://plantuml.com/sequence-diagram#5bd6712206960fab) + - The index related macros (like the dynamic diagram) + - `Index($offset=1)`: returns current index and calculates next index (function which can be used as argument) + - `SetIndex($new_index)`: returns new set index and calculates next index (function which can be used as argument) + - `LastIndex()`: return the last used index (function which can be used as argument) + - (lowercase) `increment($offset=1)`: increase current index (procedure which has no direct output) + - (lowercase) `setIndex($new_index)`: set the new index (procedure which has no direct output) + + - (Typically additional used) PlantUML statements: + - [Grouping message](https://plantuml.com/sequence-diagram#425ba4350c02142c) + - [Divider or separator](https://plantuml.com/sequence-diagram#d4b2df53a72661cc) + - [Reference](https://plantuml.com/sequence-diagram#63d5049791d9d79d) + - [Delay](https://plantuml.com/sequence-diagram#8f497c1a3d15af9e) + +### Samples Take a look at each of the [C4 Model Diagram Samples](samples/C4CoreDiagrams.md). +## Relationship Types + +- `Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, ?link)` +- `BiRel` (bidirectional relationship) + +You can force the direction of a relationship by using: + +- `Rel_U`, `Rel_Up` +- `Rel_D`, `Rel_Down` +- `Rel_L`, `Rel_Left` +- `Rel_R`, `Rel_Right` + +In following sample a person uses different systems, and a group of persons which have bidirectional relationships + +```plantuml +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +HIDE_STEREOTYPE() + +Person(a, "A") +Person(b, "B") +Person(c, "C") +Person(d, "D") +Person(e, "E") + +BiRel_U(a, b, "talk with") +BiRel_R(a, c, "talk with") +BiRel_D(a, d, "talk with") +BiRel_L(a, e, "talk with") + +Person(x, "X") +System(s1, "S1") +System(s2, "S2") +System(s3, "S3") +System(s4, "S4") + +Rel_U(x, s1, "uses") +Rel_R(x, s2, "uses") +Rel_D(x, s3, "uses") +Rel_L(x, s4, "uses") +@enduml +``` + +![(unidirectional) relationship versus bidirectional relationship](https://www.plantuml.com/plantuml/png/RP11QuD044Rl_eeq9mED4lNKKneLMh1KD87s9AiEZNHTPNSaxR_lZ59KoF6zntuCUpGeD0wjj1uQLScXXiqLiJTFhgl5pVbgy3gKWm5TTGf1eLDrhTjBeVZDtc0jcz8DWttAwlAMkAqm29fK4T8BqIZGJi_xBwzHNEJdE8lVpvzfREyiAmLjEcMBnytsURlxnvBmD6D56CvO4qOp0c5CQ9sQ36HnuJ4UG26_DpUwdjgKCaxLtHHngk-cX1Eiqdpu3_aFulpN8BIsEH3dXuNmM7WBuRFm5o9W4V3cT3vDZZE30KDsEfobjvRHAFsrJ4OPpF88ggQ__mC0 "(unidirectional) relationship versus bidirectional relationship") + +## Layout (arrange) elements (without relationships) + +In rare cases, you can force the layout of elements which have no relationships by using: + +- `Lay_U(from, to)`, `Lay_Up(from, to)` +- `Lay_D(from, to)`, `Lay_Down(from, to)` +- `Lay_L(from, to)`, `Lay_Left(from, to)` +- `Lay_R(from, to)`, `Lay_Right(from, to)` + +In following sample a person uses different systems, and a group of persons which have no relationships + +```plantuml +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +HIDE_STEREOTYPE() + +Person(a, "A") +Person(b, "B") +Person(c, "C") +Person(d, "D") +Person(e, "E") + +Lay_U(a, b) +Lay_R(a, c) +Lay_D(a, d) +Lay_L(a, e) + +Person(x, "X") +System(s1, "S1") +System(s2, "S2") +System(s3, "S3") +System(s4, "S4") + +Rel_U(x, s1, "uses") +Rel_R(x, s2, "uses") +Rel_D(x, s3, "uses") +Rel_L(x, s4, "uses") +@enduml +``` + +![Relationship versus Layout](https://www.plantuml.com/plantuml/png/LSt1QeD04CRnkq-HvgJGA55FFQLLeGLBHIEq9rbrQ8HrbTrPshnzPmn5Svl_3_RRaq6XqOxIUHXK9sqFkmlYR9w2G8iV_tl0Yssj0TrD2a6XtqrZC4kX-Ct1O2-7DaZYGy5Kl-V1A0o29ceIUY461TgVUV_rBSsQwfoLsSVvgyXSpt4Aq6PIhdZSxP_ttd-sb2zhTfJ9cZrbkYPGPfHEBgvDpLEjjzmbtztjJldkRtVEDwoV_zB09mrKLuCmkkP8NHqt43A46uWOeWt43361Ku9iQfvSPgm1GyfOBXZUOxfWT8_vWl6A9r2z7UKV "Relationship versus Layout") + +(In combination with [SHOW_FLOATING_LEGEND()](LayoutOptions.md#show_floating_legendalias-hidestereotype-details-and-legend)) a greater distance between an element and the +e.g. floating legend could be required that all e.g. corners of the drawing area can be reached. + +- `Lay_Distance(from, to, ?distance)`: Sets the distance between `from` and `to` with down alignment (Lay_Distance(from,to,0) equals Lay_D(from, to)). The default alias of the floating legend is LEGEND(). + +In following sample the floating legend should be in the left bottom corner of the drawing are. +(The normal SHOW_LEGEND() call requires no extra Lay_Distance() call and the legend is automatically drawn below the diagram on the right side) + +```plantuml +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +!define DEVICONS https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons +!define FONTAWESOME https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/font-awesome-5 +!include DEVICONS/angular.puml +!include DEVICONS/java.puml +!include DEVICONS/msql_server.puml +!include FONTAWESOME/users.puml + +Person(user, "Customer", "People that need products", $sprite="users") +Container(spa, "SPA", "angular", "The main interface that the customer interacts with", $sprite="angular") +Container(api, "API", "java", "Handles all business logic", $sprite="java") +ContainerDb(db, "Database", "Microsoft SQL", "Holds product, order and invoice information", $sprite="msql_server") + +Rel(user, spa, "Uses") +Rel(spa, api, "Uses") +Rel_R(api, db, "Reads/Writes") + +SHOW_FLOATING_LEGEND() +Lay_Distance(LEGEND(), db, 1) +@enduml +``` + +![db below legend, 1 unit distance](https://www.plantuml.com/plantuml/png/hL5DZzem4BtdLtXH3o0jH5NRIwLAYu3THUA30bkEqH0FuCgnKyy4r7_VCIIxKQjAFVGKvptFUtvl7eWXS5NOvCwut5OQrOcvfCzf6k0oE1e-LVkACEJUCJeUvBv8ImikplI9jJNxTFInluhGotoM5a2CGQ1i91DW78P16VMJEuq7-LNZoRVfQBdO_8CHLoNeyE7Dq0ZRFyYDFfN1C5BZf_4SENfrULmkjiFTPBESJ_whqHM32v8liF-fQUqjLGhkM5ceG_z9VuSp_8qhw8VD2CCPVnjlfqdZswdkT2L7xxeHkbUTKKNi2mmTEQ_GbnOLdu2LGzIg35vNEPEGxswPldIkKfrUyhggBfKWmvlLC6hKKU9nUq9Lo1Lb76CuG5vBi-1vRNlZG3pKHLfk6pLARIieZGWFLzEe7sk9tsTmsY8fi5R9bkGYaRB-QFAsNBpTrXhlktelqsDWs0DXL9gRF7Zo1rQRhxEhjBUQcXhkbGyQWn8xUVRPcnpbU_2X03RUjSrQMn7FP8ssxllMrGiX2HxXAn1ZjT5iVKjwVU0QGLEwYyAHJZRFortsE5iEjzF5KpQRF4qMusulcS7FR6o8mUNORT2RnFjUye1Eo_P_0G00 "db below legend, 1 unit distance") + +## Global Layout Options + +C4-PlantUML also comes with some layout options to make it easy and reusable to create nice and useful diagrams: + +- [LAYOUT_TOP_DOWN() or LAYOUT_LEFT_RIGHT() or LAYOUT_LANDSCAPE()](LayoutOptions.md#layout_top_down-or-layout_left_right-or-layout_landscape) +- [LAYOUT_WITH_LEGEND() or SHOW_LEGEND(?hideStereotype, ?details)](LayoutOptions.md#layout_with_legend-or-show_legend) +- [SHOW_FLOATING_LEGEND(?alias, ?hideStereotype, ?details) and LEGEND()](LayoutOptions.md#show_floating_legendalias-hidestereotype-and-legend) +- [LAYOUT_AS_SKETCH() and SET_SKETCH_STYLE(?bgColor, ?fontColor, ?warningColor, ?fontName, ?footerWarning, ?footerText)](LayoutOptions.md#layout_as_sketch) +- [HIDE_STEREOTYPE()](LayoutOptions.md#hide_stereotype) + +C4-PlantUML also comes with some person sprite/portrait options: + +- [HIDE_PERSON_SPRITE()](LayoutOptions.md#hide_person_sprite) +- [SHOW_PERSON_SPRITE(?sprite)](LayoutOptions.md#show_person_sprite) +- [SHOW_PERSON_PORTRAIT()](LayoutOptions.md#show_person_portrait) +- [SHOW_PERSON_OUTLINE()](LayoutOptions.md#show_person_outline) (requires PlantUML version >= 1.2021.4) + +## Sprites and other images + +C4-PlantUML offers predefined person and robot sprites which can be directly used: + +- `person`,`person2` +- `robot`, `robot2` + +```plantuml +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml + +Person(pB, "Sam", $sprite="person2") +Person_Ext(pA, "Bob", $sprite="person") + +System_Ext(robB, "Robot A", $sprite="robot2") +System_Ext(robA, "Robot B", $sprite="robot") + +SHOW_LEGEND() +@enduml +``` + +![Predefined person and robot sprites](https://www.plantuml.com/plantuml/png/PSp1IiD04CRnUvuY1Wyfj5qGJuBGf0OzL2qMyHXsayKkxEuCCxEeRsysY2YvVlER_uv5awJWYmiN1vz6Mvv5a6-K8lsnVNToJYQnfG6Ys2ZR0O92hsF-sR2CtXcrlzuSy_JwU511irYQfduF0I7c7ypzucY98TROhilgf4ErBYyPoOczhN0-NLMh7zHtdr9ZCy4Mp19EhZXziTWmGmAJcozWGChcBwSyvUn_tVpgTg7dziFpMt_exhkdktfLx6mSK_3V "Predefined person and robot sprites") + +Additional `$sprite` (images) can be defined with following PlantUML supported options: + +- included (standard library) sprites via their `{SpriteName}`; details see [sprites](https://plantuml.com/sprite) +- images via `img:{File or Url}` +- OpenIconic via `&{OpenIconicName}`; details see [openiconic](https://plantuml.com/openiconic) + +Size of the displayed images can be changed with `,scale={factor}`. +Color of the displayed images can be changed with `,color={color}`. + +(If sprites are defined via $tags then the calculated legend is updated too) + +```plantuml +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +'stdlib users.puml defines sprite "users" +!include + + +AddRelTag("plantuml", $textColor="$ARROW_FONT_COLOR", $lineColor="$ARROW_COLOR", $sprite="img:https://plantuml.com/logo3.png{scale=0.3}", $legendSprite="img:https://plantuml.com/logo3.png{scale=0.1}", $legendText="console triggered") + +Person(user, "user group displayed with a sprite", $sprite="users") + + +Container(container, "Container with scaled and colored OpenIconic", $sprite="&folder,scale=5.0,color=gray") + +System(system, "System with an image", $sprite="img:https://plantuml.com/logo3.png") + +Rel(user, system, "Rel with image (via tags)", $tags="plantuml") +Rel(user, container, "Rel with OpenIconinc", $sprite="&folder") + +SHOW_LEGEND() +@enduml +``` + +![Sprite, image and OpenIconic](https://www.plantuml.com/plantuml/png/bP91RzGm48Nl_XL3L45MsYP5XSkAe5PB1KWBMwL572itddKjENPaEvGLuhypjfTi3d3OKvonvvltddtb0tTXx3LxeKodHu7m5CBWLtNj-7CbLNWQ7qUFhhCce0bLP_jwqDp4ddCVX5QFzVhD-MqiVVkogNlk0pegFQofWok3hXeYdxtAfo7IVAg1m1qTyE07fm92aRQAevHtThTJ7TQfNXyRtpF6heLeKTzpMHP_zHHBE0luCwojjgufpgxRTllzORtTRDkufMdMVxQoWAPGlLn5_wjwCfaSQoljPJKO-SjtN6DpKLt-JaYKQCJToTslPzttfBWfA5zlDK9mIafqA8e5OxTas9eo6b_cT40wEmuWbAS9UnJmJ3S4_93Wt4hEaY1ikeYoowj4cwePaPG9u4P05pEYzNP0yvbQL3VdljnPBOYGhRojBfRfV2CTtyTnTtiVi2zz-j2S_7_GQK3rNE99aKTeY_gGmiIbKe9c8fG_58V0fLz4U5mqntUnc06c3EQCoQhvbzTawnEzbytDnvkl7ye5kq8Z2Fm7 "Sprite, image and OpenIconic") + +Relationship specific sprites are typically smaller and therefore following options are possible: + +- use smaller icons (like the $triangle in the following sample) +- use an additional scale factor (direct as part of the argument, or via a variable) +- if sprite argument starts with `&` an OpenIconic name can be used too (details see ) + +```plantuml +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml + +Person(user, "User") +Person(user1, "User 1") +Person(user2, "User 2") +Person(user3, "User 3") + +System(system, "System") + +' normal sprites are too big +Rel_L(user, user2, "informs", "courier", "normal sprites are too big", $sprite="person2") + +' scaled sprites are ok +Rel_R(user, user3, "informs", "courier", "scaled sprites are OK", $sprite="person2,scale=0.5") + +' combine sprite and scale to a new sprite +!$combinedSprite="person2,scale=0.5" +Rel_R(user, user3, "informs", "courier", "combined sprites are OK", $sprite=$combinedSprite) + +' special smaller sprites can be used +sprite $triangle { + 00000000000 + 00000F00000 + 0000FBF0000 + 0000FBF0000 + 000F999F000 + 000F999F000 + 00F66666F00 + 00F66666F00 + 0F3333333F0 + 0F3333333F0 + 0FFFFFFFFF0 + 00000000000 +} +Rel_R(user1, system, "orders", "http", "small sprites, like the small triangle", $sprite="triangle") + +' if sprite starts with &, sprite defines a OpenIconic, details see https://useiconic.com/open/ +Rel_D(user, user1, "requests", "async message", "if sprite starts with &, it defines a OpenIconic like &envelope-closed", $sprite = "&envelope-closed") +@enduml +``` + +![Relationship with sprite or OpenIconic](https://www.plantuml.com/plantuml/png/bLJVQnin37w_lq8DeMiXoQN9DiWWKDPnCDRHqjBdujXAOkgpRvPlMHdxt-SVSPEikK7rujCdIzyd8TybEMPTMwlYH6gkMe6mTgwXJsLfsMQqacxTBbf2oursgDs8cxfi5DCXPqXEABaehzuFRmFqyFswh1avj1vwl0ePlzoe2TMBMxHaz5aeDO3UWpzwv_lWnHQ5YqDyal798JxD-DJZnVspPwtFA1u-almGUGVQs9efeCPAXmJC8ZXZO25NKDoXUhpUYifiKYzz1lNy9pUjbMZ3PtSL7-qdUDvhei198YRE58g35FCKAU_sAAUTb4VoRxuTOHl4Y_Fnw4FYvQPUI8tRH61Q92bUC33GkDb6YfF-zgguxwpu1hsvMBVYV_YysZ2c1haCe_NpLMXViZdJiC30AOg4GTzPoVHA8VmkmDjuPpk_ElIhpzN__6escrNTVlKnMDNbLzDaLPUVRVnAxvyysRJyBwjhh40RHniUOZZZOF9O1g3a4u9R8oGyZsH_CJAMza4kyoh4nqwmaMuDfuEC2bnAZGGCRXhKNxdHaWyywfXK18IxNuBNAcCu_WQClrt6BhxizYC-P8i_MYGNks3qh3dKICHM681EET8TbP8QFaNz4vMd779b2CMkNPX3xrNqlBX4BTfQ_GK0 "Relationship with sprite or OpenIconic") + +## Custom tags/stereotypes support and skinparam updates + +Additional tags/stereotypes can be added to the existing element stereotypes (component, ...) and highlight,... specific aspects: + +- `AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite, ?borderStyle, ?borderThickness)`: + Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend. +- `AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite, ?lineThickness)`: + Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend. +- `AddBoundaryTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?type, ?legendText, ?borderStyle, ?borderThickness, ?borderStyle, ?borderThickness, ?sprite, ?legendSprite)`: + Introduces a new Boundary tag. The styles of the tagged boundaries are updated and the tag is displayed in the calculated legend. +- `UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite, ?borderStyle, ?borderThickness)`: + This call updates the default style of the elements (component, ...) and creates no additional legend entry. +- `UpdateRelStyle(textColor, lineColor)`: + This call updates the default relationship colors and creates no additional legend entry. +- `UpdateBoundaryStyle(?elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?type, ?legendText, ?borderStyle, ?borderThickness, ?sprite, ?legendSprite)`: + This call updates the default style of the existing boundaries and creates no additional legend entry. + If the element name is "" then it updates generic, enterprise, system and container boundary style in on call. +- `RoundedBoxShape()`: This call returns the name of the rounded box shape and can be used as ?shape argument. +- `EightSidedShape()`: This call returns the name of the eight sided shape and can be used as ?shape argument. +- `DashedLine()`: This call returns the name of the dashed line and can be used as ?lineStyle or ?borderStyle argument. +- `DottedLine()`: This call returns the name of the dotted line and can be used as ?lineStyle or ?borderStyle argument. +- `BoldLine()`: This call returns the name of the bold line and can be used as ?lineStyle or ?borderStyle argument. +- `SolidLine()`: This call returns the name of the solid line and can be used as ?lineStyle or ?borderStyle argument (enables e.g. a reset of dashed boundaries). + +Each element can be extended with one or multiple custom tags via the keyword argument `$tags="..."`, like `Container(spaAdmin, "Admin SPA", $tags="v1.1")`. +Multiple tags can be combined with `+`, like `Container(api, "API", $tags="v1.0+v1.1")`. + +### Element specific tag definitions + +Sometimes an added element tag is element specific and all element specific colors should be used, e.g. a specific user role should be defined as element tag with the specific colors `...PERSON_...` like + +```plantuml +AddElementTag("admin", $fontColor=$PERSON_FONT_COLOR, $bgColor=$PERSON_BG_COLOR, $borderColor=$PERSON_BORDER_COLOR, $sprite="osa_user_audit", $legendText="administration user") +``` + +Therefore element Add...Tag() shortcuts are added which use the specific colors as default values and the call can be simplified like + +```plantuml +AddPersonTag("admin", $sprite="osa_user_audit", $legendText="administration user") +``` + +Following calls introduces new element tags with element specific default colors: + +- `AddPersonTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?legendText, ?legendSprite, ?type, ?borderStyle, ?borderThickness)` +- `AddExternalPersonTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?legendText, ?legendSprite, ?type, ?borderStyle, ?borderThickness)` +- `AddSystemTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?legendText, ?legendSprite, ?type, ?borderStyle, ?borderThickness)` +- `AddExternalSystemTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?legendText, ?legendSprite, ?type, ?borderStyle, ?borderThickness)` +- `AddComponentTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite, ?borderStyle, ?borderThickness)` +- `AddExternalComponentTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite, ?borderStyle, ?borderThickness)` +- `AddContainerTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite, ?borderStyle, ?borderThickness)` +- `AddExternalContainerTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?techn, ?sprite, ?legendText, ?legendSprite, ?borderStyle, ?borderThickness)` +- `AddNodeTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite, ?borderStyle, ?borderThickness)` + (node specific: $type reuses $techn definition of $tags) + +### Boundary specific tag definitions + +Like the element specific tag definitions exist boundary specific calls with their default colors **and type**: + +- `UpdateContainerBoundaryStyle(?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?type, ?legendText, ?borderStyle, ?borderThickness, ?sprite, ?legendSprite)` +- `UpdateSystemBoundaryStyle(?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?type, ?legendText, ?borderStyle, ?borderThickness, ?sprite, ?legendSprite)` +- `UpdateEnterpriseBoundaryStyle(?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?type, ?legendText, ?borderStyle, ?borderThickness, ?sprite, ?legendSprite)` + +### Define a new legend title + +All the above described `Update....(..., ?legendText, ...)` calls can define a new legend text. +Only the legend title cannot be changed. Therefore, the following call is added to allow it to be changed as well: + +- `UpdateLegendTitle(newTitle)` + +### Comments + +- `SHOW_LEGEND()` supports the customized stereotypes + (`LAYOUT_WITH_LEGEND()` cannot be used, if the custom tags/stereotypes should be displayed in the legend). +- `SHOW_LEGEND()` has to be last line in diagram. +- Don't use space between `$tags` and `=` (PlantUML does not support it). +- Don't use `,` as part of the tag names (PlantUML does not support it in combination with keyword arguments). +- If 2 tags define the same skinparam, the first definition is used. +- If specific skinparams have to be merged (e.g. 2 tags change the font color) an additional combined tag has to be defined. Use `&` as part of combined tag names. + +- Automatically merging colors of relationship tags is not supported in PlantUML before v.1.2022 + If an older version is used and one tag modifies the line color and the other the text color, an additional combined tag has to be defined and used. + +### Sample with different tag combinations + +```plantuml +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +UpdateElementStyle(person, $fontColor="green") +AddElementTag("v1.0", $fontColor="#d73027", $borderColor="#d73027") +AddElementTag("v1.1", $fontColor="#ffffbf", $borderColor="#ffffbf") +AddElementTag("v1.0&v1.1", $fontColor="#fdae61", $borderColor="#fdae61") +AddElementTag("fallback", $bgColor="#444444") + +' If spaces are requested in the legend, legend text with space has to be defined (incl. all other additional details) +AddElementTag("microService", $shape=EightSidedShape(), $legendText="micro service (eight sided) (no text, no back color)") +' If no special tag names should be displayed in legend, no explicit legend text definition is required (all additional details are automatically calculated) +AddElementTag("storage", $shape=RoundedBoxShape()) + +UpdateRelStyle(black, black) +AddRelTag("service1", $textColor="red") +AddRelTag("service2", $lineColor="red") +AddRelTag("service1&service2", $textColor="red", $lineColor="red") + +Container(spa, "SPA", "angular", "The main interface that the customer interacts with via v1.0", $tags="v1.0") +Container(spaAdmin, "Admin SPA", "angular", "The administrator interface that the customer interacts with via new v1.1", $tags="v1.1") +Container(api, "API", "java", "Handles all business logic (incl. new v1.1 extensions)", $tags="v1.0&v1.1+v1.0+v1.1") +Container(spa2, "SPA2", "angular", "The main interface that the customer interacts with via v1.0", $tags="v1.0+fallback") +Container(spaAdmin2, "Admin SPA2", "angular", "The administrator interface that the customer interacts with via new v1.1", $tags="fallback+v1.1") + +Container(services, "Services", "techn", $tags="microService") +Container(fileStorage, "File storage", "techn", $tags="storage") + +Rel(spa, api, "Uses", "https") +Rel(spaAdmin, api, "Uses", "https") +Rel_L(spa, spa2, "Updates", "https") +Rel_R(spaAdmin, spaAdmin2, "Updates", "https") + +Rel_D(api, services, "uses service1 via this call", $tags="service1") +Rel_D(api, services, "uses service2 via this call", $tags="service2") +Rel_D(services, fileStorage, "both services stores via this call", $tags="service1&service2+service1+service2") + +SHOW_LEGEND(false) +@enduml +``` + +![merged tags](https://www.plantuml.com/plantuml/png/jLLHRzis47xthxXvGsV1hbrxnGeC2D0ipTO2sHR42VOOdCIpn8qYDVBa9Fz-Hz4AvCfRq8Vw8PJ8xxxxxjCTypumUcvhC_b6syAqYg1YRi9FgvN7XsMfkMhpDf0ld6Mol2nSlMeCsXZpEh0oEbzTl7rz7RVkVhjQrHYOl6pTNqW4Qaj-sKJ-oLsZaEdIK2qyMtuoD6l81sSNyDrEi1VEE7ysBJsHdMQJSwKEs5iiPzFzUlbcUepyLhtxuStcNTpDdLVaZ_TFSgm_vzZ9Bz-DETB-QHslJX8ff1_NOwAqFoRQeJ4v5dzt4MMFVjlz13tv7Zxj83HOK03q19x-QIamAT0Mk28mL99LYyCAJ8yC3vgh50GL1c07EO6YdROIDujVU0cI5vmGU42bD6jdqGY6KPimKbdhmhij-RqkA2eD5JPqTgdBYhTQaTh6zrac9qd6hQWuIr4GKXZCAC8XH7m6C-iwhGkGXsW05B7sR9gbacKtD5HeDC1OWiMQ0eJAjKPrnUZG67nADlGMI0mzDaONceTsfCgx4a67pa7jen5YmRZuP3Esx6faNGZc2UHlqHhaAFnpQm8xZ-N0bHlNMYdnP_TuS2Nhc_w6J6hut4Z12-YMpcivIMJ9gwv_H7hVLQ9sUWgtYJYZBRs0Mx_g0yR49oacprCx2mqkOBgzFf_AWhOK7tnylAq8Qe60jan-5tkDA-Ik9uisY7taqnaM759BxZL2Fy6CPJXByvmTfpjNjRQIeLlXT6QCPpgmHx7_IoLOUe0qkmCPwoCPsEYeuFfJJFWNxZ6k7z4gGw4RdRmD0Wm1Z2jrqGzLpmnYCTcWdGtPKPPqQSpZqtoKL6hV9AytNytiUN_Xd7HzCxHzy_LzxyNqNWmbfOuDqP33OnJ1L5JscU3uOXfMjDE6jcaq9UeNUOD-KiSi_Oa8aCb9BPywu2wajDr_GpbFnyci_y7SNoMImnTDupy2tGoe-gV_W7Vu3waj1ywqahf_NtSUSwK3n5jhK5qwZ_w-pB9vWMNJimm-qB7NkUFgcRqpNPRJfEFxQTxlp0Vv9jkFV_nvVtNvw-Nl7sRICe6ooNkoggtDlm00 "merged tags") + +### Sample with tag dependent sprites and custom legend text + +```plantuml +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +!define osaPuml https://raw.githubusercontent.com/Crashedmind/PlantUML-opensecurityarchitecture2-icons/master +!include osaPuml/Common.puml +!include osaPuml/User/all.puml + +!include +!include +!include +!include +!include + +AddExternalPersonTag("anonymous_ext", $sprite="osa_user_black_hat", $legendText="anonymous user") +AddPersonTag("customer", $sprite="osa_user_large_group", $legendText="aggregated user") +AddPersonTag("admin", $sprite="osa_user_audit,color=red", $legendSprite="osa_user_audit,scale=0.25,color=red", $legendText="administration user") + +AddContainerTag("webApp", $sprite="application_server", $legendText="web app container") +AddContainerTag("db", $sprite="database_server", $legendText="database container") +AddContainerTag("files", $sprite="file_server", $legendText="file server container") +AddContainerTag("conApp", $sprite="service_application", $legendText="console app container") + +AddRelTag("firewall", $textColor="$ARROW_FONT_COLOR", $lineColor="$ARROW_COLOR", $sprite="firewall,scale=0.3,color=red", $legendText="firewall") + +Person_Ext(anonymous_user, "Bob", $tags="anonymous_ext") +Person(aggregated_user, "Sam, Ivone", $tags="customer") +Person(administration_user, "Bernd", $tags="admin") + +System_Boundary(c1, "techtribes.js"){ + Container(web_app, "Web Application", "Java, Spring MVC, Tomcat 7.x", $tags="webApp") + ContainerDb(rel_db, "Relational Database", "MySQL 5.5.x", $tags="db") + Container(filesystem, "File System", "FAT32", $tags="files") + ContainerDb(nosql, "NoSQL Data Store", "MongoDB 2.2.x", $tags="db") + Container(updater, "Updater", "Java 7 Console App", $tags="conApp") +} + +Rel(anonymous_user, web_app, "Uses", "HTTPS", $tags="firewall") +Rel(aggregated_user, web_app, "Uses", "HTTPS", $tags="firewall") +Rel(administration_user, web_app, "Uses", "HTTPS", $tags="firewall") + +Rel(web_app, rel_db, "Reads from and writes to", "SQL/JDBC, port 3306") +Rel(web_app, filesystem, "Reads from") +Rel(web_app, nosql, "Reads from", "MongoDB wire protocol, port 27017") + +Rel_U(updater, rel_db, "Reads from and writes data to", "SQL/JDBC, port 3306") +Rel_U(updater, filesystem, "Writes to") +Rel_U(updater, nosql, "Reads from and writes to", "MongoDB wire protocol, port 27017") + +Lay_R(rel_db, filesystem) + +SHOW_LEGEND() +@enduml +``` + +![tags with sprites and custom legend](https://www.plantuml.com/plantuml/png/dLJTRkCs4xttKt2DlN00nyewNxu0HRDOnqwxNJYRr3_DfJ0Inx9QYbH9AevHzDqxf6tHiPMVDbSHvvmpXpE7_c8iQ5iLelKXbwceEBAbjQNv8Oeqh7fPRfTLKXdKgP8MfUsbgeXA0T9nJetb8a-YuVzExztH_7OS5M0iQZgAXyI0NABkbKw_zO7ZWZwPCd1F1-_eCzHWbiYBNF9er-1KbIWDffNExHfqkimjfhRIs3_DYMks1i9rjksYeIeA9RsNu-BSa6SGObCEzH_LOf6d64rHFw8s4GSB2HYCZJ_u_39oaOjteA0iHPw2pPLy6Ko3JB6q9d88EeZtMA_15xd65GZnkTKQS7xpP55B4FVKLyaPP9qsI2NNXQfCZ4-stMKVJKbJnQksCX2xPSI9WFIFU0c-AZ13oMU4lGfKvd3j4zTXJpcjZ5K5waPH0Jh3EDEgAezaiqnZ1XPviowuC3IAGiLpsqsLKFfA8m_2qsQaIK7WrLclVn58HsvSjznOxKUzS-GirTdshbQO3CfotzRnNW-rYSC8nTAT4YaV2VDaNpI4hq4nb5-NTBaq-whke5dHbzYczBee5Gy6q13LGtKY6INmQ0fEVeB22-yYxBYMM4E_glR7mMHozn0FxyPt4ozBrAPIC5GhrOi_Vsdl0UlCRC8Nq-lfr9dtEUgozhLAl378pDN1OphP4ZiXqJlM58ek--LHIGpa-hq4thFirHrHInve7kHSJjV6OX5VgqfoqEjE-ed05jEbrNc2flUxQP_yrMBqLo-kGmbqwo7W0sLny6nHxM_m25tctexCsErlmowRgOBAxBBt5FflWt_oN7cKT3IAc2UaGulqcY3OQ9jF9t-xdluwPXUzYtqrdXmgTNnQ_Ts8z9EBu-QcRVSvc9tt0zj36wn8PVuK1F-kN4jdWasjqXiRIcPgTCtwlVuRHggIW_Khc6_-sms9NJgK3x8RHTYeaflH_DrgqH2EmXEcFpTedDhNsUn-6WH223q_vEY_2Xm6wj-AU9MQiBTXu8Ojj2eOICvMxhaPPfKJeub7tqRNb9vIQSlEpy_-lt4JTCA6dsaTmdPR38Zz_Qt89IkriYfLOjkiVtdswN9hEvw71RvXd53mbliWT-3_eRxy4IvSe7bSxxxE6DRnf7vWeJsLfb_fbszyy_FDzr7dfFK59QyAyGy0 "tags with sprites and custom legend") + +### Sample with different boundary tag combinations + +```plantuml +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml + +' Update the generic boundary style and the "system", "enterprise", "container" boundaries styles too +UpdateBoundaryStyle($bgColor="gold", $fontColor="brown", $borderColor="brown") +' (Re-)Updates the system boundary styles; re-set $bgColor avoids '(no back color)' in legend too +UpdateSystemBoundaryStyle($bgColor="gold", $fontColor="white", $borderColor="white") + +Boundary(b, "A Boundary") { +} + +Container_Boundary(cb, "A Container Boundary") { +} + +System_Boundary(sb, "A System Boundary") { +} + +' defines a new border style incl. new border type +AddBoundaryTag("repository", $bgColor="green", $fontColor="white", $borderColor="white", $shadowing="true", $shape = RoundedBoxShape(), $type="GitHub repository") + +Boundary(c4Respository, "plantuml-stdlib/C4-PlantUML", $tags="repository") { + Component(readMe, "README.md", "Markdown") +} + +' boundary tags are internally extended with '_boundary' that it uses a different name space +' this enables different element and boundary styles for the same tag name +AddBoundaryTag("v1", $bgColor="lightgreen", $fontColor="green", $borderColor="green") +AddElementTag("v1", $bgColor="lightred", $fontColor="red", $borderColor="red") + +Boundary(anotherBoundary, "Another Boundary", $type="BOUNDARY TYPE", $tags="v1") { + Component(anotherComponent, "Another Component", $techn="COMPONENT TYPE", $tags="v1", $descr="Component and boundary use different tag name spaces that both v1 tags can use different styles") +} + +Lay_R(b, cb) +Lay_R(cb, sb) + +Lay_D(b, c4Respository) + +Lay_R(c4Respository, anotherBoundary) + +SHOW_LEGEND() +@enduml +``` + +![custom border tags](https://www.plantuml.com/plantuml/png/bLHHRzem47xFhxX5bKYa0ghKfqr8fO3QXm8Lj9hwX9puIAmcTcGxfMZQVvyF4vg6RTgUsllkxlEN--wuCPPfMvT5y4N8jAWvGcvjPRuEXvhj1fcmUPtK1dMgf4Lf1wagXrN19FNqZUM5I8QJw_uZGS_pXs79Z4NjeCr4bPMIr5CHVz23vuepYs1pX0mbQf52ech9cTw3iVi2WKb-I8TcxsZAy192Hu2wqi8WHII32TSRDgq2ZMysO9KA_1ktHzer9QAB99keGkbHcAc2EvgBhQCvGebMEqbOeZH7_GcDdUXeXVtOivg3DY-jezny0urzWnQQnu2zAS4Dz2Af867fAwG4npqG4WhCKFAMuFM1z3zaxt9XiIExGUCWQ9YYn0rj34qOnl0Z-1a4asQCcrDXwYjFcRCUB_6ZmVW63vzLzu3Zrl4OO21n1rxcqMPQjK4RjliAWp7d3SiJow9GOwMCiCgHNa9h61fH_liq23KvusedP3OAhQuRg48OmOfUHFVm-vgGA7OvKZCAxuIzhnDegMZFDRrUeMaoRX1_kOcGA5bcHkqleZ41d6uaqiZu71tHQZQUpcU3aWmFvqo_Sh-9DDEFfIC-O9f6QL5BLXHxm7UBz2sm4pQ7tgOfxe7DcGLXeJO7FxZORb6Zj21PYM0gbc90LS80IfOKQ5erM619VvdatQM7hTB-9eZ7QIB2SoFVhZuPM8WijxzpqMDT5pqQ4-lCI_aZgSRkcH3I9IIiRIMJokQecvYscf3s2PoMudRvl9YELo_mzF8uEnbBOZg6Dgmde4LxmWu4cEPo54wMyyVbOhPuEcEc_pcQr2dtZLqpoDQMNwwlvQlnvYVkPNYxydkJCjdfyNRwBNjW-ysAVZVI93u6gOkCYmxXz91hht_SD7MEeZDOLxQ-NtxVFCpkPejf50StABaxcLy0 "custom border tags") + +### Custom schema definitions (via UpdateElementStyle()) + +Via `UpdateElementStyle()` calls, it is possible to change the default colors, sprites, legend text, tags, ... +It automatically updates the legend too. +If the corresponding section is stored in a separate file then it can be reused as default of all diagrams. + +```plantuml +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml + +' <<<<< this section could be stored in a separate file and reused in all other diagrams too +' it defines new default colors, different default sprites and legend +!$COLOR_A_5 = "#7f3b08" +!$COLOR_A_4 = "#b35806" +!$COLOR_A_3 = "#e08214" +!$COLOR_A_2 = "#fdb863" +!$COLOR_A_1 = "#fee0b6" +!$COLOR_NEUTRAL = "#f7f7f7" +!$COLOR_B_1 = "#d8daeb" +!$COLOR_B_2 = "#b2abd2" +!$COLOR_B_3 = "#8073ac" +!$COLOR_B_4 = "#542788" +!$COLOR_B_5 = "#2d004b" +!$COLOR_REL_LINE = "#8073ac" +!$COLOR_REL_TEXT = "#8073ac" + +UpdateElementStyle("person", $bgColor=$COLOR_A_5, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_A_1, $shadowing="true", $legendText="Internal user") +UpdateElementStyle("external_person", $bgColor=$COLOR_B_5, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_B_1, $legendText="External user") +UpdateElementStyle("system", $bgColor=$COLOR_A_4, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_A_2, $sprite="robot", $legendText="Our chatbot based system") +UpdateElementStyle("external_system", $bgColor=$COLOR_B_4, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_B_2, $legendText="External system") +UpdateRelStyle($lineColor=$COLOR_REL_LINE, $textColor=$COLOR_REL_TEXT) +' >>>>> end of section + +Person(customer, "Personal Banking Customer") +System(banking_system, "Internet Banking System") + +System_Ext(mail_system, "E-mail system") +System_Ext(mainframe, "Mainframe Banking System") + +Rel(customer, banking_system, "Uses") +Rel_Back(customer, mail_system, "Sends e-mails to") +Rel_Neighbor(banking_system, mail_system, "Sends e-mails") +Rel(banking_system, mainframe, "Uses") + +SHOW_LEGEND() +@enduml +``` + +![custom schema](https://www.plantuml.com/plantuml/png/dLJlJ-904FtUlsBicHmcAbXGcijnKRZcpWJ1y2DttvfjTmgDsrsoEututz-MHIs8PsBvGFlUl9StivEzDiGqbONmZdAPYf8ZB8bMvbkpgTdZ-IAdPPcK1dMg9A6ayrGLpPLWijAS6U8YJvg3pjbz1StlXis26K9jeNXGATPqlghSlQ_mlNg0bha1WodbIaAgIi4XGJ2aD7B89J1BhfXcX93b0e593XfBisM504LBrC1pjj2iC41AMVESW6EMIpGWyR5wPwKWI9LGsfpQwYn3RVE_C6QbSqApyHUuGFld7HqFniFn9Bw9Bw47_fTkravQeL_3EniyQL-6hQiwtjxWs0g3YquT3pPunfFmgbt7BnoEs4fgFgDeFflS31tNhNwlN7-huI5dcDJnm6KAMCA3EkuoXQrkcwLrtFLmsGcwOLZ7NSy1RxKwDVz9D8o7jwFeW9aZPz7VsGxfpLUS4KO22vGqfIU13N-5sYZfdy9niXXKXz9xdRK5CoN9mRkZgEgLvgZtD1UMC4l6rMCk5psVT8cLjpl86QwfvzzAGYsPW6fx_PE3gN3jQk9tu_K_4SyUrLwMQFrn5lDa28k34-fyOaA19ToEztoj4aNxyncN6j8b8qj1mWnoS0a-6jMxEVkVo6ctzxrHxQMPe719ZaKkqPdihQXr8klXkBqDFR5tn8_g0PGSLFPy1NdU_URe6sbfI1MeJy5tY8tGP_B1xXSCjfmDCzsaQYIEsGx3Qjos8Rrefi_njvBODjOeM2vUDT6P_QurkbieCyqAj6Ltp-y7lErKQidVf9eRDBRCLiLzbZxKIdUJJ55o0xZ9Ou3KLZF2VB5CbDvhzxzg9tshg3MqJULDVu__nCFeLpJwsJZnhgrBMOX_ "custom schema") + +## Element and Relationship properties + +A model can be extended with (a table of) properties that concrete deployments or more detailed concepts can be documented: + +- `SetPropertyHeader(col1Name, ?col2Name, ?col3Name, ?col4Name)` + The properties table can have up to 4 columns. The default header uses the column names "Name", "Description". +- `WithoutPropertyHeader()` + If no header is used, then the second column is bold. +- `AddProperty(col1, ?col2, ?col3, ?col4)` + (All columns of) a property which will be added to the next element. + +Following sample uses all 3 different property definitions (and the aligned deployment node). + +```plantuml +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml + +' default header Property, Value +AddProperty("Name", "Flash") +AddProperty("Organization", "Zootopia") +AddProperty("Tool", "Internet Explorer 7.0") +Person(personAlias, "Label", "Optional Description (with default property header)") + +SetPropertyHeader("Property","Value", "Description") +AddProperty("Prop1", "Value1", "Details1") +AddProperty("Prop2", "Value2", "Details2") +Deployment_Node_L(nodeAlias, "Label", "Optional Type", "Optional Description (with custom property header)") { + + WithoutPropertyHeader() + AddProperty("PropC1", "ValueC1") + AddProperty("PropC2", "ValueC2") + Container(containerAlias, "Label", "Technology", "Optional Description (without property header)") +} + +System(systemAlias, "Label", "Optional Description (without properties)") + +' starting with v.2.5.0 relationships support properties too +WithoutPropertyHeader() +AddProperty("PropC1", "ValueC1") +AddProperty("PropC2", "ValueC2") +Rel(personAlias, containerAlias, "Label", "Optional Technology", "Optional Description") +@enduml +``` + +![properties sample](https://www.plantuml.com/plantuml/png/XP9HRzCm4CVVyobCNfPANR9L82IUDdKWaCfMGG69b-gQ78qbnsVPPqP0V7TiQrsxBYLFFfz_T_R_Vxvo39Pzfx8NKjVADoXQPkFUL9M5-t8hkVKRxz3Mf1arbpLrbL6WOysvuqR9JJL_URwCgIyV5rK7Zj66rFe6ZQA-YqKcNf2TYGP_W5SiMeG6hLXQCcYvdugle3ncrqspInNvBNIOJqN-Je5hyydJmpkx1Ir_0qlI4VfEn6Ga77Ch8XNFFsX6gv75srz6aKKhNfSN0LwYTQGBavPh9S45U04RJ5Lt9lO79MxGrLQcdIZkWoUFIip3LG-I9g5dzXbvzuBtALlaktq-pQFK9EoWwV6pOtGPcGJ7AD0CKhdB8NJsYCuEq5b0zpDOtrA3wqMXmt9QwAetEAAyzewf6n0k_cIP4Dy2G_xOW4auUVRi-LvY28UHlRGGHcHEEgZJeMUzYvx9MM7TQbAqxV-lXVpW0F-64VQEiIjSMeRi6kyeqQNVS2OSGzZghKZ-_IndvQloGbXK40kTSDuOieU5WecoKqwE-ZZguYTKJx_yaPL3KiSz3OslK3U-K_y0 "properties sample") + +## Version information + +C4-PlantUML offers version information like PlantUML with its `%version()` call. + +- `C4Version()`: Current C4-PlantUML version (e.g. `2.4.0beta1`). +- `C4VersionDetails()`: (Floating) version details with the current PlantUML and C4-PlantUML version. (It can be referenced via the alias `C4VersionDetailsArea`.) + +```plantuml +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +' existing plantuml version as text +%version() + +' new C4-Plantuml version as text +C4Version() + +' new C4-Plantuml version details (incl. PlantUML version) as table +C4VersionDetails() + +' version functions used in e.g. footer +footer drawn with PlantUML v. %version() and C4-PlantUML v. C4Version() +@enduml +``` + +![version sample](https://www.plantuml.com/plantuml/png/ZOynJyCm48Nt_8fZGBH3dQKJKwKmWiG2Axh4r-GavnBvpgG_dvXWjGjIfqJltllytaaDewKnL0yiNKYUO32RzRck8owkPnjIcvHYDucHcEkciPu3IiuSr7pWjcwEX_SiVRozrYEgKLobhsPD80j5DsT-zGHqOJMM7We0lYagJmAeO7Inwl5FsEspNsY1pFx73LLp_Bp7xycGWy8kJtHGkfRx_XU8RQ0hy6MBRDp2EIVfRFrHI4eUM81Sx-0yJKQnsZxW8ou22zjmyv23wp90yQLckTuEEP7ujVqF "version sample") + ## Snippets for Visual Studio Code Because the PlantUML support inside of Visual Studio Code is excellent with the [PlantUML extension](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml), you can also find VS Code snippets for C4-PlantUML at [.vscode/C4.code-snippets](.vscode/C4.code-snippets). @@ -96,17 +962,35 @@ It is possible to save them directly inside VS Code: [Creating your own snippets ![C4-PlantUML Snippets Video](images/vscode_c4plantuml_snippets.gif) -## Layout Options +## Live Templates for IntelliJ + +### Prerequisites -C4-PlantUML also comes with some layout options to make it easy and reuseable to create nice and useful diagrams: +[Graphviz download](https://graphviz.gitlab.io/download/) +[PlantUML Integration](https://plugins.jetbrains.com/plugin/7017-plantuml-integration) -* [LAYOUT_TOP_DOWN or LAYOUT_LEFT_RIGHT](LayoutOptions.md#layout_top_down-or-layout_left_right) -* [LAYOUT_WITH_LEGEND](LayoutOptions.md#layout_with_legend) -* [LAYOUT_AS_SKETCH](LayoutOptions.md#layout_as_sketch) +### Install + +1. Download [IntelliJ live template](intellij/c4_live_template.zip). +2. Select `File | Manage IDE Settings | Import Settings` from the IntelliJ IDEA menu. +3. Specify the path to the downloaded ZIP file: `c4_live_template.zip`. +4. In the Import Settings dialog, select the Live templates checkbox and click OK. +5. Restart IntelliJ. + +### Usage + +- Create new PlantUML file (.puml). +- Type `c4_` for displaying artifacts templates for C4-PlantUML +- Live template create correct C4 model artifact with stubbed arguments. + - E.g. alias, label, type, technology, description +- Replace stubbed arguments with desired values. + +![C4-PlantUML Snippets Video](images/intellij_c4plantum_live_template1.gif) +![C4-PlantUML Snippets Video](images/intellij_c4plantum_live_template2.gif) ## Advanced Samples -The following advanced samples are reproductions with C4-PlantUML from official [C4 model samples](https://c4model.com/#examples) created by [Simon Brown](http://simonbrown.je/). +The following advanced samples are reproductions with C4-PlantUML from official [C4 model samples](https://c4model.com/#examples) created by [Simon Brown](https://simonbrown.je/). The core diagram samples from [c4model.com](https://c4model.com/#coreDiagrams) are available [here](samples/C4CoreDiagrams.md). @@ -114,23 +998,31 @@ The core diagram samples from [c4model.com](https://c4model.com/#coreDiagrams) a Source: [C4_Container Diagram Sample - techtribesjs.puml](samples/C4_Container%20Diagram%20Sample%20-%20techtribesjs.puml) -![techtribesjs](http://www.plantuml.com/plantuml/png/pLLjRzis4FxkNt78lco04x-uYRCYDUeNk5sn3btihX_Q8g34iyIM8ZMIgkEk_U-ZICKJBGjRaHOT3KWGUVVSSm_lpe-r8SeK6U_ezqpaH94CA6v8mSqQRysKiqHaA0p4ze6gPhLL97_5g4bXsE_NzZDo-nor9Wcks4U4mNdzK65iY4WumbyTi6jbCL6QNOvBAOnt6BeJdH8gjqmai25SO-TpdI0n92BwVY1JfUIsGfXBBXNySE6MsocHchjr_C_7qhgwYcGXA56xoUIENSYXZN6_4U20nWEttEvCAeggRNzbTXo14fqYRMEPez9IU8uDFXNmqgs0HhWx8_7xH9NvLcVzomV3yQn9iJyUpIwMRLnicQ4IXDzy6r8Nb-MlIUfoMlxQIEcTDfXzRIw3mSNbRD7aCfgFb_F-lmhqRKZzx5QxGCt6-zxwX5J-9_A4TnPRSC84ggzDvy7eSh4u_nA9lYiR8tCm4Y9fZBICM2aHawAJCegWzoGw71CK51HBKjFvz0Y2PR_NrWW-TJvTLKDcKfs07nh-oBVw_kYkC08RNs8JP-0Bnk_xQsxu1ZO-M--xbzGUMUQUVsTV0N3owD5KIB7BPA7XfKPr0iT67T50xink2cjs094a2XDYaEun0jVzyJ5VcZ71j56aLFouVs1o1CDWd1h58jHdxpIyNZantfv0y3zdWUA1Bolt211UOGJJFESiTZ7UY5xlIhEF-70mdBn-HZwGBgnonKG2p_-OTs4jCsi8uxFRjrUzqcxIwxsnNZ3bN6urb1HrML4V66uXHvbpx8Ads7MNWi9q0J_Obzru9oFxH1EVmKR934oAm6LCE9IPTO6oX1dxHGI5NzQWBNDfLGexXcZOOdH3yjobLxMLo-uQkKlBGYogxJ33vxlLxx_2-Tbv8w6LZOIwaO9xGuPPX4gdBBSxXB_NXob5X2Qb-HDcdXOHACnbbUWHzWhv3OsQTxDazktlD6IzdAv7m-DyDH8Lfy04nLlKHu9jBAXlcePQlqahXXFAenr89KKY5pCOdWrRnF9tUBrQzQRbDDaWKWq_HbmcODCt-YTtZsQBQ8un4rB_oPiglCmjHrJDoeGnpANGacDPmGUCl9U6N4cNSRUA6rw98rHL9KW117IS8YquKh2gi6Cq2y_73i-0vdhBZ3aO8rvdxsRyUUZakRJw9CoaHHIwpAoSkjKZAayxuSY2qzF9NOV0GujXDTMeGq6VhjSlLlzeUDAfpQvxW0G3x1v0bODpzkrI-LuZeRxmt5rk5IjltSWGpzPrxzbYDk-wGeJHg7_HWbxhZqQ4mD2NQyFcUCzicSAo58sC9Iz9A0F3SNymhhEe2WjENxxuJrcwtltIL8CWpMHVtUaNMeRPjcj-_znjgAfJgc1FqEox69ZOI9MvOghD4aUbjO2Q0NnRrV13t4WM1l8YuYo6M5Bqeu8PgHX-QIpVaBLG-sbJQ2QISbYwHFO3ior07RygZTFNAQCKnTlhq_fKVuo25Xd_6m00 "techtribesjs") +![techtribesjs](https://www.plantuml.com/plantuml/png/ZLHDR-Cs4BthLqnzMGVGshj9jm5wMYTEazqw7uta1Zq9b3YMcLAaIb9nZAB_lKDAaQsuWEk39G_V3D-RUUElrZ7Zcah2o66nTaRaQ9_jAFf1g48s767jN6r_dauDsqnAuTPDtbWqXLOEbPiKkfhMaYbVugDrN8fyUldZnmSVMjukfXMp3Ws5ialAO4AXcTI4ZJv0eoYveYBWrWWhBQNU25M2910mnM5mB8obDmrqEKXTC2ctLADdUNX1j9ZzSRzCi_J-8PlVFzsDJw8FNMYMPCclL-db3SMwqDEtz2PRN5rVtSqf64KFQAnMsTMh6pEbrRRIZSsyy1X6ixS0B2amEkd0OrQM1alcaFV8Fl8UoYkXX7M6EQ5L3nz4trAYP6iTLjc5RXHdPZikFiVxqvhGk4x-Ze0-uQllmtY3USRgcj1FcCEihgKeGkaHXRwp5nP3KXlVyzlVBsD8TKN7S3vvzUSpFmyBdfhrZNyHk84QTIqnXlRc63eRn80lzA30iyxf6rqnWPNH5Ssk6nTumZ5mGHvYCiptMmeM2wUzo27pUJusA3EU4uz7b84p9SsPOpcpwEdTRfFV5l1bygLbcr0Pj0VymXCgh79IiHOrHPZyqxxdcpDUUlYrS3TD3WPhtQaue3PU2OasJ8Ik_OL-G3kVaVyvIyzEz-XOPAPOWr0SNz7-bqobxL-I4kuqoGa28UG6YLgLUdu1fvFJWSZGsCSacSuSlQmGkOLnBdK9HDlPaz1Sjq5qzf1-KtFcWjkMxTkR5-3SewoMw9qowW4MQgE3wBWhEknJkAtp0MW536onHjv8v4334fx3Fxs9_KAvZN0jXRHz8yJUSVidGwVjBSD3BzFIsGKzWxg8_76meZlZqmvPh-KcJHyImXDwkAV7uSDTFPeISlhZFHiptetEDsnZX6-jqpwLHZ_zFh-W5QorSN1szkadAZIeitFTeDPxMB3J4B5df8qmwAVfTA5bTzdf-QVFvntjRDdRunXnGh4Zx0Vb1loVUl47k23WIBl-hvnTrPtZhj7rXWQXLjfKOQoxdUdRrazqK6hdJe8EA-IwSL0tkHG559fZkn_2QIFmIDNErg5elqoD5QhqYnx8zSi-BEMrBjWsU-p_CNUjfgElg7XJoNy1 "techtribesjs") ### Message Bus and Microservices Source: [C4_Container Diagram Sample - message bus.puml](samples/C4_Container%20Diagram%20Sample%20-%20message%20bus.puml) -![messagebus](http://www.plantuml.com/plantuml/png/pPPjRzis4CVV-rCStBVnx3mqoOh4gEqaQukc3v67laY3W18l4X6P94ZAgRVqku-K55aofMx6MY0qOC2yq_z-l3iVzLeReaosI7lwdd5955a0nJkIfMQEtymaPJ5V83SGsIzKDQy7HUGNHaq2UwDHRNz1lbsYrYJ6WFs5iFkoRbGO6SBZ5E7l7jWLM4qKPYNnGd1JFB2NMtH2g7XWF8OxachiVQy34aD2el-Vo4GfyL0gp4Gg5Bmup5U-uvJytRh-zxPZdPo48kEKgDLu_4JNPEWY7da1DZ0EyfNlJeMYgBhs0xDA4IZH2T8kIebA2rumUZoby4M-AWn_TqgY-rYvyvQsqV71tj7KHnmTxKyFBxfOR9kXuYIz_JLGXyVkuqCTJzod2qgljC75psRPtJqydfxvBFkpeulPw5yJz6kWVizNTuByFzvpo4-9ydpIqwnPPCK9uwX-Dix1_l7PsSjjKlGCQBQuBvpH20b6G2YC4VOOpEML2TvB64NG5NalnHWv1SNYnFGUJw6nxE-vTOB7tkD9EPd6fGMAILEOYlbGcPwwgU5JzEKuToYwhDWlUiDxjk5JfAXujgg3DLdoWh-tlXJxfwUpJDj3e_hAltAOG5J-x4DjQ1DTxRS_36_vdL0Buh86rq5ESzE7nktaH7RBRcWNcKYPiiY9M9RXy4JR-hpQtHjVloDBeYF5fDc12O-pbAYRaw4pZuV30ZnDnSEQKhjoBWWdCO99a2cGIjon5FlGR4uBHQJy0LE0QiaYz7bs893AtR9J8Sm6pJn1a89n0-8EI1IXrc3pK-41MwVB9whSRdKHtCSh6nYccMwINP4mPERoyoQG8bnBeKoE4MQQSSU4I-H6jn0i2lrRw-a7lqAdP8_UdfohB5njX9yf90OrS7Veb6ca-Qp8OLIb9ZCbXSOsdigfEoMJZ3BJJZHxCVpjm_by0-gJ4aj6BPLGCU5CvzKOFDWj84whU8EAMCeCQuCgl1f0vG1iTj1PkTba-gX8bBhNhcW3Ap12eTwwLMZe4LHrwa2uN0MVtxT79sMfh8N24fMsqVDUJjDrzrGb91GI4MrRIHfs5j51D5dFbyXBGpjnBKr0Gf6Pihd19CH0GfPelwH4ZhIxb4xAtY5LxWS3QvKINZcsqpyrwYRLc_dyKx3cwVUSy-3gxHzlveEnzpT-af6Kc8uAWyjjt0n2z8f7E_0k-FXXw0NqOWpUdr_C6zW1SgghR8Yc-1SC0n7Te_cnQ7ca-bneg5TdoVB3hQErYTLJGyDIfoXZqLDiS_oVJMTrlZg5LVEdmtzayuIADjXIn8_UPEeuOh_NY5QFx_oQpvJX66yDTvqmIf7VN0qsPj9hovujqdy0 "messagebus") +![messagebus](https://www.plantuml.com/plantuml/png/ZLLDR-Cs4BtxLqpT0dK09yOMFHK8iFumkhjm4gzbOoy5Z94qbeYbI8Aad7MB_lSE9LjX4WLD3Z4vd7dlpGUfZywZzNKb1py9bSaw9oYzD-wFoSJYuqqXV5cdjIERQUL9-PjCLnCZKOMOQ-TpATB9_FVhTJ3jxbQJ2fqdowRzd2DGAB8t9k3_2hNYu8f1m9S41osbVXIg0CbEW2g7PyV2EbvfO7AGEaCfJupHgNnDC9Zc-L9IGDXYCHfM8hCw8NiK6Gt7y8ihqT3jKXIbJqHEUHBseoi-IOkvbjhU3kVQgWEh8ZkJTHDqO8xpuMCfV6EJL93Aj_J3txOau5gMlnG5T701VdZrKf3psc8HQTdeMh7dJF_eqI8ReTzFRobX_47owU7RVhtS90_t-uVTTlNvVZbYyvgiqsgKrSnOaHt3l5iDft0nDm0dxbQrdmKXQ4-Zx0ExNBpXipfeMw4NMWslu9y1y5zNz14Q4pjFZP4YQvtP_WMFw38hZ1_3L1MrH1lCqz1qrsbmeSCLAYmeT5rOC5OVXEJiNh1T8lRdMiVKNPDRsZ4aneR1ccdjWt5R4XWjb0Tz0CmoSWuuiqu5Y2XHBhN7mi4jn1FqMb35A2nxdzQEAUxQ7Sng5nWtcAR2ttrjs2qgPxJr3IUx2nK4q96KTwzWBGLNLXybkhdOuamtTNeAltDBwCc12Xb8uIY773qsPBOBDBKrsf5xTtfOvy976gPX7_FFVvxSt2-tORcs-YXorg1jWKguff3NZso21YO8E60c92_VBs6HFZKzJ-D-Bz1ZYgwHyM0namGVVil2Bl7QallVnhOtiOSnAZzJnfMFEUzEoTTLH8UNulzDEHp9EgPhHatAhjzFJS4SIftrzAPNONzR-3HgIjW5EKiUgMxRgOjg09Zgsfz73to97aey4lypXXJb_Gh-7Gms9FUBw45fx_wk5JtyjDsk4tOykpM7FVTrPxW6RtG7GfcA08RkfB8nVE4tRV8CUDVp1hGw4bAvwxBI0UKRfOdElfFdwBU2enlSWNJQwaPi1DhWzA34CzhLl6csQ1_2nMn-Jk7vcz5tqzyd8ePfRzZx8IvIUjWxKsygBVKBjdWSkuYMguqPhF2qt_ImFTTz-PQjbdykxnVy3Vl8MTIL_0y0 "messagebus") + +### (C4 styled) Sequence diagram + +TODO: better sample is missing ... + +Source: [C4_Sequence Diagram Sample - complex.puml](samples/C4_Sequence%20Diagram%20Sample%20-%20complex.puml) + +![sequence](https://www.plantuml.com/plantuml/png/hP1FQzn03CNlyocKd19ex2saby12jabe2saQTbjw3BDZkHQHDQwbsK8_VMMd8OSD_GCPi8sUzNvlf7ErE5hfEHnOXpt2nUbT4J9ie1rp3vtPe6TrFSOVrJUohcoBufYo68fLAVVrm54cm8bQmxIjBqvFRYVfoyVhkezgEDOpMSC1IUBIuCj0_Q8R_5vG4bR3D42unL6p7AsO4hw2m_bxUFmelyrR5_tjKeZ9Q1SDmUiGriYFBgydQx4EnIX5eoomddBKPYCRQ4a9LTl2aA9Y03yJOlREd7t4oYs3OUCCP4NGt2FSapIGMsWZSHaVG9pp0AyNYmKOJKk3tsVlZfSt6rYPnNJlJF23qeJf2IEsa7SumbC_d049sJEZTiYSdV3aSjrvdpjII55WYv351KN_6HcO17KA0dU4i5p21oTJPFhvCEfo-JyR_TlYrgX35aLlzIml1pJwGuvajuyG_palxZdsSgkgWZVGanH31OxcxQuz4vyYiyAE8WnTbjcyUV_fwztrrRkhcykZut2EqfIUVm40 "sequence") ## Background -[PlantUML](http://en.plantuml.com/) is an open source project that allows you to create UML diagrams. +[PlantUML](https://plantuml.com/) is an open source project that allows you to create UML diagrams. Diagrams are defined using a simple and intuitive language. Images can be generated in PNG, in SVG or in LaTeX format. PlantUML was created to allow the drawing of UML diagrams, using a simple and human readable text description. Because it does not prevent you from drawing inconsistent diagrams, it is a drawing tool and not a modeling tool. -It is the most used text-based diagram drawing tool with [extensive support into wikis and forums, text editors and IDEs, use by different programming languages and documentation generators](http://en.plantuml.com/running). +It is the most used text-based diagram drawing tool with [extensive support into wikis and forums, text editors and IDEs, use by different programming languages and documentation generators](https://plantuml.com/running). The [C4 model](https://c4model.com/) for software architecture is an "abstraction-first" approach to diagramming, based upon abstractions that reflect how software architects and developers think about and build software. The small set of abstractions and diagram types makes the C4 model easy to learn and use. @@ -140,11 +1032,11 @@ The C4 model was created as a way to help software development teams describe an More information can be found here: -* [The C4 model for software architecture](https://c4model.com/) -* [REAL WORLD PlantUML - Sample Gallery](https://real-world-plantuml.com/) -* [Visualising and documenting software architecture cheat sheets](http://www.codingthearchitecture.com/2017/04/27/visualising_and_documenting_software_architecture_cheat_sheets.html) -* [PlantUML and Structurizr - Create models not diagrams](http://www.codingthearchitecture.com/2016/12/08/plantuml_and_structurizr.html) +- [The C4 model for software architecture](https://c4model.com/) +- [REAL WORLD PlantUML - Sample Gallery](https://real-world-plantuml.com/) +- [Visualising and documenting software architecture cheat sheets](https://www.codingthearchitecture.com/2017/04/27/visualising_and_documenting_software_architecture_cheat_sheets.html) +- [PlantUML and Structurizr - Create models not diagrams](https://www.codingthearchitecture.com/2016/12/08/plantuml_and_structurizr.html) ## License -This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details \ No newline at end of file +This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details diff --git a/Themes.md b/Themes.md new file mode 100644 index 00000000..d7ed20b5 --- /dev/null +++ b/Themes.md @@ -0,0 +1,637 @@ +# Themes - different styles and languages + +![Theme style sample](https://www.plantuml.com/plantuml/png/hLRHRzks4txtNt5r-qCTG8dnGzkN0G7gsDwQmauyosttCC0uYMU9A4Lg91N76FQ_xqXRLknqw83r9J6FlE_x-F5uudldqVgcKhqNlgIAOFnstMZfIS36cWfAxsltqt1eSNjLI5ysMUF8vaPxqlugDzMmLgW3mANpGibiE7vxkGYXJ_FPi4BdoGuZikkza3fNZQ0V0yf2nvo1KfEzgiCEUkc7-o_hnNIPtj-jxp-jPhTtqy55xpMii73WchesreCsu6hCoO7KmCf0OqKmoD2H0BCFDLgGLL9BNK0W8-DtDRa4jgNCIn16l_OjO8k6UbSPInTNm8otcsFO4bZweo764IsbeeAqI0x_mTEZXoqRiK-24Xru0nc1e8tK97eZ8QQAAjAUzpBePvX_vSJZ_li9lDhmO6oKiTUlfhFfV7gtMlzypt_6zxFx9SzdnNws__BDctUJqRkGuqgiwNegYzAdKf18mtXmmJDxPIiMTjsoGTxI_Quff80BEVsBe6v9AYf3jzDvWEOzjN96ooMVIwj3CS8_JgH-f-XwWguaCPEQjPoW1_3XZw4mtdSKFI-z8ZZw2K9YOR62ZR5mgprPJHvkK7yD5P7kdAUgrrkGTKOFyiPvKv5DO7pyrHz16mQpYMUUSNQoF-Kw9gAACS0yDutshiywzj3h6mu8jBj1_d_6EXVGlu0_Um3GwHriALjZNVFYBvJ1gAwLpD5Be_iS-eWFc41Qso1-_daSOXDIye5bH6dEyzeS3XSGK8iOFl9cxSON8nPvokngPBYKfnLTBh2WmDwofhcLjKzWf8j6eGtXXJKFKf03LEhRB9j6vq4wAkbtu0qx6Orqy20nf4WBl5_8hDawiiyKLIQJYWvspEEWrJH-cS1lMA6L-bGBA5d5fkUQp947i_dNsjmpSNi18EX1vdGkRv8D17eCxIOSm-5dK9F-EeEJiJUM78JM29OAwRoDHmfISrbMyNS2PRmhW8ql8RSaI7k9oYMXhCWvKARW0VdywfbHXtlDJibGiOlRRnVEnF0os-MTEFSTXu8f31nlAnRk-bddOb5_7Sj--kW7LA5KQnS3J3IzdFFuSEK2yweaa94K5SnbReqp6m_Jnxn4NH3iCnds2UP1MuVAc7fZiQApEztP7igphOAS0-t-dfeFc9d6ToMG7Azo0jwYTXYTwEplBKazQHVTfVtao0Nk3wlL8kM5f-jSZTzTqnPz1xUdMz-5LfsPhaL4kAu1791YyBGWMiBORnFuo5_LOIJlJZDE7H0w1VyDQ7t3oPtixhASWYu9XOjlbDYljbPwSk1D83hmJ6x637d4VEBMMP6b3Ek0BaCqOdH2JklnJCDfNkEuFZhwTBvQx86wpPoadrLbvrFtbUDkDP-TUzLDC_p-pJER_ZAzc_1RPsEC9ml2ubRllpNjimaUhk1_uS2bqOEBw5buL7MpFFpSJlVUiygcKdy3 "Theme style sample") + +![Theme language sample](https://www.plantuml.com/plantuml/png/hP5FQzH06CRlyoccww5Ps2PKUlBKDLti8Tq6aogUmknct8qaap2Pi1GHp8n_11L5QuitbMAhGbKMyRAs7-QrtVqOJjBQ7hoQKtZUv_szpvCivu9mKIGncXD3cb1iBpc43GeoeC4TaX56SuflypJ1Go6o_8fbSJ8o1v4O5hqYfxoVCa6PCFjfOcKnOHLg8HTX7FKiUsd1hQIDDSTAI2uej-eREPgBM3ykGlfVe5eARBr18aQvcLLTaDE-jRxX1qwxk-BPRRTZD15oASzJPf0mYLWBDwO7xwSl7ytkFsmqaRUfGKbmDIrOIFYcqLziuNcGFq2DGUs0-ZBVn7SHri_v8MD4Um79Caq2-H7a7gXja1zg-sUGtq5DGFu4fVLnGvliIotSzbops_4rX5DysLp4QpViQZRRVNpovXkK1_ue4heHo2EGkw3UWVfKlun1lZhvkZMRA2ZVWdmAvMiezw5y1kKUbC-XFDIwxd7lh8aXJa6QVORKGtITnd_RNuJ__UjekhL_YgsohFg-wsbtPJvtNU10FQWJJK0zqQ6ENsmV7-xykusyrVMRWTEvrkckw6-_J5ce_yiV "Theme language sample") + +- [📄 C4-PlantUML](README.md#c4-plantuml) +- [📄 Layout Options](LayoutOptions.md#layout-options) +- [📄 Themes (different styles and languages)](#themes) + - [Use theme](#use-theme) + - [List of available C4 style themes](#list-of-available-c4-themes) + - [C4_blue](#c4_blue) + - [C4_brown](#c4_brown) + - [C4_green](#c4_green) + - [C4_sandstone](#c4_sandstone) + - [C4_superhero](#c4_superhero) + - [C4_united](#c4_united) + - [C4_violet](#c4_violet) + - [Matt Weagle themes](#matt-weagle-themes) + - [Write custom themes](#write-custom-themes) + - [Following variables could be set in a theme, additional to the skinparams and styles](#following-variables-could-be-set-in-a-theme-additional-to-the-skinparams-and-styles) + - [(C4 styled) Sequence diagram and themes](#c4-styled-sequence-diagram-and-themes) + - [List of available C4 language themes](#list-of-available-c4-language-themes) + - [C4Language_english](#c4language_english) + - [C4Language_chinese](#c4language_chinese) + - [C4Language_danish](#c4language_danish) + - [C4Language_dutch](#c4language_dutch) + - [C4Language_german](#c4language_german) + - [C4Language_italian](#c4language_italian) + - [C4Language_japanese](#c4language_japanese) + - [C4Language_korean](#c4language_korean) + - [C4Language_portuguese](#c4language_portuguese) + - [C4Language_russian](#c4language_russian) + - [C4Language_spanish](#c4language_spanish) + - [C4Language_ukrainian](#c4language_ukrainian) +- samples + - [📄 C4 Model Diagrams](samples/C4CoreDiagrams.md#c4-model-diagrams) + +## Use theme + +Similar to PlantUML themes supports C4-PlantUML `C4_...` specific themes too (sometimes based on existing PlantUML themes). + +Additional to the standard themes with skinparam and style definitions requires C4-PlantUML corresponding variable definitions. +Therefore we started with the convention that all C4-PlantUML compatible themes start with `C4_...` in the name +(e.g. theme [`C4_united`](https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes/puml-theme-C4_united.puml) +bases on the [`united`](https://raw.githubusercontent.com/plantuml/plantuml/master/themes/puml-theme-united.puml) theme +and contains all additional required C4-PlantUML settings that it can be directly used in all C4-PlantUML diagrams). + +E.g. in order to invoke theme `C4_united` from a remote repository, you have to use the following directive: + +```plantuml +!theme C4_united from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes +``` + +In order to invoke a local theme `C4_foo`, you have to use the following directive: + +```plantuml +!theme C4_foo from /path/to/themes/folder +``` + +Starting with PlantUML v1.2023.8 the C4 themes can be invoked via C4-Stdlib or calculated paths too: + +```plantuml +' theme from C4-Stdlib +!theme C4_united from + +' another alternative: theme with calculated from +!RELATIVE_INCLUDE = "https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master" +!theme C4_united from %get_variable_value("RELATIVE_INCLUDE")/themes +``` + +Following simple sample uses the C4_united theme from the official remote repository path. + +```plantuml +@startuml + +!theme C4_united from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes + +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +Person(admin, "Administrator") +System_Boundary(c1, "Sample System") { + Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") +} +System(twitter, "Twitter") + +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") + +SHOW_FLOATING_LEGEND() +@enduml +``` + +![Theme sample](https://www.plantuml.com/plantuml/png/hL5Dxz8m6B_lKzHv6ScVBHXEdfWJmOINnGqvBjtsA4twqhHFin3ZT_Sf8FW1tALPV-_foYDt69HCadTu0GMiMdP12uIH_N16iGkYzH-Bml4f_odm4lhWmGr68sZC1wCAAxcE3dEFenHzKItdTRmwxNU5uXx15JTdJn523pACy7zSgMb52YuqkDpUDjJWlD4P7vNGRomjuoayEex6fREakP9GTPzCq2DtrsnO4AdXoafWTooTiLy9e-_fd4tGTznQOfwXPwMrKWmSXT4fNLNltrZPrFbXtPB40VkGBzZ-UnMnKaepUHQNUOQ6qIpBYQA2H14ZsqaWWcCe54ZAybJnzwDaXdUGV1uq0fDl8F-EUzKwUV0nRzksTKEiI7gYBviDeATVY4TysdybIRCzdhilksFPVZrikjrwipvypcR92lGObFm3 "Theme sample") + +## List of available C4 style themes + +### C4_blue + +C4_blue theme is the original theme and need no activation. + +Theme [C4_blue](https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes/puml-theme-C4_blue.puml) can be activated with + +```plantuml +!theme C4_blue from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes +``` + +![](https://www.plantuml.com/plantuml/png/hO-noeD048Hxdq8VGBUn-Yj_99s150afmwaR5VRMutQEaBVFcMT8DSF0zy5q1XUHl1GLLlPSzkrZbCJbC-w-N85WVqJHlPfbmvh6P1odNS6APjez1N5wuBLXbcsalgqlntGx3-ITWIDzlLPKcqwIPlwDD6JYJLSs_8kSX3qhx9vj0o-iSnEEIrrkEJy0) + +### C4_brown + +Theme [C4_brown](https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes/puml-theme-C4_brown.puml) can be activated with + +```plantuml +!theme C4_brown from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes +``` + +![](https://www.plantuml.com/plantuml/png/hOyn2eD044LxJw47q6ciKXaadO4K2Id3gXCLPcUNcLaajy-QCwJwdm_lmU_Kd5ZoL5IseiUoRr-ZX9tBjmHVhcPHJm3YzcRPR4rZKfGfi25RCmKFaHmVVAqsqpP2tzQtOtfS1_1E3GL-OYsgZITAC_v76ZFnWJkgdOakX3wp-ios0HVakOd7fowtd5y0) + + +### C4_green + +Theme [C4_green](https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes/puml-theme-C4_green.puml) can be activated with + +```plantuml +!theme C4_green from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes +``` + +![](https://www.plantuml.com/plantuml/png/hO-noeD048Hxdq8VGBUn-Yj_99s150afmwaJ5VREOtUFaBVFcMT8DSF0zy5qQauiUIugM-5HzkrZ4I2KJzbzkPf5_ICIzsgMpTOq9eLCUp04QwRTKsGN3hvMctaRgM_hop7TpWDvfmQXhrYBQWiJfnc_aSPClEaAjN_c4yDdLk_PDc11c9juVEfoo_a1) + +### C4_sandstone + +Theme [C4_sandstone](https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes/puml-theme-C4_sandstone.puml) can be activated with + +```plantuml +!theme C4_sandstone from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes +``` + +![](https://www.plantuml.com/plantuml/png/hS-noeD03C3ntQVG1z0iJj_aXtIpqA6bOpczL8KaTrnobBvzppv3fuJ0_mSPr5oop5GrjY5ZFVOFTUBLWc3zJ87hpIpg7q1ohsxTRSjpLanB44EnRWaCaPmSHglcQPzXxDlBSRgT9s2dXWc-k5RDBWjbZxz1OodUS4MrVw8J8PTMxqMRS4NnNJp-6ifMvWS0) + +### C4_superhero + +Theme [C4_superhero](https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes/puml-theme-C4_superhero.puml) can be activated with + +```plantuml +!theme C4_superhero from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes +``` + +![](https://www.plantuml.com/plantuml/png/hS-noeD03C3ntQVG1z0iJj_aXtIpqA6bOparzOJaxaXobBvzppv3fuJ0_mSPr9nOPgeQyyXOZ_r3SqBnAB5-IkJQcoNz0n3twhRTV9wpeYmn60RhbiYGo8N3QDLMscSO-_Pod6xd2TYfeS0NrwhPmq9vnT-WgHHlkABQFz69a4khzw9Dk65OktJyDPIjp0y0) + +### C4_united + +Theme [C4_united](https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes/puml-theme-C4_united.puml) can be activated with + +```plantuml +!theme C4_united from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes +``` + +![](https://www.plantuml.com/plantuml/png/hSyngiCm3CRnFQT83f1eoVIcF4At53gqT2nEh2O6sJ7MPqflNwTdw2GX-Fz0Wy8aP2zLWuqzrsF_oC61RVrCkwyt8EeVKJAlRdNOyfoLqx87S42tx9wYc700hSAAcsdisyjnkfqdyaR1YRwoLeqBYsJBlq5ZATvqPSM_o4dObrRlHPjuvM2xU3mrbAtC3m00) + +### C4_violet + +Theme [C4_violet](https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes/puml-theme-C4_violet.puml) can be activated with + +```plantuml +!theme C4_violet from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes +``` + +![](https://www.plantuml.com/plantuml/png/hS_12i8m383X-vvYUu0jbvqyJOQt2HuKZz9jSIiaRMbInRUtzHay9GJ-3pA8cgY9gMfqHyPwx1ylwmcrVaRFzQuQv00GpRlRhEvfJe9nyKxHQRTuXa365Q0LNSdECFRjfPnkvmdOY6A4donLOzr2QSN_e24N7xYYw97eHCYvbNlM9jpGhLqeJmrvo_CB) + +## Matt Weagle themes + +Matt Weagle published a set of impressive themes based on ColorBrewer and Seaborn palettes (thank you Matt). + +https://github.com/mweagle/C4-PlantUML-Themes contains an overview of all his themes. + +They can be simply invoked like the `cb_seq_YlOrBr_9` theme + +```plantuml +@startuml +!theme cb_seq_YlOrBr_9 from https://raw.githubusercontent.com/mweagle/C4-PlantUML-Themes/main/palettes + +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +Person(admin, "Administrator") +System_Boundary(c1, "Sample System") { + Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") +} +System(twitter, "Twitter") + +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") + +SHOW_FLOATING_LEGEND() +@enduml +``` + +![Matt theme sample - cb_div_BrBG_11](https://www.plantuml.com/plantuml/png/ZL5DRzD04BtlhzY6YoCrjegumAck2IbIcbZOfUAqMjj3izBi1pjZMHNYlxEhGDjZVHbvtflteRqcrf5dY-A2Js11ZeCY-AL-u37UHFLH_epUoXDpe4zL5VLIFXe-pSDC44Vl61oNexULNK0_8bJDXqsBsl7ztNxJPq6gh3Qk2Xg16KY82-D6d2TuWsX0xNAs3V64PdWjNbbD336jLECT9mk8PSWzH0kHl2lqP8sxbAiwJqCSDVkuMelkAHrQTUDdD-duL8nNYTHf6n3a6LkjvMyXq_UiN2mmA1r2OZx08EiGq8oQZNUhj6hUNSgwQyl3jayd4UJxyahUVMyoLYFwXMHkHfAz7BqDEb7iZ6ooPRyOPeYIZGLCNfGY_laNik0pc7JEj9nVV0FyN-ubrZq1PR_Rlc-xnCgaP_H5PWTCwHVoo2_x-aHqjyS7zML_hFklXvtQRtVRm-TYBQx1JRF5lm00 "Matt theme sample - cb_div_BrBG_11") + +## Write custom themes + +You can create your own theme on your local file system. You can duplicate any existing theme to create your own one. + +By default, a theme file is named `puml-theme-C4_foo.puml` where `C4_foo` is the name of the theme. + +In contrast to the normal themes (with skinparams and/or styles) the corresponding color,... variables have to overwritten too (e.g. that the legend is updated... details see below). + +If you have any interesting theme, you can also propose a pull request so that we integrate this theme into the C4-PlantUML standard library. + +### Following variables could be set in a theme, additional to the skinparams and styles + +- stereotype and technology font size + +```plantuml +!$STEREOTYPE_FONT_SIZE ?= 12 +!$TECHN_FONT_SIZE ?= 12 +``` + +- default text color of all elements + +```plantuml +!$ELEMENT_FONT_COLOR ?= "#FFFFFF" +``` + +- arrow related colors and text size + +```plantuml +!$ARROW_COLOR ?= "#666666" +!$ARROW_FONT_COLOR ?= $ARROW_COLOR +!$ARROW_FONT_SIZE ?= 12 +``` + +- (default) boundary related colors and style + +```plantuml +!$BOUNDARY_COLOR ?= "#444444" +!$BOUNDARY_BG_COLOR ?= "transparent" +!$BOUNDARY_BORDER_STYLE ?= "dashed" +``` + +- person related colors + +```plantuml +!$PERSON_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$PERSON_BG_COLOR ?= "#08427B" +!$PERSON_BORDER_COLOR ?= "#073B6F" +``` + +- external person related colors + +```plantuml +!$EXTERNAL_PERSON_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$EXTERNAL_PERSON_BG_COLOR ?= "#686868" +!$EXTERNAL_PERSON_BORDER_COLOR ?= "#8A8A8A" +``` + +- system related colors + +```plantuml +!$SYSTEM_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$SYSTEM_BG_COLOR ?= "#1168BD" +!$SYSTEM_BORDER_COLOR ?= "#3C7FC0" +``` + +- external system related colors + +```plantuml +!$EXTERNAL_SYSTEM_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$EXTERNAL_SYSTEM_BG_COLOR ?= "#999999" +!$EXTERNAL_SYSTEM_BORDER_COLOR ?= "#8A8A8A" +``` + +- system boundary related colors and style + +```plantuml +!$SYSTEM_BOUNDARY_COLOR ?= $BOUNDARY_COLOR +!$SYSTEM_BOUNDARY_BG_COLOR ?= $BOUNDARY_BG_COLOR +!$SYSTEM_BOUNDARY_BORDER_STYLE ?= $BOUNDARY_BORDER_STYLE +``` + +- enterprise boundary related colors and style + +```plantuml +!$ENTERPRISE_BOUNDARY_COLOR ?= $BOUNDARY_COLOR +!$ENTERPRISE_BOUNDARY_BG_COLOR ?= $BOUNDARY_BG_COLOR +!$ENTERPRISE_BOUNDARY_BORDER_STYLE ?= $BOUNDARY_BORDER_STYLE +``` + +- container related colors + +```plantuml +!$CONTAINER_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$CONTAINER_BG_COLOR ?= "#438DD5" +!$CONTAINER_BORDER_COLOR ?= "#3C7FC0" +``` + +- external container related colors + +```plantuml +!$EXTERNAL_CONTAINER_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$EXTERNAL_CONTAINER_BG_COLOR ?= "#B3B3B3" +!$EXTERNAL_CONTAINER_BORDER_COLOR ?= "#A6A6A6" +``` + +- container boundary related colors and style + +```plantuml +!$CONTAINER_BOUNDARY_COLOR ?= $BOUNDARY_COLOR +!$CONTAINER_BOUNDARY_BG_COLOR ?= $BOUNDARY_BG_COLOR +!$CONTAINER_BOUNDARY_BORDER_STYLE ?= $BOUNDARY_BORDER_STYLE +``` + +- component related colors + +```plantuml +!$COMPONENT_FONT_COLOR ?= "#000000" +!$COMPONENT_BG_COLOR ?= "#85BBF0" +!$COMPONENT_BORDER_COLOR ?= "#78A8D8" +``` + +- external component related colors + +```plantuml +!$EXTERNAL_COMPONENT_FONT_COLOR ?= $COMPONENT_FONT_COLOR +!$EXTERNAL_COMPONENT_BG_COLOR ?= "#CCCCCC" +!$EXTERNAL_COMPONENT_BORDER_COLOR ?= "#BFBFBF" +``` + +- node related colors + +```plantuml +!$NODE_FONT_COLOR ?= "#000000" +!$NODE_BG_COLOR ?= "#FFFFFF" +!$NODE_BORDER_COLOR ?= "#A2A2A2" +``` + +- legend colors and sizes + +```plantuml +!$LEGEND_TITLE_COLOR ?= "#000000" +!$LEGEND_FONT_COLOR ?= "#FFFFFF" +!$LEGEND_BG_COLOR ?= "transparent" +!$LEGEND_BORDER_COLOR ?= "transparent" +!$LEGEND_DARK_COLOR ?= "#66622E" +!$LEGEND_LIGHT_COLOR ?= "#khaki" + +!$LEGEND_DETAILS_SMALL_SIZE ?= 10 +!$LEGEND_DETAILS_NORMAL_SIZE ?= 14 +``` + +- legend related texts + +```plantuml +!$LEGEND_SHADOW_TEXT ?= "shadow" +!$LEGEND_NO_SHADOW_TEXT ?= "no shadow" +!$LEGEND_NO_FONT_BG_TEXT ?= "last text and back color" +!$LEGEND_NO_FONT_TEXT ?= "last text color" +!$LEGEND_NO_BG_TEXT ?= "last back color" +!$LEGEND_NO_LINE_TEXT ?= "last line color" +!$LEGEND_ROUNDED_BOX ?= "rounded box" +!$LEGEND_EIGHT_SIDED ?= "eight sided" +!$LEGEND_DOTTED_LINE ?= "dotted" +!$LEGEND_DASHED_LINE ?= "dashed" +!$LEGEND_BOLD_LINE ?= "bold" +!$LEGEND_BOUNDARY ?= "boundary" +!$LEGEND_DASHED_BOUNDARY ?= "dashed" +' transparent is ignored, produces smaller legends +' !$LEGEND_DASHED_TRANSPARENT_BOUNDARY ?= "dashed, transparent" +!$LEGEND_DASHED_TRANSPARENT_BOUNDARY ?= "dashed" +``` + +- sketch related colors, font and texts + +```plantuml +!$SKETCH_BG_COLOR ?= "#EEEBDC" +!$SKETCH_FONT_COLOR ?= "" +!$SKETCH_WARNING_COLOR ?= "red" + +!$SKETCH_FONT_NAME ?= "Comic Sans MS" + +!$SKETCH_FOOTER_WARNING ?= "Warning:" +!$SKETCH_FOOTER_TEXT ?= "Created for discussion, needs to be validated" +``` + +- size of rectangle shape corner markers + +```plantuml +!$ROUNDED_BOX_SIZE ?= 25 +!$EIGHT_SIDED_SIZE ?= 18 +``` + +### (C4 styled) Sequence diagram and themes + +All sequence diagram specific renderings (like sequence-lifeline-color...) can be directly defined via skinparams and styles. +The advantage is that no separate variable definitions are required anymore. +(But the disadvantage is that all themes have to define there own skinparams and styles.) + +A theme could contain e.g. following definitions, skinparams and styles + +```plantuml +' $BOUNDARY_BG_COLOR... have to be defined in theme itself that it can be used in styles,... +' (no default values which are defined in C4.puml) +' If skinparams and styles are defined with concrete values no variables are required +!$BOUNDARY_BG_COLOR ?= "transparent" +!$BOUNDARY_COLOR ?= "#444444" +!$ARROW_COLOR ?= "#666666" + +' replace transparent with concrete background that it can be used as font color too +!if ($BOUNDARY_BG_COLOR == "transparent") + !$SEQUENCE_BG_COLOR = white +!else + !$SEQUENCE_BG_COLOR = $BOUNDARY_BG_COLOR +!endif + +' "C4 styled" default is no foot boxes +hide footbox +' "C4 styled" default is that lifeline is arrow color +skinparam SequenceLifelineBorderColor $ARROW_COLOR + +skinparam SequenceGroupBodyBackgroundColor $SEQUENCE_BG_COLOR +skinparam SequenceGroupFontColor $BOUNDARY_COLOR +skinparam SequenceGroupBackgroundColor $BOUNDARY_COLOR +skinparam SequenceGroupHeaderFontColor $SEQUENCE_BG_COLOR +skinparam SequenceGroupBorderColor $BOUNDARY_COLOR + +skinparam SequenceReferenceBackgroundColor $SEQUENCE_BG_COLOR +skinparam SequenceReferenceFontColor $BOUNDARY_COLOR +skinparam SequenceReferenceHeaderBackgroundColor $BOUNDARY_COLOR +' VIA STYLE +' skinparam SequenceReferenceHeaderFontColor $SEQUENCE_BG_COLOR + +skinparam SequenceReferenceBorderColor $BOUNDARY_COLOR + +skinparam SequenceDividerBackgroundColor $SEQUENCE_BG_COLOR +skinparam SequenceDividerFontColor $BOUNDARY_COLOR +skinparam SequenceDividerBorderColor $BOUNDARY_COLOR + +' VIA STYLE +' skinparam SequenceDelayFontColor green + +``` + +Following sample could be used as starting point for custom themes with sequence diagram support: + +[![](https://www.plantuml.com/plantuml/svg/hLPjRzis4FxENt7sKYG16Zi3idqeagv-SLu0DyaSfqC_6RHqieZIf4UUd6P3__kEr2mxbPFKG0aabgXxdhjxxgZJ1q_IKJ7NGZJsxZsESvmZd46pTpAPEKJJ568V4ckMw0WKmOEY76IQAbBMICsFvdDfKj3A84WtA-Pe28xwey6mCxxwD9XSNVU6z_t1MRFLRhMQG1OAZw1j8hL-50sLmPkbT4fEDKxmg_Ba3vhVWvk70c0V6XIZuz3EbVCqHa-GEJk7DpEaISMobBh0RIJjYFS2LaphZ2DDY71bqq3jyLdBd6ZXtxNRJZwqPgn8CUMa7Cj4QAZ5chGNMfgWwv6dLAjfktToT1ksxZyEstFf2TtQaqbL5cG-hIsuxOp6S7CEuyl1nm44extkpVrrlpFwFEbUJ7etmvjHgzM2N2unQ3j5I35J1bDG1ihO5NdK6T_8MC54cc1M-DB6qwD6_vP9cFp0s82NXIQ8Cdfuo5MIWtIRn5o2reAJEmJ6N6NWloYpa4xEFOHUA2cVO6BRi3w9Gy8LDJihYxQoTlXteHoRYqOzJVY3svASD9vTeQ7cfj7QufUJkCBJpcXqyzVcez_ZYYtja2kK86mGVXVaL2PVPiuM9jqgdVIGMKDihwq3iZRsyi6MkC-UnXsRkR5tD_ZpVd3T6spO1Qq9gzRRRbDtiEwWS6nBzTDcLKSLXSwi9PZQh-X5hbACztpxF2Rch5M6yMIhK21d7yfqHLLmkEEIeKbm-BzbrxeKNI-Aiba0iGLpmUekkZPzx5PIby1wui-XpwsXY5dhyZ9WxMeds2LAJYjwsp72jI1rPrim8ypGXOjTDAcZTz6b0fL9lgRGFdowwi3T-FDmmDUlqhsesMbilFV2FSN0lmBYwKgU0tuJf-qI-wA6ksdVLql5zhihlyRkeFiAycAGhudTHoqVrqxZoAvKzPKZEMDGL3KDW7W5y7om0Dys9MRNxskhDfjscEKDPH9TfFZ3avjd_YhbE7cgbsJ5z3D6SirDzMgzHUUjEUXebU1RQCRVvk5gkskdlCd_UKl8XDHI4WBV2p52lKALLfs2SZIa4adA6XW5TvuYK1Fu8adG-wpGaCYO842WYDZ8KwVeC6H1c39740MydIDmfwHWCyYaqeKhYRIr2_Zr-FWOI9NVGUMgnTY_leCE4P-3M2q0La64lt1GmIxHmTeUte4oYhQacgFMbXagL9G4O9mhlvgbrl26HtueTVo8zC4HC4887fnNpAoaLl-KgPwTxQBeQyADq2-iyLp8w6k42oJrWXzZ6Uv0_h0_MKFK_8QFjzzWhan1w45BOdFUs-8-aLfxM2e9YzoQ21PtbpnVXuEBmNN_u51yOEMuQVy3)](https://www.plantuml.com/plantuml/uml/hLPjRzis4FxENt7sKYG16Zi3idqeagv-SLu0DyaSfqC_6RHqieZIf4UUd6P3__kEr2mxbPFKG0aabgXxdhjxxgZJ1q_IKJ7NGZJsxZsESvmZd46pTpAPEKJJ568V4ckMw0WKmOEY76IQAbBMICsFvdDfKj3A84WtA-Pe28xwey6mCxxwD9XSNVU6z_t1MRFLRhMQG1OAZw1j8hL-50sLmPkbT4fEDKxmg_Ba3vhVWvk70c0V6XIZuz3EbVCqHa-GEJk7DpEaISMobBh0RIJjYFS2LaphZ2DDY71bqq3jyLdBd6ZXtxNRJZwqPgn8CUMa7Cj4QAZ5chGNMfgWwv6dLAjfktToT1ksxZyEstFf2TtQaqbL5cG-hIsuxOp6S7CEuyl1nm44extkpVrrlpFwFEbUJ7etmvjHgzM2N2unQ3j5I35J1bDG1ihO5NdK6T_8MC54cc1M-DB6qwD6_vP9cFp0s82NXIQ8Cdfuo5MIWtIRn5o2reAJEmJ6N6NWloYpa4xEFOHUA2cVO6BRi3w9Gy8LDJihYxQoTlXteHoRYqOzJVY3svASD9vTeQ7cfj7QufUJkCBJpcXqyzVcez_ZYYtja2kK86mGVXVaL2PVPiuM9jqgdVIGMKDihwq3iZRsyi6MkC-UnXsRkR5tD_ZpVd3T6spO1Qq9gzRRRbDtiEwWS6nBzTDcLKSLXSwi9PZQh-X5hbACztpxF2Rch5M6yMIhK21d7yfqHLLmkEEIeKbm-BzbrxeKNI-Aiba0iGLpmUekkZPzx5PIby1wui-XpwsXY5dhyZ9WxMeds2LAJYjwsp72jI1rPrim8ypGXOjTDAcZTz6b0fL9lgRGFdowwi3T-FDmmDUlqhsesMbilFV2FSN0lmBYwKgU0tuJf-qI-wA6ksdVLql5zhihlyRkeFiAycAGhudTHoqVrqxZoAvKzPKZEMDGL3KDW7W5y7om0Dys9MRNxskhDfjscEKDPH9TfFZ3avjd_YhbE7cgbsJ5z3D6SirDzMgzHUUjEUXebU1RQCRVvk5gkskdlCd_UKl8XDHI4WBV2p52lKALLfs2SZIa4adA6XW5TvuYK1Fu8adG-wpGaCYO842WYDZ8KwVeC6H1c39740MydIDmfwHWCyYaqeKhYRIr2_Zr-FWOI9NVGUMgnTY_leCE4P-3M2q0La64lt1GmIxHmTeUte4oYhQacgFMbXagL9G4O9mhlvgbrl26HtueTVo8zC4HC4887fnNpAoaLl-KgPwTxQBeQyADq2-iyLp8w6k42oJrWXzZ6Uv0_h0_MKFK_8QFjzzWhan1w45BOdFUs-8-aLfxM2e9YzoQ21PtbpnVXuEBmNN_u51yOEMuQVy3) + +## List of available C4 language themes + +> All language themes are machine translated. If there are any errors, please let us know and create an issue with the expected fix. + +If you want to create a diagram in a specific language, then you can defined ex. system labels, descriptions,... with names in the corresponding language. +But independent of these changes the standard (mostly legend) labels remain in English. + +Ex. following Japanese sample still displays an English legend (you could change the label with `Update...()` calls, but this requires a high effort per diagram): + +```plantuml +@startuml + ' first diagram without the C4Language_japanese theme + ' !theme C4Language_japanese from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +LAYOUT_LANDSCAPE() + +Person(admin, "管理者") +System_Boundary(c1, 'サンプル') { + Container(web_app, "ウェブアプリケーション", "C#, ASP.NET Core 2.1 MVC", "複数のTwitterタイムラインを比較することができます") +} +System(twitter, "Twitter") + +Rel(admin, web_app, "使用する", "HTTPS") +Rel(web_app, twitter, "ツイートを取得する", "HTTPS") + +SHOW_LEGEND() +@enduml +``` + +![Japanese sample without C4Language_japanese theme](https://www.plantuml.com/plantuml/png/hP7DRjD058NtynJJi4WYfR6AkcBLu4PqaQOHTa6ih4ayJOpiiJKUAweG4fxX1maG24ehTe0gMa0ge0Yn2Ut3NDhaCRXEIxk09LwDpfpvxZc-IwbYKcLHICfq8v2fedx0-f95T1YeGPmfgWQSseij9lePwtFlDakOu2alz8WJMgPpnUdVdWqPHtIWL99UiIp9XlK-GhDkbdBPYuNYGjLxSMGb8HD5XlbK-M7GjUp5-KuXhQ-sh8YbYajhDYCbT2uGlJ3p-N-XekJP-885WijwWbv2MerRQ-kkrsgqbnsxqMbMgeHqk4nZKM5-58WQBKqEtarUF9pUUr2g4cSJGP5tDSw4p-HcfRTGesNGty6CmEo0-LokqZk4udS-g3BaNOyb2P90Vm2z1sORzFkP_HFeRs36e7-0GNrKGfDzgKORJgVURhe8aPnUhY_GrHjsSJVTVNJo-Yla1owk2nk1FWAz2-Ojc8-pmmZqovClMzEnWVmDw2UGlu9y7_AdaEz1_WpoGzInnzsp9XLr2aBs6H8loNKU_cb_4VxNpwF9rlufjiYouheT1zs5-TnrWGDpVvPe3EOnXZf-ldrykFFtQ-AihDtqMirhpVOo_libBdpSosy0) + +But if you activate the `C4Language_japanese` theme, the legend is translated too: + +```plantuml +@startuml +' with the C4Language_japanese theme ex. the predefined legend labels are translated too +!theme C4Language_japanese from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +LAYOUT_LANDSCAPE() + +Person(admin, "管理者") +System_Boundary(c1, 'サンプル') { + Container(web_app, "ウェブアプリケーション", "C#, ASP.NET Core 2.1 MVC", "複数のTwitterタイムラインを比較することができます") +} +System(twitter, "Twitter") + +Rel(admin, web_app, "使用する", "HTTPS") +Rel(web_app, twitter, "ツイートを取得する", "HTTPS") + +SHOW_LEGEND() +@enduml +``` + +![Japanese sample with C4Language_japanese theme](https://www.plantuml.com/plantuml/png/hP5FRzD04CNl-ocsuP14IcqLzSIfmOte8KqZae8uMPjucWJPQskzLgWG4lRo1maG24ehRe0gMa0ge0XnAUs76ThaOp1EItk0OtsnzURDRz_pBiHQA9q4FYlouK3tkUu3T-RhGlOIqGFtjeY4X1XoFG0ETwof8rBWmTf0WiTzw86ab-Y07tEXoAg4Z7sXQQZ3aCtag_-7hgamu7sje_YARIinj7eK8UaaCQXkA3L8RNN3m8vy8VECix7s_477TkPdcxcqkbot0n5hKFRqZ9ZD36JNJpou42X9haCRWdegAo8lO_NghPNLjbklDXPRJhLPAvKPQuAAGraINZ2G5LuOxxqVltmqkV-mK6QjTG85xjKmaPvGwwNkN8KNCVk1PeHc2ysNOfdVPPoUiuDAG-Yu8eg8XDb7p7RGR6BsOMh_ZDbtDFkO_KH3-gX09kTIXLTRJQjHQnD40RzipV7b6qu-csm_Fdxp3TEzDjqjDSBi4BDjDE_GV9f-Z31xTVnrOx9lC7sBsLDCNsEwY-apJ7SmVOxf0UdKuzvfav8-0H7x54b3TXtyl-tFm__-TJZUs3t1vbcMskrcYzov-SnrZaFpW1BbvSmJ2dNqOlFeOElVRTPQMhdfrclNQer5-lSB83swbpy0) + +In the following list you can find all available C4 language themes +(the diagram contents themselves are not translated that you simpler see the differences): + +### C4Language_english + +C4Language_english theme is the original language theme and need no activation. + +Theme [C4Language_english](https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes/puml-theme-C4Language_english.puml) can be activated with + +```plantuml +!theme C4Language_english from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes +``` + +![](https://www.plantuml.com/plantuml/png/hL7DRfmm4BxxAIRRGrXf0qgLKq-XP9KSo0OLjb5FoC0KBFd7iWUXgEgxTzocIH-WN4RCV3_pZMyZoK2hqUA25ZG8rKqjxRpA6NkqirPnWU_16LY8VFnK545k-QneMOSrOXYT9RIKZyuKNakRbAuYJLeDHNLprQJM-R4kZ8o4eVXj4SM5igDU9_mlejpgAsP8PJ7aFaKHTVdjwTprTNcwQwkoEMPx8HeCqTbCJaRP0-pAL5Ma8Cc5tLwqBonc-izkjPCCBzbuVO3BLXglyN8FFmJmzsQJRJZqqdlMUSO1Ik-r6YKfPtVSgZuSe6oR_7Jic18GFkRNyFYrIhDIQxT5I34Za0FEw2L3pAf9iHTqco9E1QGCQlQAlDlFr-qo-ZDadLSO3yKNr7zJlQzrZipa-j1rJSke17gRlilS8qN-nLJIC_zB4Ut3qtDV7--Ffpi-u2tQYO_x2m00) + +### C4Language_chinese + +Theme [C4Language_chinese](https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes/puml-theme-C4Language_chinese.puml) can be activated with + +```plantuml +!theme C4Language_chinese from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes +``` + +![](https://www.plantuml.com/plantuml/png/hL7DRfmm4BxxAIRRGq3QW5Bbr5CeGSc1R51X6_M434mNI_wnxB5GLFNTQwlfRXyWN4RCzytt0_UUkAEW9BkY5HL2VTToVGhyXEEy2eqUuQSp2bOYwx-KfUDRSHAqXYbuTBFHX9gAsQZIIgwJqesdHOgfhEzkkhGwFhUbufxGbSa2FRiIUfPXmGyHZQknZXSyXdM5JLLOM_ruEGvZMnqU-hhgcYndh4FdZSxueeJUmwvAKtXod8pRvQn_yuHg_6g2NhXxo-RRFLptN5c9rpdyOX2ViqssuJHoQwFEAqvGMIl5p4aOlOkh-jCUghuh3iqGJnp2v-8Mdh_N2QkaD9k7LDC36OWTBOyK5II9w0N39eZG0Gc5Cdt_cEttUxgC_e9HvvqMGVODvRzMbrX7ZpxvFGr3rqTM8ftHYymZae-lc4RwpV-ViFxfvNLicyVcy93bx1xr4fJy0m00) + +### C4Language_danish + +Theme [C4Language_danish](https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes/puml-theme-C4Language_danish.puml) can be activated with + +```plantuml +!theme C4Language_danish from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes +``` + +![](https://www.plantuml.com/plantuml/png/hL7DRjim3BxhATZiK0T8RNJeQQTwRj0UtDIOdHKx6OhDnGBq8qWKZ6BOku_QkdOFC5y8azyFF-esaWoKZ1ONjA11Q6vQQSz9dd6S4qqBV0_Em4BauwUg2d8jpugMT4eHm-GieQLoSgRoMjgiSnLfrkfKDJTNNMuT7zlAo4WOgjy6KLmeE-aqutyHvTROC4CgYw7qEOXewszFns5iwyDTtzJTljWAqM68pXPoDihkO5FdgY85IIvijg9_OJ4pVdR9pZAy5DFr3YvxQRp6ooty4C3VcqsnuccKthFECvwWzbwhIP9oTiEjviCEwhuh3_k1AG7XOtaDZr-RFAkrTck473C2EU2CNZB494sAlM1O5N4g86LGirVatNw-RbVGdo7hlC9uABwW_flgVQrZP2RNXs7eUaPbqDlqNUOUAV8lvfAV-L-Aw1-UdiTsVxy_tF41Rz7EVDnV) + +### C4Language_dutch + +Theme [C4Language_dutch](https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes/puml-theme-C4Language_dutch.puml) can be activated with + +```plantuml +!theme C4Language_dutch from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes +``` + +![](https://www.plantuml.com/plantuml/png/hL7DRfmm4BxxAIRRGrXf0qgLKq-X12K7ia65RTGJCZ1TBFd7iWUXgEgxTzocIH-WN4RCV3_pZMyZoK2hqUA25ZG8rKqZxNcLPnncQLLSu7jm1XOY7pyLHP1RVbQqhECQCKpE4bhA9sSAhwLDGbUHPgt6ehgvQbFhzDWKHaR2KFnsYE92sKclC_uNKMuD5JEaiXXodvA8flpsTEg7fZpUTLNPrjbUY1P3T3QJir7s0BioLHKfI79XjnVT2ukPuRDRxIp3IpPT7-2oayPhlDp33m7ylTba6uw3z9vrdd64qdkj9adAsHstgWy7ABisFzOzKmB2n_mQ7hzMQLPgxRO8AMO4Si0PlMI8MJKfze9-KyIfW9H1pLwHT_lvkbr6VuQiymhZeVY2-c-gzxLEaPbS7_g-xHYLG6_JTvbxfCY_c4fwvdyfedjuUXwQ-hu-tl41Rz7EVDnV) + +### C4Language_german + +Theme [C4Language_german](https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes/puml-theme-C4Language_german.puml) can be activated with + +```plantuml +!theme C4Language_german from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes +``` + +![](https://www.plantuml.com/plantuml/png/hL7DRfmm4BxxAIRRGrXf0qgLKq-X12K7ia65RTGJCZ1bBVd7iWUXgEgxTzocIH-WN4RCV3_pZMyZoK2hqUA2pcWGgfj6scML2muB1YCjV0_Em9d8nqz54UIMBuhEwxX639EpX9RooPd2QscJq5MaMQkng6wksjGwFJQ5aP4m5ByTehXGTjBhZFz5b5j3nGofB8RSfoIYARyzdVgXAOztNLMsTRONeiKGdStaR9GzmAvCLKKAabpOxKNtmc9c-EnMEylmaatN1xZifF4QB_VmGm1_RpRPXkCWlMUTPnoXz5whIP9oTiUjwiC1ogxDZtNFb83mCR-6nwzLcfLQkor2YXc17716BnbYLasAlQ3V574g86LGirVatNw-RfVHdo7hlC9uABwW_flgVQrJP2RNXxvlEqObqDlqNUOUAV8lffAU-L-Aw1wUdeUclg-FTtp0MxGp7_SN) + +### C4Language_italian + +Theme [C4Language_italian](https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes/puml-theme-C4Language_italian.puml) can be activated with + +```plantuml +!theme C4Language_italian from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes +``` + +![](https://www.plantuml.com/plantuml/png/hL7DRjim3BxhATZiK0T8RNJeQQTwRj0UtDIOdHKx6OpD9GBq8qWqWcBOku_QkdOFC5y8azyFF-esCKPUh54NV29BqDoqw8uB7cdKZ4QZW-_HMpWnX_IfgYAUowFcqt9O4iN9EoR7vUHj5Gowh7ILU3RwK3KtLrrkxH_Roc9YYjLlYwGkj9lCCjD_4PNMs0W3jQDOXXn5jVMtf_qmjlNkhc_gRbkibUee9kyAdArs6rZLkUh44Td7rLhrBo9cnyz-SJF6bsAwti1bZpOOkbp33mNolTaKPpgC68BeFDC1wX2Cdf2rTojfDHysKFTTkTiEGea47yjhUFpQv5bjZ3ydo34Ji0V9650WTZ6inGk6isP91Qmj6V5AijlFr-qA_ZCKdLUO3DKNCdzJlQ-rJyAK-Z0CNI-e37gRlilS4oVvfLpoC_zBKVt3q_FORk-tkpivu2svMOxx2m00) + +### C4Language_japanese + +Theme [C4Language_japanese](https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes/puml-theme-C4Language_japanese.puml) can be activated with + +```plantuml +!theme C4Language_japanese from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes +``` + +![](https://www.plantuml.com/plantuml/png/hL7DRfmm4BxxAPpj8Qoq0QNAgQTGWf83sQ32Dke93J3TTUKVonw4eghltd6RPli0uJ9YvlkPRtmR2G8jHeiBEg51MTqqO8yB777u0HuiHfJVWpFoHEJZfw88iEP7HQTbN2A6oLb2I_daJE4rs2Hr5MdMQYogcwisjGwFJM4W4eRYZqSK5yfEUfdnNKIvDLJC06Knv3vb4KtvxUdG3qsvl-kgigsphH0jXkXi1hDHTYStPQegKW1oORCLtGkBcU6pM-mCuIMRhdVoiWFZDLvkvKyX-NkpoLOS1_2UTPvnbANtMar0ojaDjweFErbsRRwlUwO4b1_pQ_dujKgpKcktHfbYHabESaOF336B9iLUibyLSIf9og1chyYx_NhTBgE_GzPvXV5GV47zBzLvhKDa9jU7lcyxHYNGs_GiSuyK-HTJIS_yFqLq3q_FGrFVr_ixFk0jsfcF-ni0) + +### C4Language_korean + +Theme [C4Language_korean](https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes/puml-theme-C4Language_korean.puml) can be activated with + +```plantuml +!theme C4Language_korean from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes +``` + +![](https://www.plantuml.com/plantuml/png/hL7DRfmm4BxxAIRRGrXf0qgLKq-X12K7ia65RTGJCZ3TjUeVonw4eghltd6RPli0uJ9YvlkPRtmRIGPQZ1ONT4A3KDqqqXuNUSJXXmieBNmFpi29oCTFHH7acXyLdPPnYHWcPmajvPCpXTVI9g6hIBDMOr7TNBMfTNXi2YCZOIZ-E4HneUoabndVHPHRGyKCgIo6tASaeYc_FHtweIdtTrrLjdMs5QB549tDv6oKtS6cJ5L52f9Ss6n5zy9YPlZi5ZlBy99DrpkuxAJn6Y-ty5C0VsyssOhZ8BrddMSSeVHUgqcISdR3hUh33igkpVTrpvI0y36_XiUlLPgLMhirGeePWHnmHYyPOXPDYhsWNnLnAY1bKBDNvDr-lMwNqTyXwxp2U2Y-eFwNwhpM8JAJwqFVjnsZ4kXjUfQvHuhyYwcaP_wV8hg7f-UXgU_h_HqVy1RjpCVz3G00) + +### C4Language_portuguese + +Theme [C4Language_portuguese](https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes/puml-theme-C4Language_portuguese.puml) can be activated with + +```plantuml +!theme C4Language_portuguese from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes +``` + +![](https://www.plantuml.com/plantuml/png/hL7BRjmm3BphAvZj8LvWOoD5JZt5THR9mTaOjRT1JuRMPhq2z10a2aPGzDzBjMdI3wWlX3cS6Gvr6qa6IaQB2pgZGMXkMccN91SSlMDaIHWHlWTdu4pauwUg2d8j5qNdT4eHm-GieQLoSgRoMjeiTXLfrkfKDJTNNMuT7zlAo4WOgjykKLmeE-aqutyHvTROC4CgYw7qEOrewszFns5iwyDTtzJTljWAqM68pXPoDihkO5FdgY85IIvijg9_OJ4pVdR9pZAy5DFr3YvxQRp6ooty4C3VcqsnuccKthFECvwWzbwhIP9oTiEjviCEwhuh3_k1AG7XOtaDZr-RZDLQkpL2ZXc17716Btd494sAlM1O5N4g86LGirVatNw-RbVG7v1rNiSO55zG_qtrljOnCfFhmp1qFK_beJVqNUOUAV8lvfAV-L-Aw1-UdiTsVxy_tF41Rz7EVDnV) + +### C4Language_russian + +Theme [C4Language_russian](https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes/puml-theme-C4Language_russian.puml) can be activated with + +```plantuml +!theme C4Language_russian from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes +``` + +![](https://www.plantuml.com/plantuml/png/hL7DRjim3BxhATZiK0T8RNJeQQTwRj0UtDIOdHKx6RBD9GBq8qWKZ6BOku_QkdOFC5y8azyFF-esaWoKZ1ONT4Q3qDoqqfwIFE4OKenAMlWUd84paO-VgYh8jJmfEgSfHGopiuIMojcPocjfiz9Lf4MhgMfkhhhSEZwsbP6HC5I_BQAuK7RMQS7_8igjiM66L1P3wNCKqTRVdex3sDQ7kxwfktsn5QB349qjv6AKtS6cpbL52f9Ss6n5_y9YPlpiabraU2dcwnrSzj9uZPTR-260lpUROiLfbDwppZDEK7klrIn9ERlXLlDX1tNVbOVzm9I0yB6yXiUlJPxLMhirGeuPWHnmHYyPOf8cnLumh8eu5P0ogDahycu_NxShwC-GTLvXF1HVKFzDzRxMCJAJwyCmT3sZCkXj-YvpZnJv5tF9p_mlHVGFJyzZkx_V7-xuWBTe5pxkBm00) + +### C4Language_spanish + +Theme [C4Language_spanish](https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes/puml-theme-C4Language_spanish.puml) can be activated with + +```plantuml +!theme C4Language_spanish from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes +``` + +![](https://www.plantuml.com/plantuml/png/hL7DRfmm4BxxAIRRGrXf0qgLKq-X12K7ia65RTGJCZ1TBFd7iWUXgEgxTzocIH-WN4RCV3_pZMyZoK2hqUA25ZG8rKqZxNcLPnoYbrR51Ru7Ps0Xyl5JKGIvvMT5opgk4SFaBA6bV7Acy5hQf7GLQTPgBAgRgpQrJezDOMGa3CLlYoWkb9tqEkD_4UNMK353AeiXzocAQCflJwT-QChZNLULRPtjXMWnH6SpEHjb3x0hKrMHWYGNTdlHlR2O6JwxrSuol6JJzG4kEscyniiz_130tvjDjk4uIEzPvnb7ABtNQfAadDrng_fmWB9hysFTCoKWVColuV5hbMQbrcwBa69680USqKk6c5MJOY_eDqMS2aWPrEmLURUVhzjbz6V8Egym7eelgF-cUb_h59d9zQ7lsuvH2VGsVPUvHuhyYwcaP_wN8hg7f-UXgU_hunqVy1RjpCVz1G00) + +### C4Language_ukrainian + +Theme [C4Language_ukrainian](https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes/puml-theme-C4Language_ukrainian.puml) can be activated with + +```plantuml +!theme C4Language_ukrainian from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes +``` + +![](https://www.plantuml.com/plantuml/png/hL7DRfmm4BxxAIRRGrXf0qgLKq-XP9KSo0OLjb5FoC1qrwf_B7ii55LzzuxLDEa3bCk8cU_d--0saWoKZ1ONT4Q3qDoqqfwIFE6OVWIfh98MlWTdu4pauwUg2d8jJuhEQKeHm-mieQLoTgRoMjgiTHLfqMggcfkhBg-EZsrbP2GC5MMJA2wKdNLQyB-8ycficC5XCPG-bn5j_UtfE8njVRZhcxhR5riXEWpHsK8kHjaTREeyLQGWoONDLlGlB6R6poxPHOQNOhxUmMKlZTTukOMV0lXviobMd4RfFUiyumIrzrhDafIp6rur7tPGzrrvs0zC2GWVosju_DhaMwsrMoFacX780NVqaY4cQLBi1SEgY300AOEQlI9d-_MQhg0_HzPvXV5HV47zjzLxh6Da9i-7OUXwHcNGs_LTvXufyYlcaN_plnJHFpmzZ-t-Vd-uumzuYtP9Hly6) diff --git a/images/intellij_c4plantum_live_template1.gif b/images/intellij_c4plantum_live_template1.gif new file mode 100644 index 00000000..b266526f Binary files /dev/null and b/images/intellij_c4plantum_live_template1.gif differ diff --git a/images/intellij_c4plantum_live_template2.gif b/images/intellij_c4plantum_live_template2.gif new file mode 100644 index 00000000..5516726e Binary files /dev/null and b/images/intellij_c4plantum_live_template2.gif differ diff --git a/images/vscode_c4plantuml_snippets.gif b/images/vscode_c4plantuml_snippets.gif index 6abfae8f..d16af2da 100644 Binary files a/images/vscode_c4plantuml_snippets.gif and b/images/vscode_c4plantuml_snippets.gif differ diff --git a/intellij/c4_live_template.zip b/intellij/c4_live_template.zip new file mode 100644 index 00000000..db7c4587 Binary files /dev/null and b/intellij/c4_live_template.zip differ diff --git a/percy/C4_Component Diagram Sample - bigbankplc.puml b/percy/C4_Component Diagram Sample - bigbankplc.puml new file mode 100644 index 00000000..f181629b --- /dev/null +++ b/percy/C4_Component Diagram Sample - bigbankplc.puml @@ -0,0 +1,35 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Component.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml +!endif + +LAYOUT_WITH_LEGEND() + +title Component diagram for Internet Banking System - API Application + +Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.") +Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.") +ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") +System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") + +Container_Boundary(api, "API Application") { + Component(sign, "Sign In Controller", "MVC Rest Controlle", "Allows users to sign in to the internet banking system") + Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts") + Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.") + Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.") + + Rel(sign, security, "Uses") + Rel(accounts, mbsfacade, "Uses") + Rel(security, db, "Read & write to", "JDBC") + Rel(mbsfacade, mbs, "Uses", "XML/HTTPS") +} + +Rel(spa, sign, "Uses", "JSON/HTTPS") +Rel(spa, accounts, "Uses", "JSON/HTTPS") + +Rel(ma, sign, "Uses", "JSON/HTTPS") +Rel(ma, accounts, "Uses", "JSON/HTTPS") +@enduml diff --git a/percy/C4_Container Diagram Sample - bigbankplc-icons.puml b/percy/C4_Container Diagram Sample - bigbankplc-icons.puml new file mode 100644 index 00000000..ddd85a14 --- /dev/null +++ b/percy/C4_Container Diagram Sample - bigbankplc-icons.puml @@ -0,0 +1,51 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!endif + +!define DEVICONS https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons +!define FONTAWESOME https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/font-awesome-5 +' uncomment the following line and comment the first to use locally +' !include C4_Container.puml +!include DEVICONS/angular.puml +!include DEVICONS/dotnet.puml +!include DEVICONS/java.puml +!include DEVICONS/msql_server.puml +!include FONTAWESOME/server.puml +!include FONTAWESOME/envelope.puml + +' LAYOUT_TOP_DOWN() +' LAYOUT_AS_SKETCH() +LAYOUT_WITH_LEGEND() + +title Container diagram for Internet Banking System + +Person(customer, Customer, "A customer of the bank, with personal bank accounts") + +System_Boundary(c1, "Internet Banking") { + Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA", "java") + Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser", "angular") + Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device", "dotnet") + ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.", "mysql_server") + Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API", "server") +} + +System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", "envelope") +System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") + +Rel(customer, web_app, "Uses", "HTTPS") +Rel(customer, spa, "Uses", "HTTPS") +Rel(customer, mobile_app, "Uses") + +Rel_Neighbor(web_app, spa, "Delivers") +Rel(spa, backend_api, "Uses", "async, JSON/HTTPS") +Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS") +Rel_Back_Neighbor(database, backend_api, "Reads from and writes to", "sync, JDBC") + +Rel_Back(customer, email_system, "Sends e-mails to") +Rel_Back(email_system, backend_api, "Sends e-mails using", "sync, SMTP") +Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS") +@enduml diff --git a/percy/C4_Container Diagram Sample - bigbankplc-styles.puml b/percy/C4_Container Diagram Sample - bigbankplc-styles.puml new file mode 100644 index 00000000..f439fa7c --- /dev/null +++ b/percy/C4_Container Diagram Sample - bigbankplc-styles.puml @@ -0,0 +1,46 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!endif + +SHOW_PERSON_OUTLINE() +' Tags support no spaces in the name (based on the underlining stereotypes, which don't support spaces anymore). +' If spaces are requested in the legend, legend text with space has to be defined +AddElementTag("backendContainer", $fontColor=$ELEMENT_FONT_COLOR, $bgColor="#335DA5", $shape=EightSidedShape(), $legendText="backend container (eight sided)") +AddRelTag("async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine()) +AddRelTag("sync/async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine()) + +title Container diagram for Internet Banking System + +Person(customer, Customer, "A customer of the bank, with personal bank accounts") + +System_Boundary(c1, "Internet Banking") { + Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA") + Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser") + Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device") + ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.") + Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API", $tags="backendContainer") +} + +System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system") +System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") + +Rel(customer, web_app, "Uses", "HTTPS") +Rel(customer, spa, "Uses", "HTTPS") +Rel(customer, mobile_app, "Uses") + +Rel_Neighbor(web_app, spa, "Delivers") +Rel(spa, backend_api, "Uses", "async, JSON/HTTPS", $tags="async") +Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS", $tags="async") +Rel_Back_Neighbor(database, backend_api, "Reads from and writes to", "sync, JDBC") + +Rel_Back(customer, email_system, "Sends e-mails to") +Rel_Back(email_system, backend_api, "Sends e-mails using", "sync, SMTP") +Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS", $tags="sync/async") + +SHOW_LEGEND() +footer drawn with PlantUML v. %version() and C4-PlantUML v. C4Version() +@enduml diff --git a/percy/C4_Container Diagram Sample - bigbankplc.puml b/percy/C4_Container Diagram Sample - bigbankplc.puml new file mode 100644 index 00000000..2e0dbee0 --- /dev/null +++ b/percy/C4_Container Diagram Sample - bigbankplc.puml @@ -0,0 +1,40 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!endif + +' LAYOUT_TOP_DOWN() +' LAYOUT_AS_SKETCH() +LAYOUT_WITH_LEGEND() + +title Container diagram for Internet Banking System + +Person(customer, Customer, "A customer of the bank, with personal bank accounts") + +System_Boundary(c1, "Internet Banking") { + Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA") + Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser") + Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device") + ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.") + Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API") +} + +System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system") +System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") + +Rel(customer, web_app, "Uses", "HTTPS") +Rel(customer, spa, "Uses", "HTTPS") +Rel(customer, mobile_app, "Uses") + +Rel_Neighbor(web_app, spa, "Delivers") +Rel(spa, backend_api, "Uses", "async, JSON/HTTPS") +Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS") +Rel_Back_Neighbor(database, backend_api, "Reads from and writes to", "sync, JDBC") + +Rel_Back(customer, email_system, "Sends e-mails to") +Rel_Back(email_system, backend_api, "Sends e-mails using", "sync, SMTP") +Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS") +@enduml diff --git a/percy/C4_Container Diagram Sample - message bus.puml b/percy/C4_Container Diagram Sample - message bus.puml new file mode 100644 index 00000000..f31fe54b --- /dev/null +++ b/percy/C4_Container Diagram Sample - message bus.puml @@ -0,0 +1,54 @@ +@startuml "messagebus" +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!endif + +skinparam wrapWidth 200 +skinparam maxMessageSize 200 + +LAYOUT_TOP_DOWN() +'LAYOUT_AS_SKETCH() +LAYOUT_WITH_LEGEND() + + +Person(customer, Customer, "A customer") + +System_Boundary(c1, "Customer Information") { + + Container(app, "Customer Application", "Javascript, Angular", "Allows customers to manage their profile") + + Container(customer_service, "Customer Service", "Java, Spring Boot", "The point of access for customer information") + + Container(message_bus, "Message Bus", "RabbitMQ", "Transport for business events") + + Container(reporting_service, "Reporting Service", "Ruby", "Creates normalised data for reporting purposes") + + Container(audit_service, "Audit Service", "C#/.NET", "Provides organisation-wide auditing facilities") + + ContainerDb(customer_db, "Customer Database", "Oracle 12c", "Stores customer information") + + ContainerDb(reporting_db, "Reporting Database", "MySQL", "Stores a normalized version of all business data for ad hoc reporting purposes") + + Container(audit_store, "Audit Store", "Event Store", "Stores information about events that have happened") +} + +Rel(customer, app, "Uses", "HTTPS") + +Rel_R(app, customer_service, "Updates customer information using", "async, JSON/HTTPS") + +Rel_L(customer_service, app, "Sends events to", "WebSocket") +Rel_R(customer_service, message_bus, "Sends customer update events to") +Rel(customer_service, customer_db, "Stores data in", "JDBC") + +Rel(message_bus, reporting_service, "Sends customer update events to") +Rel(message_bus, audit_service, "Sends customer update events to") + +Rel(reporting_service, reporting_db, "Stores data in") +Rel(audit_service, audit_store, "Stores events in") + +Lay_R(reporting_service, audit_service) + +@enduml diff --git a/percy/C4_Container Diagram Sample - techtribesjs.puml b/percy/C4_Container Diagram Sample - techtribesjs.puml new file mode 100644 index 00000000..5e0ce9ec --- /dev/null +++ b/percy/C4_Container Diagram Sample - techtribesjs.puml @@ -0,0 +1,53 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!endif + +LAYOUT_TOP_DOWN() +'LAYOUT_AS_SKETCH() +LAYOUT_WITH_LEGEND() + +Person_Ext(anonymous_user, "Anonymous User") +Person(aggregated_user, "Aggregated User") +Person(administration_user, "Administration User") + +System_Boundary(c1, "techtribes.js"){ + + Container(web_app, "Web Application", "Java, Spring MVC, Tomcat 7.x", "Allows users to view people, tribes, content, events, jobs, etc. from the local tech, digital and IT sector") + + ContainerDb(rel_db, "Relational Database", "MySQL 5.5.x", "Stores people, tribes, tribe membership, talks, events, jobs, badges, GitHub repos, etc.") + + Container(filesystem, "File System", "FAT32", "Stores search indexes") + + ContainerDb(nosql, "NoSQL Data Store", "MongoDB 2.2.x", "Stores from RSS/Atom feeds (blog posts) and tweets") + + Container(updater, "Updater", "Java 7 Console App", "Updates profiles, tweets, GitHub repos and content on a scheduled basis") +} + +System_Ext(twitter, "Twitter") +System_Ext(github, "GitHub") +System_Ext(blogs, "Blogs") + + +Rel(anonymous_user, web_app, "Uses", "HTTPS") +Rel(aggregated_user, web_app, "Uses", "HTTPS") +Rel(administration_user, web_app, "Uses", "HTTPS") + +Rel(web_app, rel_db, "Reads from and writes to", "SQL/JDBC, port 3306") +Rel(web_app, filesystem, "Reads from") +Rel(web_app, nosql, "Reads from", "MongoDB wire protocol, port 27017") + +Rel_U(updater, rel_db, "Reads from and writes data to", "SQL/JDBC, port 3306") +Rel_U(updater, filesystem, "Writes to") +Rel_U(updater, nosql, "Reads from and writes to", "MongoDB wire protocol, port 27017") + +Rel(updater, twitter, "Gets profile information and tweets from", "HTTPS") +Rel(updater, github, "Gets information about public code repositories from", "HTTPS") +Rel(updater, blogs, "Gets content using RSS and Atom feeds from", "HTTP") + +Lay_R(rel_db, filesystem) + +@enduml diff --git a/percy/C4_Context Diagram Sample - bigbankplc-landscape.puml b/percy/C4_Context Diagram Sample - bigbankplc-landscape.puml new file mode 100644 index 00000000..09fed546 --- /dev/null +++ b/percy/C4_Context Diagram Sample - bigbankplc-landscape.puml @@ -0,0 +1,45 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Context.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml +!endif + +'LAYOUT_TOP_DOWN() +'LAYOUT_AS_SKETCH() +LAYOUT_WITH_LEGEND() + +title System Landscape diagram for Big Bank plc + +Person(customer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.") + +Enterprise_Boundary(c0, "Big Bank plc") { + System(banking_system, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") + + System_Ext(atm, "ATM", "Allows customers to withdraw cash.") + System_Ext(mail_system, "E-mail system", "The internal Microsoft Exchange e-mail system.") + + System_Ext(mainframe, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") + + Person_Ext(customer_service, "Customer Service Staff", "Customer service staff within the bank.") + Person_Ext(back_office, "Back Office Staff", "Administration and support staff within the bank.") +} + +Rel_Neighbor(customer, banking_system, "Uses") +Rel_R(customer, atm, "Withdraws cash using") +Rel_Back(customer, mail_system, "Sends e-mails to") + +Rel_R(customer, customer_service, "Asks questions to", "Telephone") + +Rel_D(banking_system, mail_system, "Sends e-mail using") +Rel_R(atm, mainframe, "Uses") +Rel_R(banking_system, mainframe, "Uses") +Rel_D(customer_service, mainframe, "Uses") +Rel_U(back_office, mainframe, "Uses") + +Lay_D(atm, banking_system) + +Lay_D(atm, customer) +Lay_U(mail_system, customer) +@enduml diff --git a/percy/C4_Context Diagram Sample - bigbankplc.puml b/percy/C4_Context Diagram Sample - bigbankplc.puml new file mode 100644 index 00000000..f82afb1a --- /dev/null +++ b/percy/C4_Context Diagram Sample - bigbankplc.puml @@ -0,0 +1,23 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Context.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml +!endif + +LAYOUT_WITH_LEGEND() + +title System Context diagram for Internet Banking System + +Person(customer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.") +System(banking_system, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") + +System_Ext(mail_system, "E-mail system", "The internal Microsoft Exchange e-mail system.") +System_Ext(mainframe, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") + +Rel(customer, banking_system, "Uses") +Rel_Back(customer, mail_system, "Sends e-mails to") +Rel_Neighbor(banking_system, mail_system, "Sends e-mails", "SMTP") +Rel(banking_system, mainframe, "Uses") +@enduml diff --git a/percy/C4_Context Diagram Sample - enterprise.puml b/percy/C4_Context Diagram Sample - enterprise.puml new file mode 100644 index 00000000..a56d0e0e --- /dev/null +++ b/percy/C4_Context Diagram Sample - enterprise.puml @@ -0,0 +1,45 @@ +@startuml "enterprise" +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Context.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml +!endif + +LAYOUT_TOP_DOWN() +'LAYOUT_AS_SKETCH() +LAYOUT_WITH_LEGEND() + +Person(customer, "Customer", "A customer of Widgets Limited.") + +Enterprise_Boundary(c0, "Widgets Limited") { + Person(csa, "Customer Service Agent", "Deals with customer enquiries.") + + System(ecommerce, "E-commerce System", "Allows customers to buy widgets online via the widgets.com website.") + + System(fulfillment, "Fulfillment System", "Responsible for processing and shipping of customer orders.") +} + +System(taxamo, "Taxamo", "Calculates local tax (for EU B2B customers) and acts as a front-end for Braintree Payments.") + +System(braintree, "Braintree Payments", "Processes credit card payments on behalf of Widgets Limited.") + +System(post, "Jersey Post", "Calculates worldwide shipping costs for packages.") + +Rel_R(customer, csa, "Asks questions to", "Telephone") + +Rel_R(customer, ecommerce, "Places orders for widgets using") + +Rel(csa, ecommerce, "Looks up order information using") + +Rel_R(ecommerce, fulfillment, "Sends order information to") + +Rel_D(fulfillment, post, "Gets shipping charges from") + +Rel_D(ecommerce, taxamo, "Delegates credit card processing to") + +Rel_L(taxamo, braintree, "Uses for credit card processing") + +Lay_D(customer, braintree) + +@enduml diff --git a/percy/C4_Deployment Diagram Sample - bigbankplc-details.puml b/percy/C4_Deployment Diagram Sample - bigbankplc-details.puml new file mode 100644 index 00000000..4e5ca37a --- /dev/null +++ b/percy/C4_Deployment Diagram Sample - bigbankplc-details.puml @@ -0,0 +1,70 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Deployment.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml +!endif + +AddElementTag("fallback", $bgColor="#c0c0c0") +AddRelTag("fallback", $textColor="#c0c0c0", $lineColor="#438DD5") + +WithoutPropertyHeader() + +' calculated legend is used (activated in last line) +' LAYOUT_WITH_LEGEND() + +title Deployment Diagram for Internet Banking System - Live + +Deployment_Node(plc, "Live", "Big Bank plc", "Big Bank plc data center"){ + AddProperty("Location", "London and Reading") + Deployment_Node_L(dn, "bigbank-api***\tx8", "Ubuntu 16.04 LTS", "A web server residing in the web server farm, accessed via F5 BIG-IP LTMs."){ + AddProperty("Java Version", "8") + AddProperty("Xmx", "512M") + AddProperty("Xms", "1024M") + Deployment_Node_L(apache, "Apache Tomcat", "Apache Tomcat 8.x", "An open source Java EE web server."){ + Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.") + } + } + AddProperty("Location", "London") + Deployment_Node_L(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS", "The primary database server."){ + Deployment_Node_L(oracle, "Oracle - Primary", "Oracle 12c", "The primary, live database server."){ + ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") + } + } + AddProperty("Location", "Reading") + Deployment_Node_R(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS", "The secondary database server.", $tags="fallback") { + Deployment_Node_R(oracle2, "Oracle - Secondary", "Oracle 12c", "A secondary, standby database server, used for failover purposes only.", $tags="fallback") { + ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="fallback") + } + } + AddProperty("Location", "London and Reading") + Deployment_Node_R(bb2, "bigbank-web***\tx4", "Ubuntu 16.04 LTS", "A web server residing in the web server farm, accessed via F5 BIG-IP LTMs."){ + AddProperty("Java Version", "8") + AddProperty("Xmx", "512M") + AddProperty("Xms", "1024M") + Deployment_Node_R(apache2, "Apache Tomcat", "Apache Tomcat 8.x", "An open source Java EE web server."){ + Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.") + } + } +} + +Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){ + Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.") +} + +Deployment_Node(comp, "Customer's computer", "Microsoft Windows of Apple macOS"){ + Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox, Apple Safari or Microsoft Edge"){ + Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.") + } +} + +Rel(mobile, api, "Makes API calls to", "json/HTTPS") +Rel(spa, api, "Makes API calls to", "json/HTTPS") +Rel_U(web, spa, "Delivers to the customer's web browser") +Rel(api, db, "Reads from and writes to", "JDBC") +Rel(api, db2, "Reads from and writes to", "JDBC", $tags="fallback") +Rel_R(db, db2, "Replicates data to") + +SHOW_LEGEND() +@enduml diff --git a/percy/C4_Deployment Diagram Sample - bigbankplc.puml b/percy/C4_Deployment Diagram Sample - bigbankplc.puml new file mode 100644 index 00000000..2f09c4b4 --- /dev/null +++ b/percy/C4_Deployment Diagram Sample - bigbankplc.puml @@ -0,0 +1,58 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Deployment.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml +!endif + +AddElementTag("fallback", $bgColor="#c0c0c0") +AddRelTag("fallback", $textColor="#c0c0c0", $lineColor="#438DD5") + +' calculated legend is used (activated in last line) +' LAYOUT_WITH_LEGEND() + +title Deployment Diagram for Internet Banking System - Live + +Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){ + Deployment_Node(dn, "bigbank-api***\tx8", "Ubuntu 16.04 LTS"){ + Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){ + Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.") + } + } + Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){ + Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){ + ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") + } + } + Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS", $tags="fallback") { + Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c", $tags="fallback") { + ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="fallback") + } + } + Deployment_Node(bb2, "bigbank-web***\tx4", "Ubuntu 16.04 LTS"){ + Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){ + Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.") + } + } +} + +Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){ + Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.") +} + +Deployment_Node(comp, "Customer's computer", "Microsoft Windows of Apple macOS"){ + Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox, Apple Safari or Microsoft Edge"){ + Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.") + } +} + +Rel(mobile, api, "Makes API calls to", "json/HTTPS") +Rel(spa, api, "Makes API calls to", "json/HTTPS") +Rel_U(web, spa, "Delivers to the customer's web browser") +Rel(api, db, "Reads from and writes to", "JDBC") +Rel(api, db2, "Reads from and writes to", "JDBC", $tags="fallback") +Rel_R(db, db2, "Replicates data to") + +SHOW_LEGEND() +@enduml diff --git a/percy/C4_Dynamic Diagram Sample - bigbankplc.puml b/percy/C4_Dynamic Diagram Sample - bigbankplc.puml new file mode 100644 index 00000000..8d173870 --- /dev/null +++ b/percy/C4_Dynamic Diagram Sample - bigbankplc.puml @@ -0,0 +1,20 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Dynamic.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml +!endif + +LAYOUT_WITH_LEGEND() + +ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") +Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.") +Container_Boundary(b, "API Application") { + Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.") + Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.") +} +Rel_R(c1, c2, "Submits credentials to", "JSON/HTTPS") +Rel(c2, c3, "Calls isAuthenticated() on") +Rel_R(c3, c4, "select * from users where username = ?", "JDBC") +@enduml diff --git a/percy/C4_Sequence Diagram Sample - bigbankplc.puml b/percy/C4_Sequence Diagram Sample - bigbankplc.puml new file mode 100644 index 00000000..ae92d6c5 --- /dev/null +++ b/percy/C4_Sequence Diagram Sample - bigbankplc.puml @@ -0,0 +1,22 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Sequence.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Sequence.puml +!endif + +Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.") +Container_Boundary(b, "API Application") + Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.") + Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.") +Boundary_End() + +ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") + +Rel(c1, c2, "Submits credentials to", "JSON/HTTPS") +Rel(c2, c3, "Calls isAuthenticated() on") +Rel(c3, c4, "select * from users where username = ?", "JDBC") + +SHOW_LEGEND() +@enduml \ No newline at end of file diff --git a/percy/TestAllAddTags.puml b/percy/TestAllAddTags.puml new file mode 100644 index 00000000..fcd7189a --- /dev/null +++ b/percy/TestAllAddTags.puml @@ -0,0 +1,73 @@ +@startuml + +' displays all elements, relationship and legend (can be included in the theme test) +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Component.puml + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Deployment.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml +!endif + +SetDefaultLegendEntries("person\nsystem\ncontainer\ncomponent\nexternal_person\nexternal_system\nexternal_container\nexternal_component\nnode\nenterprise_boundary\nsystem_boundary\ncontainer_boundary\nboundary") + +AddElementTag("elementTag", $bgColor="lightRed", $fontColor="darkRed", $borderColor="darkRed", $shadowing="true", $borderThickness="5") +AddRelTag("relTag", $textColor="darkGreen", $lineColor="darkGreen", $lineThickness="5") +AddBoundaryTag("boundaryTag", $borderColor="orange", $borderThickness="3") +AddSystemTag("systemTag", $borderColor="orange", $borderThickness="3") +AddExternalSystemTag("exSystemTag", $borderColor="brown", $borderThickness="5") +AddPersonTag("personTag", $borderColor="orange", $borderThickness="3") +AddExternalPersonTag("exPersonTag", $borderColor="brown", $borderThickness="5") +AddContainerTag("containerTag", $borderColor="orange", $borderThickness="3") +AddExternalContainerTag("exContainerTag", $borderColor="brown", $borderThickness="5") +AddComponentTag("componentTag", $borderColor="orange", $borderThickness="3") +AddExternalComponentTag("exComponentTag", $borderColor="brown", $borderThickness="5") +AddNodeTag("nodeTag", $borderColor="orange", $borderThickness="3") + +Boundary(b2, "Boundary 2", $tags="boundaryTag") { + System(system, "System", "Optional Description - elementTag", $tags="elementTag") + System_Ext(externalSystem, "External System", "Optional Description") + Rel_R(system, externalSystem, "uses - relTag", $tags="relTag") + + SystemDb(systemDb, "SystemDb", "Optional Description - systemTag", $tags="systemTag") + SystemDb_Ext(externalSystemDb, "External SystemDb", "Optional Description - exSystemTag", $tags="exSystemTag") +} + +Boundary(b1, "Boundary 1") { + Person(person, "Person", "Optional Description") + Person(person2, "Person 2", "Optional Description - personTag", $tags="personTag") + Person_Ext(externalPerson, "External Person", "Optional Description") + Person_Ext(externalPerson2, "External Person 2", "Optional Description - exPersonTag", $tags="exPersonTag") + Rel_R(person, externalPerson, "uses") +} + +Boundary(b3, "Boundary 3") { + Container(container, "Container", "Technology", "Optional Description",$tags="containerTag") + Container_Ext(externalContainer, "External Container", "Technology", "Optional Description", $tags="exContainerTag") + Rel_R(container, externalContainer, "uses") + + ContainerDb(containerDb, "ContainerDb", "Technology", "Optional Description") + ContainerDb_Ext(externalContainerDb, "External ContainerDb", "Technology", "Optional Description") +} + +Boundary(b4, "Boundary 4") { + Component(component, "Component", "Technology", "Optional Description", $tags="componentTag") + Component_Ext(externalComponent, "External Component", "Technology", "Optional Description", $tags="exComponentTag") + Rel_R(component, externalComponent, "uses") + + ComponentDb(componentDb, "ComponentDb", "Technology", "Optional Description") + ComponentDb_Ext(externalComponentDb, "External ComponentDb", "Technology", "Optional Description") +} + +Boundary(b5, "Boundary 5") { + Node(node, "Node", "Type", "Optional Description", $tags="nodeTag") + Node(node2, "Node2", "Type", "Optional Description") +} + +Lay_D(b1,b2) +Lay_D(b2,b3) +Lay_D(b3,b4) +Lay_R(b4,b5) + +SHOW_FLOATING_LEGEND() +@enduml diff --git a/percy/TestAllElementsWithLegend.puml b/percy/TestAllElementsWithLegend.puml new file mode 100644 index 00000000..9809e88a --- /dev/null +++ b/percy/TestAllElementsWithLegend.puml @@ -0,0 +1,82 @@ +@startuml + +' displays all elements, relationship and legend (can be included in the theme test) +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Component.puml + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Deployment.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml +!endif + +SetDefaultLegendEntries("person\nsystem\ncontainer\ncomponent\nexternal_person\nexternal_system\nexternal_container\nexternal_component\nnode\nenterprise_boundary\nsystem_boundary\ncontainer_boundary\nboundary") + +title Overview of all elements, relationship and legend + +footer theme $THEME drawn with PlantUML v. %version() and C4-PlantUML v. C4Version() + +Boundary(b2, "Boundary 2") { + System(system, "System", "Optional Description") + System_Ext(externalSystem, "External System", "Optional Description") + Rel_R(system, externalSystem, "uses") + + SystemDb(systemDb, "SystemDb", "Optional Description") + SystemDb_Ext(externalSystemDb, "External SystemDb", "Optional Description") + SystemQueue(systemQueue, "SystemQueue", "Optional Description") + SystemQueue_Ext(externalSystemQueue, "External SystemQueue", "Optional Description") +} + +Boundary(b1, "Boundary 1") { + Person(person, "Person", "Optional Description") + Person_Ext(externalPerson, "External Person", "Optional Description") + Rel_R(person, externalPerson, "uses") +} + +Boundary(b3, "Boundary 3") { + Container(container, "Container", "Technology", "Optional Description") + Container_Ext(externalContainer, "External Container", "Technology", "Optional Description") + Rel_R(container, externalContainer, "uses") + + ContainerDb(containerDb, "ContainerDb", "Technology", "Optional Description") + ContainerDb_Ext(externalContainerDb, "External ContainerDb", "Technology", "Optional Description") + ContainerQueue(containerQueue, "ContainerQueue", "Technology", "Optional Description") + ContainerQueue_Ext(externalContainerQueue, "External ContainerQueue", "Technology", "Optional Description") +} + +Boundary(b4, "Boundary 4") { + Component(component, "Component", "Technology", "Optional Description") + Component_Ext(externalComponent, "External Component", "Technology", "Optional Description") + Rel_R(component, externalComponent, "uses") + + ComponentDb(componentDb, "ComponentDb", "Technology", "Optional Description") + ComponentDb_Ext(externalComponentDb, "External ComponentDb", "Technology", "Optional Description") + ComponentQueue(componentQueue, "ComponentQueue", "Technology", "Optional Description") + ComponentQueue_Ext(externalComponentQueue, "External ComponentQueue", "Technology", "Optional Description") +} + +Boundary(b5, "Boundary 5") { + Node(node, "Node", "Type", "Optional Description") +} + +Boundary(b6, "Boundary 6") { + Enterprise_Boundary(eb, "Enterprise Boundary") { + } + + System_Boundary(sb, "System Boundary") { + } + + Container_Boundary(cb, "Container Boundary") { + } + + Lay_R(eb,sb) + Lay_R(sb,cb) +} + +Lay_D(b2,b3) +Lay_R(b2,b1) +Lay_D(b3,b4) +Lay_D(b4,b5) +Lay_R(b5,b6) + +SHOW_FLOATING_LEGEND() +@enduml diff --git a/percy/TestAllPlantUmlElements.puml b/percy/TestAllPlantUmlElements.puml new file mode 100644 index 00000000..4717816c --- /dev/null +++ b/percy/TestAllPlantUmlElements.puml @@ -0,0 +1,112 @@ + @startuml + +' If ENABLE_ALL_PLANT_ELEMENTS is set BEFORE the first C4_* file is loaded, +' nearly "all" PlantUML elements can be used like +' Component(StorageA, "Storage A ", $baseShape="storage") +!ENABLE_ALL_PLANT_ELEMENTS = 1 + +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + ' percy runs (sometimes) with 1.2023.7 + ' !theme C4_united from %get_variable_value("RELATIVE_INCLUDE")/themes + !theme C4_united from ./../themes + ' !theme C4_green from ./../themes + !include ./../C4_Component.puml +!else + !theme C4_united from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes + ' !theme C4_green from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml +!endif + +LAYOUT_TOP_DOWN() + +' default is rectangle +Component(Component, "Container", "", "A component") +' already supported: rectangle, database, queue +Component(rectangleComponent, "Container rectangle", "rectangle", "A component with rectangle element", $baseShape="rectangle") +Component(databaseComponent, "Container database", "database", "A component with database element", $baseShape="database") +Component(queueComponent, "Container queue", "queue", "A component with queue element", $baseShape="queue") + +' already supported: rectangle, database, queue +' already defined (via other): +' node has a different style (cannot changed automatically) +' actor/ not working (font color not changed to $bkColor) - and/or conflict with existing? +' label not working (font color not changed to $bkColor) + +Component(actorComponent, "Component actor", "actor", "A component with actor element", $baseShape="actor") +Component(actorBCComponent, "Component actor/", "actor/", "A component with actor/ element", $baseShape="actor/") +Component(agentComponent, "Component agent", "agent", "A component with agent element", $baseShape="agent") +Component(artifactComponent, "Component artifact", "artifact", "A component with artifact element", $baseShape="artifact") +Component(boundaryComponent, "Component boundary", "boundary", "A component with boundary element", $baseShape="boundary") +Component(cardComponent, "Component card", "card", "A component with card element", $baseShape="card") +Component(circleComponent, "Component circle", "circle", "A component with circle element", $baseShape="circle") +Component(cloudComponent, "Component cloud", "cloud", "A component with cloud element", $baseShape="cloud") +Component(collectionsComponent, "Component collections", "collections", "A component with collections element", $baseShape="collections") +Component(controlComponent, "Component control", "control", "A component with control element", $baseShape="control") +Component(entityComponent, "Component entity", "entity", "A component with entity element", $baseShape="entity") +Component(fileComponent, "Component file", "file", "A component with file element", $baseShape="file") +Component(folderComponent, "Component folder", "folder", "A component with folder element", $baseShape="folder") +Component(frameComponent, "Component frame", "frame", "A component with frame element", $baseShape="frame") +Component(hexagonComponent, "Component hexagon", "hexagon", "A component with hexagon element", $baseShape="hexagon") +Component(interfaceComponent, "Component interface", "interface", "A component with interface element", $baseShape="interface") +Component(labelComponent, "Component label", "label", "A component with label element", $baseShape="label") +Component(nodeComponent, "Component node", "node", "A component with node element", $baseShape="node") +Component(packageComponent, "Component package", "package", "A component with package element", $baseShape="package") +Component(personComponent, "Component person", "person", "A component with person element", $baseShape="person") +Component(stackComponent, "Component stack", "stack", "A component with stack element", $baseShape="stack") +Component(storageComponent, "Component storage", "storage", "A component with storage element", $baseShape="storage") +Component(usecaseComponent, "Component usecase", "usecase", "A component with usecase element", $baseShape="usecase") +Component(usecaseBCComponent, "Component usecase/", "usecase/", "A component with usecase/ element", $baseShape="usecase/") + +Container(actorContainer, "Container actor", "actor", "A Container with actor element", $baseShape="actor") +Container(actorBCContainer, "Container actor/", "actor/", "A Container with actor/ element", $baseShape="actor/") +Container(agentContainer, "Container agent", "agent", "A Container with agent element", $baseShape="agent") +Container(artifactContainer, "Container artifact", "artifact", "A Container with artifact element", $baseShape="artifact") +Container(boundaryContainer, "Container boundary", "boundary", "A Container with boundary element", $baseShape="boundary") +Container(cardContainer, "Container card", "card", "A Container with card element", $baseShape="card") +Container(circleContainer, "Container circle", "circle", "A Container with circle element", $baseShape="circle") +Container(cloudContainer, "Container cloud", "cloud", "A Container with cloud element", $baseShape="cloud") +Container(collectionsContainer, "Container collections", "collections", "A Container with collections element", $baseShape="collections") +Container(controlContainer, "Container control", "control", "A Container with control element", $baseShape="control") +Container(entityContainer, "Container entity", "entity", "A Container with entity element", $baseShape="entity") +Container(fileContainer, "Container file", "file", "A Container with file element", $baseShape="file") +Container(folderContainer, "Container folder", "folder", "A Container with folder element", $baseShape="folder") +Container(frameContainer, "Container frame", "frame", "A Container with frame element", $baseShape="frame") +Container(hexagonContainer, "Container hexagon", "hexagon", "A Container with hexagon element", $baseShape="hexagon") +Container(interfaceContainer, "Container interface", "interface", "A Container with interface element", $baseShape="interface") +Container(labelContainer, "Container label", "label", "A Container with label element", $baseShape="label") +Container(nodeContainer, "Container node", "node", "A Container with node element", $baseShape="node") +Container(packageContainer, "Container package", "package", "A Container with package element", $baseShape="package") +Container(personContainer, "Container person", "person", "A Container with person element", $baseShape="person") +Container(stackContainer, "Container stack", "stack", "A Container with stack element", $baseShape="stack") +Container(storageContainer, "Container storage", "storage", "A Container with storage element", $baseShape="storage") +Container(usecaseContainer, "Container usecase", "usecase", "A Container with usecase element", $baseShape="usecase") +Container(usecaseBCContainer, "Container usecase/", "usecase/", "A Container with usecase/ element", $baseShape="usecase/") + +System(actorSystem, "System actor", $type="actor", "A System with actor element", $baseShape="actor") +System(actorBCSystem, "System actor/", $type="actor/", "A System with actor/ element", $baseShape="actor/") +System(agentSystem, "System agent", $type="agent", "A System with agent element", $baseShape="agent") +System(artifactSystem, "System artifact", $type="artifact", "A System with artifact element", $baseShape="artifact") +System(boundarySystem, "System boundary", $type="boundary", "A System with boundary element", $baseShape="boundary") +System(cardSystem, "System card", $type="card", "A System with card element", $baseShape="card") +System(circleSystem, "System circle", $type="circle", "A System with circle element", $baseShape="circle") +System(cloudSystem, "System cloud", $type="cloud", "A System with cloud element", $baseShape="cloud") +System(collectionsSystem, "System collections", $type="collections", "A System with collections element", $baseShape="collections") +System(controlSystem, "System control", $type="control", "A System with control element", $baseShape="control") +System(entitySystem, "System entity", $type="entity", "A System with entity element", $baseShape="entity") +System(fileSystem, "System file", $type="file", "A System with file element", $baseShape="file") +System(folderSystem, "System folder", $type="folder", "A System with folder element", $baseShape="folder") +System(frameSystem, "System frame", $type="frame", "A System with frame element", $baseShape="frame") +System(hexagonSystem, "System hexagon", $type="hexagon", "A System with hexagon element", $baseShape="hexagon") +System(interfaceSystem, "System interface", $type="interface", "A System with interface element", $baseShape="interface") +System(labelSystem, "System label", $type="label", "A System with label element", $baseShape="label") +System(nodeSystem, "System node", $type="node", "A System with node element", $baseShape="node") +System(packageSystem, "System package", $type="package", "A System with package element", $baseShape="package") +System(personSystem, "System person", $type="person", "A System with person element", $baseShape="person") +System(stackSystem, "System stack", $type="stack", "A System with stack element", $baseShape="stack") +System(storageSystem, "System storage", $type="storage", "A System with storage element", $baseShape="storage") +System(usecaseSystem, "System usecase", $type="usecase", "A System with usecase element", $baseShape="usecase") +System(usecaseBCSystem, "System usecase/", $type="usecase/", "A System with usecase/ element", $baseShape="usecase/") + +SHOW_LEGEND(false) +@enduml \ No newline at end of file diff --git a/percy/TestBoundaryTagSupport.puml b/percy/TestBoundaryTagSupport.puml new file mode 100644 index 00000000..5e295c6f --- /dev/null +++ b/percy/TestBoundaryTagSupport.puml @@ -0,0 +1,51 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Component.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml +!endif + +UpdateBoundaryStyle($bgColor="gold", $fontColor="brown", $borderColor="brown", $sprite="person", $legendSprite="person2,scale=0.3") +' re-set $bgColor avoids '(no back color)' in legend +UpdateSystemBoundaryStyle($bgColor="gold", $fontColor="white", $borderColor="white", $sprite=robot, $legendSprite="robot2,scale=0.3") + +AddElementTag("special", $sprite="person", $legendSprite="person,scale=0.3") + +AddBoundaryTag("specialSystem", $bgColor="green", $fontColor="white", $borderColor="blue", $shadowing="true", $shape = RoundedBoxShape(), $type="A SPECIAL SYSTEM BOUNDARY", $sprite="robot,scale=0.5,color=black", $legendSprite="robot2,scale=0.3,color=black") +AddBoundaryTag("existingContainersBoundary", $bgColor="red", $fontColor="white", $borderColor="white", $type="Existing CONTAINER BOUNDARY", $legendText="container boundary with existing components", $sprite="robot") + +System_Boundary(sb, "A System Boundary") { +} + +System_Boundary(sb1, "Special System 1 Boundary", $tags="specialSystem", $descr="A long description ... A long description ... A long description ... A long description") { + Container_Boundary(cb1, "Container Boundary\nwith tag", $tags="existingContainersBoundary", $descr="A long description ... A long description ... A long description ... A long description") { + Component(e1, "existing 1", "xyz", $tags="special") + Component(e2, "existing 2", "xyz") + } + Container_Boundary(cb2, "A Container Boundary") { + Component(c2, "Component", "xyz") + } +} + +System_Boundary(sb2, "Special System 2 Boundary", $tags="specialSystem") { +} + +' boundary tags are internally extended with '_boundary' that it uses a different name space +' this enables different element and boundary styles for the same tag name +AddBoundaryTag("v1", $bgColor="lightgreen", $fontColor="green", $borderColor="green") +AddElementTag("v1", $bgColor="lightred", $fontColor="red", $borderColor="red") + +Boundary(anotherBoundary, "Another Boundary", $type="BOUNDARY TYPE", $tags="v1") { + Component(anotherComponent, "Another Component", $techn="COMPONENT TYPE", $tags="v1", $descr="Component and boundary use different tag name spaces that both v1 tags can use different styles") +} + +Boundary(aBoundary, "A Boundary", $descr="A long description\nwith concrete line breaks\nNew line\nNewLine") { +} + +Lay_R(sb, sb1) +Lay_R(sb1, sb2) +Lay_R(sb2, anotherBoundary) + +SHOW_LEGEND() +@enduml diff --git a/percy/TestEmptyLabel.puml b/percy/TestEmptyLabel.puml new file mode 100644 index 00000000..578e99e6 --- /dev/null +++ b/percy/TestEmptyLabel.puml @@ -0,0 +1,105 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Component.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml +!endif + +LAYOUT_TOP_DOWN() + +!$img="img:https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/80px-Test-Logo.svg.png" +!$imgSmall="img:https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/20px-Test-Logo.svg.png" + +' SHOW_PERSON_OUTLINE() +SHOW_PERSON_PORTRAIT() + +Boundary(b, "Persons") { + Person(p, "Label", "Optional Description", $sprite=$img) + Person(p1, "", "Optional Description", $sprite=$img) + Person(p2, "", $sprite=$img) + Person(p3, " ", $sprite=$img) + ' should not be used (alias is not automatically reused, only empty block is displayed) + Person(p4, "") + + Lay_R(p,p1) + Lay_R(p1,p2) + Lay_R(p2,p3) + Lay_R(p3,p4) +} + +Boundary(b1, "Systems") { + System(s, "Label", "Optional Description", $sprite=$img) + System(s1, "", "Optional Description", $sprite=$img) + System(s2, "", $sprite=$img) + System(s3, " ", $sprite=$img) + ' should not be used (alias is not automatically reused, only empty block is displayed) + System(s4, "") + + Lay_R(s,s1) + Lay_R(s1,s2) + Lay_R(s2,s3) + Lay_R(s3,s4) +} + +Boundary(b2, "Components") { + Component(comp, "Label", "Techn", "Optional Description", $sprite=$img) + Component(comp1, "", "Techn", "Optional Description", $sprite=$img) + Component(comp2, "", $sprite=$img) + Component(comp3, " ", $sprite=$img) + ' should not be used (alias is not automatically reused, only empty block is displayed) + Component(comp4, "") + + Lay_R(comp,comp1) + Lay_R(comp1,comp2) + Lay_R(comp2,comp3) + Lay_R(comp3,comp4) +} + +Boundary(b3, "Containers") { + Container(con, "Label", "Techn", "Optional Description", $sprite=$img) + Container(con1, "", "Techn", "Optional Description", $sprite=$img) + Container(con2, "", $sprite=$img) + Container(con3, " ", $sprite=$img) + ' should not be used (alias is not automatically reused, only empty block is displayed) + Container(con4, "") + + Lay_R(con,con1) + Lay_R(con1,con2) + Lay_R(con2,con3) + Lay_R(con3,con4) +} + +Boundary(b4, "Relationships") { + System(A1,"A1") + System(B1,"B1") + System(C1,"C1") + System(D1,"D1") + System(E1,"E1") + + System(A2,"A2") + System(B2,"B2") + System(C2,"C2") + System(D2,"D2") + System(E2,"E2") + + Lay_D(A1,A2) + + Rel_R(E1, A1, "label", $sprite=$imgSmall, $link="https://github.com/plantuml-stdlib/C4-PlantUML") + Rel_R(A1, B1, "", $sprite=$imgSmall, $link="https://github.com/plantuml-stdlib/C4-PlantUML") + Rel_R(B1, C1, " ", $sprite=$imgSmall, $link="https://github.com/plantuml-stdlib/C4-PlantUML") + Rel_R(C1, D1, "", $link="https://github.com/plantuml-stdlib/C4-PlantUML") + + Rel_R(E2, A2, "label", $sprite=$imgSmall) + Rel_R(A2, B2, "", $sprite=$imgSmall) + Rel_R(B2, C2, " ", $sprite=$imgSmall) + Rel_R(C2, D2, "") +} + +Lay_D(b,b1) +Lay_D(b1,b2) +Lay_D(b2,b3) +Lay_D(b3,b4) + +SHOW_LEGEND() +@enduml \ No newline at end of file diff --git a/percy/TestFloatingLegend.puml b/percy/TestFloatingLegend.puml new file mode 100644 index 00000000..dab67c94 --- /dev/null +++ b/percy/TestFloatingLegend.puml @@ -0,0 +1,22 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!endif + +Person(a, "Person A") +Container(b, "Container B", "techn") +System(c, "System C") +Container(d, "Container D", "techn") +Container_Ext(e, "Ext. Container E", "techn") + +Rel_R(a, b, "calls") +Rel_D(b, c, "uses") +Rel_D(c, d, "uses") +Rel_R(d, e, "updates") + +SHOW_FLOATING_LEGEND() +Lay_Distance(LEGEND(), e, 1) +@enduml diff --git a/percy/TestLabelsWithLineBreak.puml b/percy/TestLabelsWithLineBreak.puml new file mode 100644 index 00000000..fc4e1db0 --- /dev/null +++ b/percy/TestLabelsWithLineBreak.puml @@ -0,0 +1,42 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Component.puml + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Deployment.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml +!endif + +Enterprise_Boundary(eb, "Enterprise\nBoundary") { + Person(p1, "Normal\nUser\nLabel", "Description\nLine\nBreak") + Container(c1, "Container\nLabel", "container techn\nwith line break", "Description\nLine\nBreak") + Component(c2, "Component\nLabel", component techn\nwith line break", "Description\nLine\nBreak") +} + +System_Ext(s1, "System Label\nWith\nLineBreak", "Description\nLine\nBreak") + +Rel_(p1, c1, "A relation\nwith custom direction", "o-DOWN->>") +Rel_(p1, c2, "A relation\nwith custom direction", "and technology\nwith LBs", "o-RIGHT-o") + +Rel(c1, c2, "A label\nwith\nline breaks", "and technology\nwith LBs") +Rel(c1, s1, "A linked label\nwith\nline breaks", "and technology\nwith LBs", $link = "https://www.plantuml.com") + +Node(n1, "A node label\nwith\nline breaks", "type with\nline break", "description\nwith line break") +Node(n2, "A node label", "PlantUML packages have no automatic line breaks, type breaks added", "PlantUML packages have no automatic line breaks, description breaks added") { + Container(cInNode, "A container in node") +} + +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Dynamic.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml +!endif + +Component(from, "From component") +Component(to, "To component") + +Rel_("pre1", from, to, "A custom dynamic relation\nwith custom direction", "o-DOWN->>") +Rel_("pre2", from, to, "A custom dynamic relation\nwith custom direction", "and technology\nwith LBs", "+--+") +Rel(from, to, "A dynamic relation\nwith line break") +@enduml diff --git a/percy/TestLayDirections.puml b/percy/TestLayDirections.puml new file mode 100644 index 00000000..ba2498aa --- /dev/null +++ b/percy/TestLayDirections.puml @@ -0,0 +1,32 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!endif + +HIDE_STEREOTYPE() + +Person(a, "A") +Person(a1, "P1") +Person(a2, "P2") +Person(a3, "P3") +Person(a4, "P4") + +Lay_U(a, a1) +Lay_R(a, a2) +Lay_D(a, a3) +Lay_L(a, a4) + +Person(x, "X") +System(s1, "S1") +System(s2, "S2") +System(s3, "S3") +System(s4, "S4") + +Lay_Up(x, s1) +Lay_Right(x, s2) +Lay_Down(x, s3) +Lay_Left(x, s4) +@enduml diff --git a/percy/TestLayoutLandscape.puml b/percy/TestLayoutLandscape.puml new file mode 100644 index 00000000..7989f011 --- /dev/null +++ b/percy/TestLayoutLandscape.puml @@ -0,0 +1,32 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Component.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml +!endif + +LAYOUT_LANDSCAPE() + +Person(admin, "Administrator") +System_Boundary(c1, 'Sample') { + Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") +} +System(twitter, "Twitter") + +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") + +System(S,"S") +System(SU,"S Up") +System(SD,"S Down") +System(SL,"S Left") +System(SR,"S Right") + +Rel_Up(S, SU, "Up") +Rel_Down(S, SD, "Down") +Rel_Left(S, SL, "Left") +Rel_Right(S, SR, "Right") + +SHOW_LEGEND() +@enduml diff --git a/percy/TestLayoutLandscapeDynamic.puml b/percy/TestLayoutLandscapeDynamic.puml new file mode 100644 index 00000000..8b1fc127 --- /dev/null +++ b/percy/TestLayoutLandscapeDynamic.puml @@ -0,0 +1,32 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Dynamic.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml +!endif + +LAYOUT_LANDSCAPE() + +Person(admin, "Administrator") +System_Boundary(c1, 'Sample') { + Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") +} +System(twitter, "Twitter") + +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") + +System(S,"S") +System(SU,"S Up") +System(SD,"S Down") +System(SL,"S Left") +System(SR,"S Right") + +Rel_Up(S, SU, "Up") +Rel_Down(S, SD, "Down") +Rel_Left(S, SL, "Left") +Rel_Right(S, SR, "Right") + +SHOW_LEGEND() +@enduml diff --git a/percy/TestLegend.puml b/percy/TestLegend.puml new file mode 100644 index 00000000..b33d25b6 --- /dev/null +++ b/percy/TestLegend.puml @@ -0,0 +1,65 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Component.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml +!endif + +' person legend displays the correct sprite +SHOW_PERSON_SPRITE(person2) +UpdateElementStyle("person", $legendText="Person with correct legend") +' missing definitions are reused from last UpdateElementStyle() in legends too +UpdateElementStyle("person") + +UpdateElementStyle("system", $bgColor="chocolate", $fontColor="orange", $borderColor="orange", $shadowing="true", $shape=RoundedBoxShape(), $sprite="person", $techn="my tech", $legendSprite="person2,scale=0.25") +' missing definitions are reused from last UpdateElementStyle() in legends too +UpdateElementStyle("system") + +UpdateRelStyle(black, black) + +AddElementTag("role1", $bgColor="green", $fontColor="white", $borderColor="#d73027", $shadowing="false") +AddElementTag("role2", $fontColor="#d73027", $shadowing="true") +AddElementTag("role3", $bgColor="orange") +AddElementTag("role4", $borderColor="blue") +AddElementTag("unusedRole") + +AddSystemTag("micro_service", $shape=EightSidedShape()) +AddElementTag("storage", $shadowing="true", $shape=RoundedBoxShape()) + +AddRelTag("line1", $lineColor="green", $textColor="blue") +AddRelTag("line2", $lineColor="blue", $textColor="green") +AddRelTag("line3", $textColor="orange") +AddRelTag("line4", $lineColor="orange") +' outdated: PlantUML cannot combine line styles, a combination has to be added as workaround as first additional tag +' fixed in meantime +AddRelTag("line3&line4", $lineColor="orange", $textColor="orange") +AddRelTag("unusedLine", $lineColor="red", $textColor="red") + +System(system, "System") + +Person(person, "Person") +Person(person1, "Person1", $tags="role1") +Person(person2, "Person2", $tags="role2") +Person(person21, "Person21", $tags="role2+role1") +Person(person321, "Person321", $tags="role3+role2+role1") +Person(person4321, "Person43", $tags="role4+role3") +Person(person31, "Person31", $tags="role3+role1") +Person(person13, "Person13", $tags="role1+role3") + +Person(allInOne, "AllInOne", $tags="role4+role3+role2+role1") + +Component(component, "Component 1", "PlantUML") +System(system1A, "System 1A", $tags="micro_service") +System(system2, "System 2", $tags = "storage") + +Rel(allInOne, component, "without a tag") +Rel(allInOne, component, "uses line 1", $tags="line1") +Rel(allInOne, component, "uses line 2", $tags="line2") +Rel(allInOne, system1A, "uses line 3", $tags="line3") +Rel(allInOne, system1A, "uses line 4", $tags="line4") +Rel(allInOne, system2, "line 3+4 (merge fixed in meantime)", $tags="line3+line4") +Rel(allInOne, system2, "line 3+4 with workaround (obsolete in meantime)", $tags="line3&line4+line3+line4") + +SHOW_LEGEND(false) +@enduml diff --git a/percy/TestLegendDetailsNone.puml b/percy/TestLegendDetailsNone.puml new file mode 100644 index 00000000..cc0cf7f0 --- /dev/null +++ b/percy/TestLegendDetailsNone.puml @@ -0,0 +1,25 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!endif +' $legendText with \n defines the label and details of the legend entry ("backend container" is label, "eight sided shape" is details) +AddElementTag("backendContainer", $fontColor=$ELEMENT_FONT_COLOR, $bgColor="#335DA5", $shape=EightSidedShape(), $legendText="backend container\neight sided shape") +' $legendText without \n defines only a label +AddRelTag("async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine(), $legendText="async call") +' if no $legendText defined, $tag is automatically the label and all additional displayed properties are the details +AddRelTag("sync/async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine()) + +System_Boundary(c1, "Internet Banking") { + Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device") + Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API", $tags="backendContainer") +} +System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") + +Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS", $tags="async") +Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS", $tags="sync/async") + +SHOW_LEGEND($details=None()) +@enduml \ No newline at end of file diff --git a/percy/TestLegendDetailsNormal.puml b/percy/TestLegendDetailsNormal.puml new file mode 100644 index 00000000..59f399c3 --- /dev/null +++ b/percy/TestLegendDetailsNormal.puml @@ -0,0 +1,25 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!endif +' $legendText with \n defines the label and details of the legend entry ("backend container" is label, "eight sided shape" is details) +AddElementTag("backendContainer", $fontColor=$ELEMENT_FONT_COLOR, $bgColor="#335DA5", $shape=EightSidedShape(), $legendText="backend container\neight sided shape") +' $legendText without \n defines only a label +AddRelTag("async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine(), $legendText="async call") +' if no $legendText defined, $tag is automatically the label and all additional displayed properties are the details +AddRelTag("sync/async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine()) + +System_Boundary(c1, "Internet Banking") { + Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device") + Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API", $tags="backendContainer") +} +System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") + +Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS", $tags="async") +Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS", $tags="sync/async") + +SHOW_LEGEND($details=Normal()) +@enduml \ No newline at end of file diff --git a/percy/TestLegendDetailsSmall.puml b/percy/TestLegendDetailsSmall.puml new file mode 100644 index 00000000..d4f8e95d --- /dev/null +++ b/percy/TestLegendDetailsSmall.puml @@ -0,0 +1,25 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!endif +' $legendText with \n defines the label and details of the legend entry ("backend container" is label, "eight sided shape" is details) +AddElementTag("backendContainer", $fontColor=$ELEMENT_FONT_COLOR, $bgColor="#335DA5", $shape=EightSidedShape(), $legendText="backend container\neight sided shape") +' $legendText without \n defines only a label +AddRelTag("async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine(), $legendText="async call") +' if no $legendText defined, $tag is automatically the label and all additional displayed properties are the details +AddRelTag("sync/async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine()) + +System_Boundary(c1, "Internet Banking") { + Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device") + Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API", $tags="backendContainer") +} +System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") + +Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS", $tags="async") +Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS", $tags="sync/async") + +SHOW_LEGEND($details=Small()) +@enduml \ No newline at end of file diff --git a/percy/TestLegendHidden.puml b/percy/TestLegendHidden.puml new file mode 100644 index 00000000..09275592 --- /dev/null +++ b/percy/TestLegendHidden.puml @@ -0,0 +1,26 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Component.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml +!endif + +AddElementTag("shapeRound", $shape=$ROUNDED_BOX) +AddElementTag("shapeOct", $shape=$EIGHT_SIDED) +AddElementTag("shadowed", $shadowing=true) +AddElementTag("shadowed2", $shadowing=false) +AddElementTag("yellowTagged", $fontColor=yellow, $borderColor=yellow) +AddElementTag("greenTagged", $borderColor=green, $bgColor=green) +AddElementTag("taggedContainer", $fontColor=white, $bgColor=$CONTAINER_BG_COLOR, $borderColor=$CONTAINER_BORDER_COLOR) +AddElementTag("taggedPerson", $fontColor=white, $bgColor=$PERSON_BG_COLOR, $borderColor=$PERSON_BORDER_COLOR) + +Container(c2, Container 2, tech, $tags="taggedContainer", "'taggedContainer' stereotype/tag overwrites all styles of container ($fontColor, $bgColor and $borderColor) the container is not important anymore and therefore not displayed in legend") +Person(p2, p2, $tags="taggedPerson", "produces no person legend entry too") + +Person(p4, p4, $tags="yellowTagged", "'yellowTagged' stereotype/tag first and defines $fontColor and $borderColor (in legend), 'person' defines additional $bgColor (in legend too)") + +Component(comp3, comp3, "techn", $tags="yellowTagged+greenTagged+shapeRound+shapeOct+shadowed+shadowed2", "Complex sample with all styles") + +SHOW_LEGEND(false) +@enduml diff --git a/percy/TestLegendSprite.puml b/percy/TestLegendSprite.puml new file mode 100644 index 00000000..6488463d --- /dev/null +++ b/percy/TestLegendSprite.puml @@ -0,0 +1,72 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Component.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml +!endif + +!define osaPuml https://raw.githubusercontent.com/Crashedmind/PlantUML-opensecurityarchitecture2-icons/master +!include osaPuml/Common.puml +!include osaPuml/User/all.puml +!include osaPuml/Server/all.puml + +!include +!include +!include +!include +!include + +AddExternalPersonTag("anonymous_ext", $sprite="osa_user_black_hat", $legendText="anonymous user") +AddPersonTag("customer", $sprite="osa_user_large_group", $legendText="aggregated user") +AddPersonTag("admin", $sprite="osa_user_audit,color=red", $legendSprite="osa_user_audit,scale=0.25,color=red", $legendText="administration user") + +AddContainerTag("webApp", $sprite="application_server", $legendText="web application") + +AddContainerTag("mysql_db", $sprite="database_server", $techn="MySQL 5.5.x", $legendText="MySQL database container") +AddContainerTag("mongo_db", $sprite="database_server", $techn="MongoDB 2.2.x", $legendText="MongoDb database container") +AddContainerTag("files", $sprite="file_server", $legendText="file server container") + +AddContainerTag("conApp", $sprite="img:https://plantuml.com/logo3.png{scale=0.3}", $legendSprite="img:https://plantuml.com/logo3.png{scale=0.1}", $legendText="console application") + +UpdateElementStyle("external_system", $bgColor=$EXTERNAL_SYSTEM_BG_COLOR, $fontColor=$EXTERNAL_SYSTEM_FONT_COLOR, $borderColor=$EXTERNAL_SYSTEM_BORDER_COLOR, $sprite = "osa_server", , $legendText="external system") + +AddRelTag("firewall", $textColor="$ARROW_FONT_COLOR", $lineColor="$ARROW_COLOR", $sprite="&envelope-closed", $techn="HTTPS", $legendText="firewall") +AddRelTag("plantuml", $textColor="$ARROW_FONT_COLOR", $lineColor="$ARROW_COLOR", $sprite="img:https://plantuml.com/logo3.png{scale=0.1}", $legendText="console triggered") + +Person_Ext(anonymous_user, "Bob", $tags="anonymous_ext") +Person(aggregated_user, "Sam, Ivone", $tags="customer") +Person(administration_user, "Bernd", $tags="admin") + +System_Boundary(c1, "techtribes.js"){ + Container(web_app, "Web Application", "Java, Spring MVC, Tomcat 7.x", "Allows users to view people, tribes, content, events, jobs, etc. from the local tech, digital and IT sector", $tags="webApp") + ContainerDb(rel_db, "Relational Database", "", "Stores people, tribes, tribe membership, talks, events, jobs, badges, GitHub repos, etc.", $tags="mysql_db") + Container(filesystem, "File System", "FAT32", "Stores search indexes", $tags="files") + ContainerDb(nosql, "NoSQL Data Store", $descr = "Stores from RSS/Atom feeds (blog posts) and tweets", $tags="mongo_db") + Container(updater, "Updater", "Java 7 Console App", "Updates profiles, tweets, GitHub repos and content on a scheduled basis", $tags="conApp") +} + +System_Ext(twitter, "Twitter") +System_Ext(github, "GitHub") +System_Ext(blogs, "Blogs") + +Rel(anonymous_user, web_app, "Uses", $descr="description", $tags="firewall") +Rel(aggregated_user, web_app, "Uses", "techn", "description", $tags="firewall") +Rel(administration_user, web_app, "Uses", "", "description", $tags="firewall") + +Rel(web_app, rel_db, "Reads from and writes to", "SQL/JDBC, port 3306") +Rel(web_app, filesystem, "Reads from") +Rel(web_app, nosql, "Reads from", "MongoDB wire protocol, port 27017") + +Rel_U(updater, rel_db, "Reads from and writes data to", "SQL/JDBC, port 3306") +Rel_U(updater, filesystem, "Writes to") +Rel_U(updater, nosql, "Reads from and writes to", "MongoDB wire protocol, port 27017") + +Rel(updater, twitter, "Gets profile information and tweets from", "HTTPS", $tags="plantuml") +Rel(updater, github, "Gets information about public code repositories from", "HTTPS", $tags="plantuml") +Rel(updater, blogs, "Gets content using RSS and Atom feeds from", "HTTP", $tags="plantuml") + +Lay_R(rel_db, filesystem) + +SHOW_LEGEND() +@enduml diff --git a/percy/TestLegendTitle.puml b/percy/TestLegendTitle.puml new file mode 100644 index 00000000..f47dc6d4 --- /dev/null +++ b/percy/TestLegendTitle.puml @@ -0,0 +1,22 @@ +@startuml + +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!endif + +UpdateLegendTitle("Updated legend title") + +Person(admin, "Administrator") +System_Boundary(c1, 'Sample') { + Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") +} +System(twitter, "Twitter") + +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") + +SHOW_LEGEND() +@enduml \ No newline at end of file diff --git a/percy/TestPersonOutline.puml b/percy/TestPersonOutline.puml new file mode 100644 index 00000000..1925cb0a --- /dev/null +++ b/percy/TestPersonOutline.puml @@ -0,0 +1,28 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Deployment.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml +!endif + +!$COLOR_A_5 = "#7f3b08" +!$COLOR_A_1 = "#fee0b6" +!$COLOR_NEUTRAL = "#f7f7f7" +UpdateElementStyle("person", $bgColor=$COLOR_A_5, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_A_1, $shadowing="true") + +SHOW_PERSON_OUTLINE() + +' default header Property, Value +Person(personAlias, "Label", "Optional Description") +Person(personAlias1, "Simple") +Person(personAlias2, "Simple with sprite", $sprite="person2") +AddProperty("Name", "Flash") +AddProperty("Organization", "Zootopia") +AddProperty("Tool", "Internet Explorer 7.0") +Person_Ext(personAliasExt, "Label Ext", "Optional Description (with default property header)") +Person_Ext(personAliasExt1, "Simple Ext") +Person_Ext(personAliasExt2, "Simple Ext with sprite", $sprite="person2") + +SHOW_LEGEND() +@enduml \ No newline at end of file diff --git a/percy/TestPersonPortrait.puml b/percy/TestPersonPortrait.puml new file mode 100644 index 00000000..63bf1748 --- /dev/null +++ b/percy/TestPersonPortrait.puml @@ -0,0 +1,32 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Deployment.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml +!endif + + +!$COLOR_A_5 = "#7f3b08" +!$COLOR_A_1 = "#fee0b6" +!$COLOR_NEUTRAL = "#f7f7f7" +UpdateElementStyle("person", $bgColor=$COLOR_A_5, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_A_1, $shadowing="true") + +SHOW_PERSON_PORTRAIT() + +' default header Property, Value +AddProperty("Name", "Flash") +AddProperty("Organization", "Zootopia") +AddProperty("Tool", "Internet Explorer 7.0") +Person(personAlias, "Label", "Optional Description (with default property header)") +Person(personAlias1, "Simple") +Person(personAlias2, "Simple with sprite", $sprite="person2") +AddProperty("Name", "Flash") +AddProperty("Organization", "Zootopia") +AddProperty("Tool", "Internet Explorer 7.0") +Person_Ext(personAliasExt, "Label Ext", "Optional Description (with default property header)") +Person_Ext(personAliasExt1, "Simple Ext") +Person_Ext(personAliasExt2, "Simple Ext with sprite", $sprite="person2") + +SHOW_LEGEND() +@enduml \ No newline at end of file diff --git a/percy/TestPredefinedSprites.puml b/percy/TestPredefinedSprites.puml new file mode 100644 index 00000000..f7250e7e --- /dev/null +++ b/percy/TestPredefinedSprites.puml @@ -0,0 +1,16 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Component.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml +!endif + +Person(pB, "Sam", $sprite="person2") +Person_Ext(pA, "Bob", $sprite="person") + +System_Ext(robB, "Robot A", $sprite="robot2") +System_Ext(robA, "Robot B", $sprite="robot") + +SHOW_LEGEND() +@enduml diff --git a/percy/TestProperty.puml b/percy/TestProperty.puml new file mode 100644 index 00000000..1e26913a --- /dev/null +++ b/percy/TestProperty.puml @@ -0,0 +1,36 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Deployment.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml +!endif + +' default header Property, Value +AddProperty("Name", "Flash") +AddProperty("Organization", "Zootopia") +AddProperty("Tool", "Internet Explorer 7.0") +Person(personAlias, "Label", "Optional Description (with default property header)") + +SetPropertyHeader("Property","Value", "Description") +AddProperty("Prop1", "Value1", "Details1") +AddProperty("Prop2", "Value2", "Details2") +Deployment_Node_L(nodeAlias, "Label", "Optional Type", "Optional Description (with custom property header)") { + + WithoutPropertyHeader() + AddProperty("PropC1", "ValueC1") + AddProperty("PropC2", "ValueC2") + Container(containerAlias, "Label", "Technology", "Optional Description (without property header)") +} + +SetPropertyHeader("Property") +AddProperty("Value1") +AddProperty("Value2") +System(systemAlias, "Label", "Optional Description\n(single column property)") + +' starting with v.2.5.0 relationships support properties too +WithoutPropertyHeader() +AddProperty("PropC1", "ValueC1") +AddProperty("PropC2", "ValueC2") +Rel(personAlias, containerAlias, "Label", "Optional Technology", "Optional Description") +@enduml diff --git a/percy/TestRelations.puml b/percy/TestRelations.puml new file mode 100644 index 00000000..fca7f54e --- /dev/null +++ b/percy/TestRelations.puml @@ -0,0 +1,74 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Component.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml +!endif + +System(RelFrom, RelFrom) +System(BiRelFrom, BiRelFrom) + +System(RelShort, RelShort) +System(BiRelShort, BiRelShort) + +System(RelLong, RelLong) +System(BiRelLong, BiRelLong) + +Rel_(RelFrom, To_Rel_UP, "A label", "-UP->>") +Rel_(RelFrom, To_Rel_DOWN, "A label", "A techn", "-DOWN->>") + +Rel(RelFrom, "To_Rel", "A label") +Rel(RelFrom, "To_Rel_Tech", "A label", "A techn") +Rel_Back(RelFrom, "To_Rel_Back", "A label") +Rel_Back(RelFrom, "To_Rel_Back_Tech", "A label", "A techn") +Rel_Neighbor(RelFrom, "To_Rel_Neighbor", "A label") +Rel_Neighbor(RelFrom, "To_Rel_Neighbor_Tech", "A label", "A techn") +Rel_Back_Neighbor(RelFrom, "To_Rel_Back_Neighbor", "A label") +Rel_Back_Neighbor(RelFrom, "To_Rel_Back_Neighbor_Tech", "A label", "A techn") + +BiRel(BiRelFrom, "To_BiRel", "A label") +BiRel(BiRelFrom, "To_BiRel_Tech", "A label", "A techn") +BiRel_Neighbor(BiRelFrom, "To_BiRel_Neighbor", "A label") +BiRel_Neighbor(BiRelFrom, "To_BiRel_Neighbor_Tech", "A label", "A techn") + +Rel_D(RelShort, "To_Rel_D", "A label") +Rel_D(RelShort, "To_Rel_D_Tech", "A label", "A techn") +Rel_Down(RelLong, "To_Rel_Down", "A label") +Rel_Down(RelLong, "To_Rel_Down_Tech", "A label", "A techn") +Rel_L(RelShort, "To_Rel_L", "A label") +Rel_L(RelShort, "To_Rel_L_Tech", "A label", "A techn") +Rel_Left(RelLong, "To_Rel_Left", "A label") +Rel_Left(RelLong, "To_Rel_Left_Tech", "A label", "A techn") +Rel_R(RelShort, "To_Rel_R", "A label") +Rel_R(RelShort, "To_Rel_R_Tech", "A label", "A techn") +Rel_Right(RelLong, "To_Rel_Right", "A label") +Rel_Right(RelLong, "To_Rel_Right_Tech", "A label", "A techn") +Rel_U(RelShort, "To_Rel_U", "A label") +Rel_U(RelShort, "To_Rel_U_Tech", "A label", "A techn") +Rel_Up(RelLong, "To_Rel_Up", "A label") +Rel_Up(RelLong, "To_Rel_Up_Tech", "A label", "A techn") + +BiRel_D(BiRelShort, "To_BiRel_D", "A label") +BiRel_D(BiRelShort, "To_BiRel_D_Tech", "A label", "A techn") +BiRel_Down(BiRelLong, "To_BiRel_Down", "A label") +BiRel_Down(BiRelLong, "To_BiRel_Down_Tech", "A label", "A techn") +BiRel_L(BiRelShort, "To_BiRel_L", "A label") +BiRel_L(BiRelShort, "To_BiRel_L_Tech", "A label", "A techn") +BiRel_Left(BiRelLong, "To_BiRel_Left", "A label") +BiRel_Left(BiRelLong, "To_BiRel_Left_Tech", "A label", "A techn") +BiRel_R(BiRelShort, "To_BiRel_R", "A label") +BiRel_R(BiRelShort, "To_BiRel_R_Tech", "A label", "A techn") +BiRel_Right(BiRelLong, "To_BiRel_Right", "A label") +BiRel_Right(BiRelLong, "To_BiRel_Right_Tech", "A label", "A techn") +BiRel_U(BiRelShort, "To_BiRel_U", "A label") +BiRel_U(BiRelShort, "To_BiRel_U_Tech", "A label", "A techn") +BiRel_Up(BiRelLong, "To_BiRel_Up", "A label") +BiRel_Up(BiRelLong, "To_BiRel_Up_Tech", "A label", "A techn") + +Lay_U(RelFrom, BiRelFrom) +Lay_D(RelFrom, RelShort) +Lay_D(RelShort, RelLong) +Lay_R(RelLong, BiRelShort) +Lay_L(RelLong, BiRelLong) +@enduml diff --git a/percy/TestRelationsDynamic.puml b/percy/TestRelationsDynamic.puml new file mode 100644 index 00000000..6d808e60 --- /dev/null +++ b/percy/TestRelationsDynamic.puml @@ -0,0 +1,71 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Dynamic.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml +!endif + +System(RelFrom, RelFrom) +System(RelShort, RelShort) +System(RelLong, RelLong) + +System(RelIndexFrom, RelIndexFrom) +System(RelIndexShort, RelIndexShort) +System(RelIndexLong, RelIndexLong) + +Rel_(Index(), RelFrom, To_Rel_UP, "A label", "-UP->>") +Rel_(Index(), RelFrom, To_Rel_DOWN, "A label", "A techn", "-DOWN->>") + +Rel(RelFrom, "To_Rel", "A label") +Rel(RelFrom, "To_Rel_Tech", "A label", "A techn") +Rel_Back(RelFrom, "To_Rel_Back", "A label") +Rel_Back(RelFrom, "To_Rel_Back_Tech", "A label", "A techn") +Rel_Neighbor(RelFrom, "To_Rel_Neighbor", "A label") +Rel_Neighbor(RelFrom, "To_Rel_Neighbor_Tech", "A label", "A techn") +Rel_Back_Neighbor(RelFrom, "To_Rel_Back_Neighbor", "A label") +Rel_Back_Neighbor(RelFrom, "To_Rel_Back_Neighbor_Tech", "A label", "A techn") + +RelIndex(Index(), RelIndexFrom, "To_RelIndex", "A label") +RelIndex(Index(), RelIndexFrom, "To_RelIndex_Tech", "A label", "A techn") + +Rel_D(RelShort, "To_Rel_D", "A label") +Rel_D(RelShort, "To_Rel_D_Tech", "A label", "A techn") +Rel_Down(RelLong, "To_Rel_Down", "A label") +Rel_Down(RelLong, "To_Rel_Down_Tech", "A label", "A techn") +Rel_L(RelShort, "To_Rel_L", "A label") +Rel_L(RelShort, "To_Rel_L_Tech", "A label", "A techn") +Rel_Left(RelLong, "To_Rel_Left", "A label") +Rel_Left(RelLong, "To_Rel_Left_Tech", "A label", "A techn") +Rel_R(RelShort, "To_Rel_R", "A label") +Rel_R(RelShort, "To_Rel_R_Tech", "A label", "A techn") +Rel_Right(RelLong, "To_Rel_Right", "A label") +Rel_Right(RelLong, "To_Rel_Right_Tech", "A label", "A techn") +Rel_U(RelShort, "To_Rel_U", "A label") +Rel_U(RelShort, "To_Rel_U_Tech", "A label", "A techn") +Rel_Up(RelLong, "To_Rel_Up", "A label") +Rel_Up(RelLong, "To_Rel_Up_Tech", "A label", "A techn") + +RelIndex_D(Index(), RelIndexShort, "To_RelIndex_D", "A label") +RelIndex_D(Index(), RelIndexShort, "To_RelIndex_D_Tech", "A label", "A techn") +RelIndex_Down(Index(), RelIndexLong, "To_RelIndex_Down", "A label") +RelIndex_Down(Index(), RelIndexLong, "To_RelIndex_Down_Tech", "A label", "A techn") +RelIndex_L(Index(), RelIndexShort, "To_RelIndex_L", "A label") +RelIndex_L(Index(), RelIndexShort, "To_RelIndex_L_Tech", "A label", "A techn") +RelIndex_Left(Index(), RelIndexLong, "To_RelIndex_Left", "A label") +RelIndex_Left(Index(), RelIndexLong, "To_RelIndex_Left_Tech", "A label", "A techn") +RelIndex_R(Index(), RelIndexShort, "To_RelIndex_R", "A label") +RelIndex_R(Index(), RelIndexShort, "To_RelIndex_R_Tech", "A label", "A techn") +RelIndex_Right(Index(), RelIndexLong, "To_RelIndex_Right", "A label") +RelIndex_Right(Index(), RelIndexLong, "To_RelIndex_Right_Tech", "A label", "A techn") +RelIndex_U(Index(), RelIndexShort, "To_RelIndex_U", "A label") +RelIndex_U(Index(), RelIndexShort, "To_RelIndex_U_Tech", "A label", "A techn") +RelIndex_Up(Index(), RelIndexLong, "To_RelIndex_Up", "A label") +RelIndex_Up(Index(), RelIndexLong, "To_RelIndex_Up_Tech", "A label", "A techn") + +Lay_U(RelFrom, RelIndexFrom) +Lay_D(RelFrom, RelShort) +Lay_D(RelShort, RelLong) +Lay_R(RelLong, RelIndexShort) +Lay_L(RelLong, RelIndexLong) +@enduml diff --git a/percy/TestRelationsTags.puml b/percy/TestRelationsTags.puml new file mode 100644 index 00000000..68534f1a --- /dev/null +++ b/percy/TestRelationsTags.puml @@ -0,0 +1,43 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Component.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml +!endif + +UpdateRelStyle(gray, gray) + +AddRelTag("textColorBlue", $textColor=blue) +AddRelTag("textColorRed", $textColor="red") +AddRelTag("lineColorBlue", $lineColor="blue") +AddRelTag("lineStyleDashed", $lineStyle=DashedLine()) +AddRelTag("lineStyleDotted", $lineStyle=DottedLine()) +AddRelTag("lineStyleBold", $lineStyle=BoldLine()) +AddRelTag("lineThickness", $lineThickness=5) +AddRelTag("bothSprites", $sprite="person2", $legendSprite="person2,scale=0.25") +AddRelTag("technAndLegendText", $techn="HTTPS", $legendText="Another text in legend (incl. techn. https)") + +Person(person, "Person") + +System(system1, "System 1") +System(system2, "System 2") +System(system3, "System 3") +System(system4, "System 3") + +Rel_U(person, system1, "without a tag") +Rel_U(person, system1, "bothSprites", $tags="bothSprites") +Rel_U(person, system1, "technAndLegendText", $tags="technAndLegendText") +Rel_R(person, system2, "textColorBlue", $tags="textColorBlue") +Rel_R(person, system2, "lineColorBlue", $tags="lineColorBlue") +Rel_R(person, system2, "textColorRed+lineColorBlue", $tags="textColorRed+lineColorBlue") +Rel_R(person, system2, "textColorRed+textColorBlue (first wins)", $tags="textColorRed+textColorBlue") +Rel_D(person, system3, "lineStyleDashed", $tags="lineStyleDashed") +Rel_D(person, system3, "lineStyleDotted", $tags="lineStyleDotted") +Rel_D(person, system3, "lineStyleBold", $tags="lineStyleBold") +Rel_D(person, system3, "lineStyleDotted+lineThickness", $tags="lineStyleDotted+lineThickness") +Rel_L(person, system4, "textColorBlue+textColorRed+lineColorBlue+lineStyleDashed+lineThickness+bothSprites", $tags="textColorBlue+textColorRed+lineColorBlue+lineStyleDashed+lineThickness+bothSprites") +Rel_L(person, system4, "textColorBlue+textColorRed+lineColorBlue+lineStyleDashed+lineThickness+bothSprites+technAndLegendText", $tags="textColorBlue+textColorRed+lineColorBlue+lineStyleDashed+lineThickness+bothSprites+technAndLegendText") + +SHOW_LEGEND() +@enduml diff --git a/percy/TestSequenceSkinparams.puml b/percy/TestSequenceSkinparams.puml new file mode 100644 index 00000000..8652fd34 --- /dev/null +++ b/percy/TestSequenceSkinparams.puml @@ -0,0 +1,122 @@ +@startuml + +!$UseTheme = "C4_green" + +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + ' !theme C4_FirstTest from %get_variable_value("RELATIVE_INCLUDE")/themes + !theme $UseTheme from ./../themes +!else + !theme $UseTheme from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes +!endif + +' <<<<<<<<<<<<<<<<<< PART OF THEME + +' $BOUNDARY_BG_COLOR... have to be defined in theme itself that it can be used in styles,... +' (no default values which are defined in C4.puml) +' If skinparams and styles are defined with concrete values no variables are required +!$BOUNDARY_BG_COLOR ?= "transparent" +!$BOUNDARY_COLOR ?= "#444444" +!$ARROW_COLOR ?= "#666666" + +' replace transparent with concrete background that it can be used as font color too +!if ($BOUNDARY_BG_COLOR == "transparent") + !$SEQUENCE_BG_COLOR = white +!else + !$SEQUENCE_BG_COLOR = $BOUNDARY_BG_COLOR +!endif + +' "C4 styled" default is no foot boxes +hide footbox +' "C4 styled" default is that lifeline is arrow color +skinparam SequenceLifelineBorderColor $ARROW_COLOR + +skinparam SequenceGroupBodyBackgroundColor $SEQUENCE_BG_COLOR +skinparam SequenceGroupFontColor $BOUNDARY_COLOR +skinparam SequenceGroupBackgroundColor $BOUNDARY_COLOR +skinparam SequenceGroupHeaderFontColor $SEQUENCE_BG_COLOR +skinparam SequenceGroupBorderColor $BOUNDARY_COLOR + +skinparam SequenceReferenceBackgroundColor $SEQUENCE_BG_COLOR +skinparam SequenceReferenceFontColor $BOUNDARY_COLOR +skinparam SequenceReferenceHeaderBackgroundColor $BOUNDARY_COLOR +' VIA STYLE +' skinparam SequenceReferenceHeaderFontColor $SEQUENCE_BG_COLOR + +skinparam SequenceReferenceBorderColor $BOUNDARY_COLOR + +skinparam SequenceDividerBackgroundColor $SEQUENCE_BG_COLOR +skinparam SequenceDividerFontColor $BOUNDARY_COLOR +skinparam SequenceDividerBorderColor $BOUNDARY_COLOR + +' VIA STYLE +' skinparam SequenceDelayFontColor green + + +' >>>>>>>>>>>>>>>>>> PART OF THEME + +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Sequence.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Sequence.puml +!endif + +SHOW_ELEMENT_DESCRIPTIONS() +SHOW_INDEX(true) + +AddPersonTag("chatBot", $sprite="robot") +AddBoundaryTag("chatBotSystem", $type="ChatGPT", $bgColor="lightgreen", $fontColor=$PERSON_BG_COLOR, $borderColor=$PERSON_BG_COLOR, $shadowing="true", $sprite="robot2") + +Person(Alice, "Alice") +System_Boundary(system, "System", $tags="chatBotSystem", $descr="ChatGPT with model gpt-3.5-turbo. It has been updated to feature higher accuracy at responding in requested formats") +Component(Bob, "Bob", $descr="This chatbot should act like a person", $tags="chatBot") +Boundary_End() + +activate Bob + +Rel(Alice, Bob, "Authentication Request", $index = SetIndex(1), $rel= "->(39)") + +alt successful case + Rel(Bob, Alice, "Authentication Accepted") +else some kind of failure + loop 1000 times + Rel(Alice, Bob, "DNS Attack") + end +end + +ref over Alice, Bob : init + +Rel(Alice, Bob, "hello") + +ref over Bob + This can be on + several lines +end ref + +== Initialization == + +Rel(Alice, Bob, "Authentication Request") +Rel(Bob, Alice, "Authentication Response") + +== Repetition == + +Rel(Alice, Bob, "Another authentication Request") +Rel(Bob, Alice, "another authentication Response") + +... 5 minutes later ... + +Rel(Alice, Bob, "calls via phone") + + +SHOW_LEGEND() +@enduml \ No newline at end of file diff --git a/percy/TestSketchStyle.puml b/percy/TestSketchStyle.puml new file mode 100644 index 00000000..af97c2da --- /dev/null +++ b/percy/TestSketchStyle.puml @@ -0,0 +1,28 @@ +@startuml LAYOUT_AS_SKETCH Sample +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!endif + +SET_SKETCH_STYLE($bgColor="lightblue", $fontColor="darkblue", $warningColor="darkred", $footerWarning="Sketch", $footerText="Created for discussion") + +' PNG with font jlm_cmmi10 (typically another font is used) +' SET_SKETCH_STYLE($fontName="jlm_cmmi10") + +' SVG with fallback fonts MS Gothic,Comic Sans MS, Comic Sans, Chalkboard SE, Comic Neue, cursive, sans-serif (typically without "MS Gothic") +SET_SKETCH_STYLE($fontName="MS Gothic,Comic Sans MS,Comic Sans,Chalkboard SE,Comic Neue,cursive,sans-serif") + +LAYOUT_AS_SKETCH() + +Person(admin, "Administrator") +System_Boundary(c1, 'Sample') { + Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") +} +System(twitter, "Twitter") + +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") + +SHOW_LEGEND() +@enduml diff --git a/percy/TestSystemPersonSupportType.puml b/percy/TestSystemPersonSupportType.puml new file mode 100644 index 00000000..1f397c5b --- /dev/null +++ b/percy/TestSystemPersonSupportType.puml @@ -0,0 +1,27 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!endif + +' e.g. during first discussions no sprites are available but the categories should be displayed in the UI +AddExternalPersonTag("anonymous_ext", $type="anonymous user") +AddPersonTag("customer", $type="aggregated user") +AddPersonTag("admin", $legendText="administration user", $type="administrator") +AddExternalSystemTag("git_repository", $type="web-based Git repository") + +Person_Ext(anonymous_user_v1, "Bob", "simplified version during first discussions ($type defines the role), after discussion the $type can be replaced with concrete $sprite", $type="anonymous user") +Person(aggregated_user_v1, "Sam, Ivone", $tags="customer", $type="replaced with customer") +Person(administration_user_v1, "Bernd", $tags="admin") + +System(system1, "System 1", $type="new developed system") + +System_Ext(github, "GitHub", $tags="git_repository", $type="graphical web-based Git repository") +System_Ext(gitlab, "GitLab", $tags="git_repository") + +Person_Ext(anonymous_user_v2, "Bob v2", "Update with sprites", $sprite="robot2") + +HIDE_STEREOTYPE() +@enduml \ No newline at end of file diff --git a/percy/TestTagSupportsSprite.puml b/percy/TestTagSupportsSprite.puml new file mode 100644 index 00000000..fc8678d2 --- /dev/null +++ b/percy/TestTagSupportsSprite.puml @@ -0,0 +1,80 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Component.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml +!endif + +!define osaPuml https://raw.githubusercontent.com/Crashedmind/PlantUML-opensecurityarchitecture2-icons/master +!include osaPuml/Common.puml +!include osaPuml/User/all.puml +!include osaPuml/Server/all.puml + +!include +!include +!include +!include +!include + +!define DEVICONS https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons +!include DEVICONS/mysql.puml +!include DEVICONS/mongodb.puml + +AddExternalPersonTag("anonymous_ext", $sprite="osa_user_black_hat", $legendText="anonymous user") +AddPersonTag("customer", $sprite="osa_user_large_group", $legendText="aggregated user") +AddPersonTag("admin", $sprite="osa_user_audit,color=red", $legendSprite="osa_user_audit,scale=0.25,color=red", $legendText="administration user") + +AddContainerTag("webApp", $sprite="application_server", $legendText="web application") + +AddContainerTag("mongo_db", $sprite="mongodb", $legendText="MongoDB container") +AddContainerTag("mysql_db", $sprite="mysql", $legendText="MySQL container") +AddContainerTag("files", $sprite="file_server", $legendText="file server container") + +AddContainerTag("conApp", $sprite="img:https://plantuml.com/logo3.png{scale=0.3}", $legendSprite="img:https://plantuml.com/logo3.png{scale=0.1}", $legendText="console application") + +UpdateElementStyle("external_system", $bgColor=$EXTERNAL_SYSTEM_BG_COLOR, $fontColor=$EXTERNAL_SYSTEM_FONT_COLOR, $borderColor=$EXTERNAL_SYSTEM_BORDER_COLOR, $sprite = "osa_server", , $legendText="external system") + +AddRelTag("firewall", $textColor="$ARROW_FONT_COLOR", $lineColor="$ARROW_COLOR", $sprite="firewall,scale=0.3,color=red", $legendText="firewall") +AddRelTag("plantuml", $textColor="$ARROW_FONT_COLOR", $lineColor="$ARROW_COLOR", $sprite="img:https://plantuml.com/logo3.png{scale=0.1}", $legendText="console triggered") + +LAYOUT_LEFT_RIGHT() +' LAYOUT_LANDSCAPE() + +Person_Ext(anonymous_user, "Bob", $tags="anonymous_ext") +Person(aggregated_user, "Sam, Ivone", $tags="customer") +Person(administration_user, "Bernd", $tags="admin") + +System_Boundary(c1, "techtribes.js"){ + Container(web_app, "Web Application", "Java, Spring MVC, Tomcat 7.x", "Allows users to view people, tribes, content, events, jobs, etc. from the local tech, digital and IT sector", $tags="webApp") + ContainerDb(rel_db, "Relational Database", "MySQL 5.5.x", "Stores people, tribes, tribe membership, talks, events, jobs, badges, GitHub repos, etc.", $tags="mysql_db") + Container(filesystem, "File System", "FAT32", "Stores search indexes", $tags="files") + ContainerDb(nosql, "NoSQL Data Store", "MongoDB 2.2.x", "Stores from RSS/Atom feeds (blog posts) and tweets", $tags="mongo_db") + Container(updater, "Updater", "Java 7 Console App", "Updates profiles, tweets, GitHub repos and content on a scheduled basis", $tags="conApp") +} + +System_Ext(twitter, "Twitter") +System_Ext(github, "GitHub") +System_Ext(blogs, "Blogs") + +Rel(anonymous_user, web_app, "Uses", "HTTPS", $tags="firewall") +Rel(aggregated_user, web_app, "Uses", "HTTPS", $tags="firewall") +Rel(administration_user, web_app, "Uses", "HTTPS", $tags="firewall") + +Rel(web_app, rel_db, "Reads from and writes to", "SQL/JDBC, port 3306") +Rel(web_app, filesystem, "Reads from") +Rel(web_app, nosql, "Reads from", "MongoDB wire protocol, port 27017") + +Rel_U(updater, rel_db, "Reads from and writes data to", "SQL/JDBC, port 3306") +Rel_U(updater, filesystem, "Writes to") +Rel_U(updater, nosql, "Reads from and writes to", "MongoDB wire protocol, port 27017") + +Rel(updater, twitter, "Gets profile information and tweets from", "HTTPS", $tags="plantuml") +Rel(updater, github, "Gets information about public code repositories from", "HTTPS", $tags="plantuml") +Rel(updater, blogs, "Gets content using RSS and Atom feeds from", "HTTP", $tags="plantuml") + +' Lay_R(rel_db, filesystem) + +' HIDE_STEREOTYPE() +SHOW_LEGEND() +@enduml diff --git a/percy/TestTagSupportsSpriteTechn.puml b/percy/TestTagSupportsSpriteTechn.puml new file mode 100644 index 00000000..4a543545 --- /dev/null +++ b/percy/TestTagSupportsSpriteTechn.puml @@ -0,0 +1,81 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Component.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml +!endif + +!define osaPuml https://raw.githubusercontent.com/Crashedmind/PlantUML-opensecurityarchitecture2-icons/master +!include osaPuml/Common.puml +!include osaPuml/User/all.puml +!include osaPuml/Server/all.puml + +!include +!include +!include +!include +!include + +!define DEVICONS https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons +!include DEVICONS/mysql.puml +!include DEVICONS/mongodb.puml + +AddExternalPersonTag("anonymous_ext", $sprite="osa_user_black_hat", $legendText="anonymous user") +AddPersonTag("customer", $sprite="osa_user_large_group", $legendText="aggregated user") +AddPersonTag("admin", $sprite="osa_user_audit,color=red", $legendSprite="osa_user_audit,scale=0.25,color=red", $legendText="administration user") + +AddContainerTag("webApp", $sprite="application_server", $legendText="web application") + +AddContainerTag("mongo_db", $techn = "MongoDB 2.2.x", $sprite="mongodb", $legendText="MongoDB container") +AddContainerTag("mysql_db", $techn="MySQL 5.5.x", $sprite="mysql", $legendText="MySQL container") +AddContainerTag("files", $sprite="file_server", $legendText="file server container") + +AddContainerTag("conApp", $sprite="img:https://plantuml.com/logo3.png{scale=0.3}", $legendSprite="img:https://plantuml.com/logo3.png{scale=0.1}", $legendText="console application") + +UpdateElementStyle("external_system", $bgColor=$EXTERNAL_SYSTEM_BG_COLOR, $fontColor=$EXTERNAL_SYSTEM_FONT_COLOR, $borderColor=$EXTERNAL_SYSTEM_BORDER_COLOR, $sprite = "osa_server", , $legendText="external system") + +AddRelTag("firewall", $textColor="$ARROW_FONT_COLOR", $lineColor="$ARROW_COLOR", $techn="HTTPS", $sprite="firewall,scale=0.3,color=red", $legendText="firewall") +AddRelTag("plantuml", $textColor="$ARROW_FONT_COLOR", $lineColor="$ARROW_COLOR", $techn="HTTPS", $sprite="img:https://plantuml.com/logo3.png{scale=0.1}", $legendText="console triggered") + +LAYOUT_LEFT_RIGHT() +' LAYOUT_LANDSCAPE() + +Person_Ext(anonymous_user, "Bob", $tags="anonymous_ext") +Person(aggregated_user, "Sam, Ivone", $tags="customer") +Person(administration_user, "Bernd", $tags="admin") + +System_Boundary(c1, "techtribes.js"){ + Container(web_app, "Web Application", "Java, Spring MVC, Tomcat 7.x", "Allows users to view people, tribes, content, events, jobs, etc. from the local tech, digital and IT sector", $tags="webApp") + ContainerDb(rel_db, "Relational Database", $tags="mysql_db", $descr = "Stores people, tribes, tribe membership, talks, events, jobs, badges, GitHub repos, etc.") + Container(filesystem, "File System", "FAT32", "Stores search indexes", $tags="files") + ContainerDb(nosql, "NoSQL Data Store", $tags="mongo_db", $descr = "Stores from RSS/Atom feeds (blog posts) and tweets") + Container(updater, "Updater", "Java 7 Console App", "Updates profiles, tweets, GitHub repos and content on a scheduled basis", $tags="conApp") +} + +System_Ext(twitter, "Twitter") +System_Ext(github, "GitHub") +System_Ext(blogs, "Blogs") + +Rel(anonymous_user, web_app, "Uses", $tags="firewall") +Rel(aggregated_user, web_app, "Uses", $tags="firewall") +Rel(administration_user, web_app, "Uses", $tags="firewall") + +Rel(web_app, rel_db, "Reads from and writes to", "SQL/JDBC, port 3306") +Rel(web_app, filesystem, "Reads from") +Rel(web_app, nosql, "Reads from", "MongoDB wire protocol, port 27017") + +Rel_U(updater, rel_db, "Reads from and writes data to", "SQL/JDBC, port 3306") +Rel_U(updater, filesystem, "Writes to") +Rel_U(updater, nosql, "Reads from and writes to", "MongoDB wire protocol, port 27017") + +Rel(updater, twitter, "Gets profile information and tweets from", $tags="plantuml") +Rel(updater, github, "Gets information about public code repositories from", $tags="plantuml") +' don't use the default techn. "HTTPS" which is defined via tags, define techn "HTTP" too +Rel(updater, blogs, "Gets content using RSS and Atom feeds from", "HTTP", $tags="plantuml") + +' Lay_R(rel_db, filesystem) + +' HIDE_STEREOTYPE() +SHOW_LEGEND() +@enduml diff --git a/percy/TestThemeC4_All.puml b/percy/TestThemeC4_All.puml new file mode 100644 index 00000000..5f6986a6 --- /dev/null +++ b/percy/TestThemeC4_All.puml @@ -0,0 +1,95 @@ +@startuml + +!$UseTheme=C4_blue + +!if %variable_exists("RELATIVE_INCLUDE") + !include ./TestThemeTemplate.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/percy/TestThemeTemplate.puml +!endif + +@enduml + +@startuml + +!$UseTheme=C4_brown + +!if %variable_exists("RELATIVE_INCLUDE") + !include ./TestThemeTemplate.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/percy/TestThemeTemplate.puml +!endif + +@enduml + +@startuml + +!$UseTheme=C4_FirstTest + +!if %variable_exists("RELATIVE_INCLUDE") + !include ./TestThemeTemplate.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/percy/TestThemeTemplate.puml +!endif + +@enduml + +@startuml + +!$UseTheme=C4_green + +!if %variable_exists("RELATIVE_INCLUDE") + !include ./TestThemeTemplate.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/percy/TestThemeTemplate.puml +!endif + +@enduml + +@startuml + +!$UseTheme=C4_sandstone + +!if %variable_exists("RELATIVE_INCLUDE") + !include ./TestThemeTemplate.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/percy/TestThemeTemplate.puml +!endif + +@enduml + +@startuml + +!$UseTheme=C4_superhero + +!if %variable_exists("RELATIVE_INCLUDE") + !include ./TestThemeTemplate.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/percy/TestThemeTemplate.puml +!endif + +@enduml + +@startuml + +!$UseTheme=C4_united + +!if %variable_exists("RELATIVE_INCLUDE") + !include ./TestThemeTemplate.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/percy/TestThemeTemplate.puml +!endif + +@enduml + +@startuml + +!$UseTheme=C4_violet + +!if %variable_exists("RELATIVE_INCLUDE") + !include ./TestThemeTemplate.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/percy/TestThemeTemplate.puml +!endif + +@enduml diff --git a/percy/TestThemeC4_FirstTest.puml b/percy/TestThemeC4_FirstTest.puml new file mode 100644 index 00000000..5ad4e349 --- /dev/null +++ b/percy/TestThemeC4_FirstTest.puml @@ -0,0 +1,11 @@ +@startuml + +!$UseTheme=C4_FirstTest + +!if %variable_exists("RELATIVE_INCLUDE") + !include ./TestThemeTemplate.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/percy/TestThemeTemplate.puml +!endif + +@enduml diff --git a/percy/TestThemeC4_united.puml b/percy/TestThemeC4_united.puml new file mode 100644 index 00000000..57b6c7ec --- /dev/null +++ b/percy/TestThemeC4_united.puml @@ -0,0 +1,31 @@ +@startuml + +!$UseTheme = "C4_united" + +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + ' !theme C4_FirstTest from %get_variable_value("RELATIVE_INCLUDE")/themes + !theme $UseTheme from ./../themes +!else + !theme $UseTheme from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes +!endif + +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!endif + +' LAYOUT_LEFT_RIGHT() + +Person(admin, "Administrator") +System_Boundary(c1, "Sample System") { + Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") +} +System(twitter, "Twitter") + +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") + +SHOW_FLOATING_LEGEND() +@enduml diff --git a/percy/TestThemeSupport.puml b/percy/TestThemeSupport.puml new file mode 100644 index 00000000..0ec8f506 --- /dev/null +++ b/percy/TestThemeSupport.puml @@ -0,0 +1,19 @@ +@startuml + +!$ThemeToBeCHecked=C4_FirstTest + +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + ' !theme C4_FirstTest from %get_variable_value("RELATIVE_INCLUDE")/themes + !theme $ThemeToBeCHecked from ./../themes +!else + !theme $ThemeToBeCHecked from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes +!endif + +!if %variable_exists("RELATIVE_INCLUDE") + !include ./TestAllElementsWithLegend.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/percy/TestAllElementsWithLegend.puml +!endif + +@enduml diff --git a/percy/TestThemeTemplate.puml b/percy/TestThemeTemplate.puml new file mode 100644 index 00000000..70a69055 --- /dev/null +++ b/percy/TestThemeTemplate.puml @@ -0,0 +1,29 @@ +@startuml + +' please defined $ThemeToBeChecked before the file is included (sample see TestThemeC4_FirstTest.puml) +' [At]startuml +' !$UseTheme=C4_FirstTest +' !if %variable_exists("RELATIVE_INCLUDE") +' !include ./TestThemeTemplate.puml +' !else +' !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/percy/TestThemeTemplate.puml +' !endif +' [At]enduml + +!$UseTheme?="C4_FirstTest" + +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + ' !theme C4_FirstTest from %get_variable_value("RELATIVE_INCLUDE")/themes + !theme $UseTheme from ./../themes +!else + !theme $UseTheme from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes +!endif + +!if %variable_exists("RELATIVE_INCLUDE") + !include ./TestAllElementsWithLegend.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/percy/TestAllElementsWithLegend.puml +!endif + +@enduml diff --git a/percy/TestVersion.puml b/percy/TestVersion.puml new file mode 100644 index 00000000..88e0dc08 --- /dev/null +++ b/percy/TestVersion.puml @@ -0,0 +1,21 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Deployment.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml +!endif + +' existing plantuml version as text +%version() + +' new C4-Plantuml version as text +C4Version() + +' new C4-Plantuml version details (incl. PlantUML version) as table +C4VersionDetails() + +' version functions used in e.g. footer +footer drawn with PlantUML v. %version() and C4-PlantUML v. C4Version() + +@enduml \ No newline at end of file diff --git a/samples/C4CoreDiagrams.md b/samples/C4CoreDiagrams.md index 69ac13f0..ed98e4e7 100644 --- a/samples/C4CoreDiagrams.md +++ b/samples/C4CoreDiagrams.md @@ -1,6 +1,23 @@ # C4 Model Diagrams -The following samples are reproductions with C4-PlantUML from [C4 model core diagrams](http://c4model.com/#coreDiagrams) created by [Simon Brown](http://simonbrown.je/). +The following samples are reproductions with C4-PlantUML from [C4 model core diagrams](https://c4model.com/#coreDiagrams) created by [Simon Brown](https://simonbrown.je/). + +- [📄 C4-PlantUML](../README.md#c4-plantuml) +- [📄 Layout Options](../LayoutOptions.md#layout-options) +- [📄 Themes (different styles and languages)](../Themes.md#themes) +- samples + - [📄 C4 Model Diagrams](#c4-model-diagrams) + - [Core Diagrams](#core-diagrams) + - [System Context Diagram](#system-context-diagram) + - [Container Diagram](#container-diagram) + - [Component Diagram](#component-diagram) + - [Supplementary Diagrams](#supplementary-diagrams) + - [System Landscape Diagram](#system-landscape-diagram) + - [Dynamic Diagram](#dynamic-diagram) + - [Sequence Diagram](#sequence-diagram) + - [Deployment Diagram](#deployment-diagram) + - [Styles](#styles) + - [Icons](#icons) ## Core Diagrams @@ -8,20 +25,19 @@ The following samples are reproductions with C4-PlantUML from [C4 model core dia Source: [C4_Context Diagram Sample - bigbankplc.puml](C4_Context%20Diagram%20Sample%20-%20bigbankplc.puml) -![System Context diagram for Internet Banking System](http://www.plantuml.com/plantuml/png/VLF1Zjem4BqZyGzJBgKI2vUUUjfT6hKh0KKBgEefcZX3i71iP4yA_7t78Q51qDxiyPitxxsHdmEZvweq_Tu7RPMfSggyWHtp8NoPJ3mUnuNcNPLLWRnobidoMBboyguL-jmjD1t8JAQVdvO6BM_ciqc9WSbBAPr6_8d7Xvh_8rHMEajX0DuHR9qnxgXj0KPR0hGvt3nh7-JaG2Q3SGgDEKUILYRS3UZtPY-_VcpMwS-tzVTqbdnB5bzZbJKRWjLPP9NGj42kiV1OYWeFRrBobXXUqUwZe0iszYx91sU7gWhiIl8Z65mgQAxWQVCsaCSNQ97WjhMDJ50ZE4g6S6WxOmrGALTP3kF1ftxlCd2ONIZJK5-5xn_Awb4nlN2T5s9KlpKTGLlnL29hPm4pLzLnQdyxTLJdNUAUu83d6Ff5I2ibJKuyB56RlrgIftY7S5Mm5dkw5YYUvbfv5zoM8Jcf7Tg2WBeD7PijjztA0aY8vktvWSqLEqy1PFjjeaeAq2JrmEmra577B7kq0LM4oOrODMRVoNHsUnV_9b28G86bhwZs7UnjDYkoUMWCnqsqJGlInIvp_cwp_sclNS_NouRZKUirkLRWin387_W3 "System Context diagram for Internet Banking System") +![System Context diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/VL7BRXf14BplLtIu14iyBZdbP9kWn18uA82Yd5QzGmCZve6cUmFyVNgNPGF1yMscfwgwgkQH1PEKtcKVR32kN15iHVRyUJXCU1Xih6pBecHA9WQX80CJ_N3lC5ISFilAsM8u-jIVLQFbT3Bqo499H_ceOXnbiA_KFq8PbEfL0cHBi8xEnOCD6t0s461OmSspJQod2BeQN3Jet4arMe__ocUJfr_VbulyvylYMpuPVns_Vka-P9bOSGJp4mjvQ0YmihX9wDL2WXSTfK02pnXswgR1PjcC4iVGDILBz9Hwq3bFqBNGKVFMqSSdk20Xhki4XQ9wSD3-ODymwncWCR4CmeFEGtRUrYtEYZdNLvNxZwrwKzKRj-kuAkctfGFOe84yYeq1i8XbNQHDjqjxTTCUTmHxF7bgV3H6yl5HkXwj--jatA_kmEt-XMQpjJrqCBKcHOvhWV7HR35i2EYQq6PifSDQgoVLcLxERsISIqp4WCvTsZGwWAQcDvAsRVIkaah2m6WgcDv8J9tq1xchNxrhVid42bDK_encTmMzxMLEOSLDM0Q93UULx6PRn7JtfU-mwyJJnUmiSSziIslTFIgzzEuF "System Context diagram for Internet Banking System") ### Container Diagram Source: [C4_Container Diagram Sample - bigbankplc.puml](C4_Container%20Diagram%20Sample%20-%20bigbankplc.puml) -![Container diagram for Internet Banking System](http://www.plantuml.com/plantuml/png/pPLjZzCu4CVVzrECojlssbrWsKFTYZwmEX2zwrrw1n8WD4ccgOLZHxQpfHnyztDSDoJhLjp3eYChhTePpzy__psPFj46bIbptj7lcIXGOGufhR7aPaKVp8IpJEGa32Js7wd6ggt2uYLBpGREXyD6FCSF2z8QCuhOHuApXysaeiIWo3Z1dnsmJsGrIPfTGTTIc7t1kSle3QPooqG6Q-IQEf-RW6WmHltVH2PAoQrNc4ak5ToxS8-BL4fXjAd_-TYnHgDObY95jHkF3tHjXbF4ms23MnWFtEEYKwbIKgVYaTbnWXJrXj9Jb0KfBOLZ37cyyBLxQemmEiNaVQQgy_hSyFB1-QDfY3XyT7zwSNsAnROPAO7ytRU1khYi_aAeoqdrTmfAxxIX_AvPpiukBgVpaEN-xD7rRFXLWxuDr8_kEMrG-E9z3_vubE_4dk3E4YkEJ92wQvm7zo_dyuV_qAB_ZyR80eo4M1eZBH6hB69IT3Oi9T0rH8TJHY85nRADwNowWjPZlw_i8lZK-JJoGsRiCx0V6YxbN_KwTMYCvXhVOcEtODymBkwlEQXjhl6dtTVMbjgK9T_pTmmpd61MvrA6MNKLQwdWcQWaoLWNXRsZ328dtQcx1hfNLxDIMwD8lH5l14mWyLz1hi5i269RseCjCnj_AEGk1fWazbgCxa9ZkAEk1Tgx12Ylzonlkz3y1NC2PxvZMW8lAOP9KN2Me67IiWu68yq-qkEpy_7hvtY3FOWALIal_fYz7Gsgt7WmSAUQ4sSt5j4TI1iha3WtIHX0aRfm3HWVl5fEkj1kP0ktfVWT5aN85x7gKt-96LMS8L-KA5QO7an4Ld9Kjn2NIjwmb3GWvyTvrgLmZOoScHqOQOrsFckuOLYLC5NHGQpaLfCwmguB3BaNCcRy2FBiNWzUOOwAYPEem5dE3AMWorXRLBd-s-WwOC_t82dTi8H2Uf-lpVUZnfrXxZ-tJn3z-W8EcLj7Y8nKfA7Kf41HnhHHQFc0YRLKkMkm7cniNGfOcWqaYb8IXY7NlQhnIMlWChDVo2G_XB0rNUZtPFdiQtqybybxKlKxVQfLlkApizRkTeGkHhk1IAsNp0xC5jxJ_W8PzuF2RRVQ433XPzE29KfgkJRmz4EoiLNanrKNmfz5jnVbo0wHzbPs8x5McDEjyTIy8UJyq5M93TGdRLmKO2nBywMbUlLawe5HA3GwJ_nTdUJqoWVIWnpq--F3Im-FA-ohtpNfzhNzj5ejeo-tr6rNwmB_NMMZvHi2tSu1fwNjPvnDsvYhRjpooVrHxqJIW-VHBpyF0fR6zdUYLx-oe_uHiTy8Kmrh9NCtaxUA6T9WP7i3hp-VpewvPfNxhOxpsX49gqtzAbDfTZlDHROg00gAIir4TembMgoMJPQca7MjtLTDumAjWNVlrU95QDuJgrdc_2y0 "Container diagram for Internet Banking System") +![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/fLN1RkCs4BtxAwRfeLv0Zb6WfvxMiOrkjdRYhfncUn96rDWcbY85ScIlKVJVErGKoN8MM1IzaKypRnxV3AdtWT5pNPhH3zegKnS41-Og_3gTUZpTxZKVwhmEv9MpJ9PlbIkdbK4RSoQ12wFpwVoNoIP2J-lLjCJ0v0NAvfA1sfA_hIB_Jr1RIIw51FX0i7F6k9EsUp0I16WB67pMFiZAWHG7unGQSnQEJkNR0l9rDVlhyMcRRHytsUBn-M7yhiTcQPR-ljpEFmZOGi_tsm_PQldRyc4Xu8Wr6uAE50gDUu-b2FLmRvcy9OOxj5-YvlGScChHQ4C-E3jMTM1NaazWtgrkPl0AWzirXyebEu6Jc0fLauYcmG2LShNbS2CwNgYpEm4AzEUn-bcuhWNSl8E_Hm3GwnsVAC-mgYJucNAOLPNH2baxUoFGHpnY0cdbe_Zrd_E8BSZeeyXef0MMM0LjcsCx6hYhcxyUV3CJaSFAeKAXI-MpeSa6znIhlrPDbTSL9p2p-zgWZ_36kwCkA00Qy-qgEvcLA1sDvZEmwvmCSDGOSxG7EJ3atfq2-JUIIfThGwqVwxZfHCr_JE0pbYXM3CM0qQLcAY3KUI2MflqFSIy2eA2ZLdGjRv6F2sJCCL3iGxkCQj8_LZ3Oi_EYBTv0yBJNWNtJKz1Mvh9irWaSC1n4DzPy0EMf8CiQJKZYN548ODnUDiJgzerHEQelP0jnIiUHtTn_Ut8MJi9ydpTmxZiEHLE4M4h_qqttyYkFgKHjij00GhUSh6NVtgp8lnNpTKED1jPQUHVSZc7vLHtGxWbUCeNsWhDLqBCAfzrvBEdgwlRcDbFOzbe9q9tYmcB0tDNSDphfRcm2xD46RCxRcppwHERYLUZlvbEW46j_s6utgGGEuqA5turfHxkdQyjb3wJtXzprBq53rz_pbga11stl2c8uMvN0n_JnONfPl2_v7pEpEudkXVL3FsJvH5W4s7bNDW_FoMkc0EmYSqkyk9iBPSTvuSVL6AL26u0c4MquUY5N4pVKCCohWqn0NpvTRpT2D71va3wSkzwO9d_QklDvlUhCUI-fyQ_rBm00 "Container diagram for Internet Banking System") ### Component Diagram Source: [C4_Component Diagram Sample - bigbankplc.puml](C4_Component%20Diagram%20Sample%20-%20bigbankplc.puml) - -![Component diagram for Internet Banking System - API Application](http://www.plantuml.com/plantuml/png/nPRhRzis4C2_-wyuPC0-9RFpzeh4g1ymrcBPWZZR2hJ5S1BFCbUA54WghhlaVnybognbMLYRj0ZpeHBlSRzxdEgNngAsUIewvWEN6MfCWT4SSs5lwQCT2fx8bAI5cAGblQ6rr9ZznPbTm56ljt6VuiShCWOJcl5F18Udcq9DiKMP289_E-3EpFaaPLSPJPMqtk2eb9W5ChNaCe4v2aETXqr0j1YXUPgJeTPgMNaOAw4q_71MdlAcyBJpDlX_s9NMnKMaSibGhmQ3DLsTeOsurmYmXN5Idl9sf3GZtNO_ioj1mD0iYBLHPgIDafwnmLCvdfOdO3HlHnX_I7IHRoNhzK-EpaTDnDxvyUXisiRYneoqHF7tzu4wwnT_JQZ-iFXhWp8hOodzrYo7XsVzqQJ9SZm-duvx_rkWxmFrStdQ2zHSlEUlJq1vxlAqzInspf5BqjyQv-IuFvcSVcM9dfccMPmqKvAaVGnEhpoxSVgdez6qryGvTwsQz5kByrmq2yu8J0ZM4PIGPA1vih2T-qke7VT-wvJWldD_KNrf1vK4_9VJY_ptBeZMsr7JyNisA1NyrlXxF-iDsvgERxct3NFbHJvXBmfLTIAIpAVMiTmAWd6GCOv9qOsvql1A5j78mWYbQrC2Cn_r08RNhs2OPOB7QBcIdJ1Ai7TvEUFbqpKcjAdqJdQx5uP_eXU7HuEt_-0TcbZpp09A1iuu5wZVNtGBZK6t-yxfmxLMTvoH0HG2x8A0hucYYcYUoxXmZeBR5LW5SMwiIaaRkEDOs70DIueWqcffIF-q1_NbGmCcmte2LohYecIlCx_153MNhP0WUCejCJ1vPCY2ia-0JZr4zG-ZEnxJBleKEzNcbEoJwhbEVaC2VKHOAy0iNb2AMydChD9a83UaGLF2ZTMb8N3f9Y8jd_TXKVwK0SmTghHLVo7Mn8fN56OVC8x9610gSIzaurteBDggExee6bFQ6hX0Las2cfTrZTr5gEa67s2aSXkAwc5KBgrxiXgbmRBwWQlv7vOlR6JgU5j33s_7wtJUEoVXTwQtnenNtwwjtKYasoieJBKIWdIzKLT_Zk66ZFsiiDMWeH1gwHjaYj4nXKCktUFkMVCPxK7zgugcD6po3QjAmInFKvVCeq73McmCzvBR1I0OvrhfLTL6halMqACcQX3jA2V5kUQsmAmiwfIpJ1T5616sRcrz6NMnACHyPMNY9siVuWNwbmoDMIhDml0qwreXDM7RnXkc62EZBoKVmhpK1oMhfgV1SRth3Jm_rTwyuFFJSt0m2DJmeY2z_CEGsIiqGkrBhM3SK0lsXHgBAlaD8OCVOUaa15RLCtmz6Oq_f-RTX03hS1k1wjPlhdxj_d9xUptRTF7GCHaMfZwnDjlNizz_QnW7qv3nrvcdZmwSFYdkIv8iJyL_ "Component diagram for Internet Banking System - API Application") +![Component diagram for Internet Banking System - API Application](https://www.plantuml.com/plantuml/png/fPHDR-Cs48Rl-XNJ75e7IE9BJpsjuwJTB9AD4JlzE1aZSYonvOT0KdQDel-zGyesRISe0kn953cSUUQTL_eK8lhO6rrzfwpGlIHeO-p2J-EnnyrDesBRrtqWBvoDPEEDS6RSQRJfpdM8KgjwFFtnUfQsNfyUnmP39CzRowapdRFfJfVo_m2zvSk6Do2s12kdjTiesu1MbW2jX9DZvGEl771nq4wWrblESQ1yMw1wdFpn_BfO_lQm-BnylF_b_klTwBAgeegQu10BKc7ZqN1z3m-MMIr5k4NxLqAPRvdUm3LCPWymwJgj14RbR5LDkNzaK3yA7Lx1nPp3EUyC6peElE2ZFt6DGNZLnTmLsgRNwDF9pBkraXG0jSvTgZr0lGDOiKWf3seLjwbzqOVe3Fa0QuNfZlAmeHfgxpQ1_Ct5vH6QIMHFhbOwGwMIlwD1h-nfTT3Ag4WIGby7hkxYDz2ON6__aBHMWawmxkgHhBd-7KQiCL1YUI6DGsRORyDSj6GmdSwZyyoPV0UU6XMYpz5Co6CpUNq5BOQM963F73Rk1W32aqolgCCLe10K0cZNy0j5aRY66I_l_uuZKuSa679QZuRER518yhpSAeiaUECWq14FOEtwM1JAnLrl8wyOtmRCKXQE8j3obkCa-kq8EyL5pyntSGd_L01GJ3mAgh69ZXziOaYPlDEQiikUVft22uLujZr9tziWQaYpJ3b0MLw-F_mmY71vLlhG5MVSBM7U6yFu7-8eDYncsgZO0aBOfHcKLZwZ76HyGn98z9wDcOJOBSjf7bxdKoEtX2V-FxErJrOacINXy66iLo1Q75uw367Zl2oJEyLW4wrGeAJ_iHByd2FUWPh0S1cStGt2x7ESJI9LpgLVIEyCSAJ0Qo1Mw71UfbJmtWILwxBEtoHA-1usl4KGNQBxSdSxBHUEM-NbFc7wo_2V__DYCPjpyBzLbMBpRp9Zbh0ly-Ul-xWIL5ZV3yoHvWFPp0UIVI8hUwF_0m00 "Component diagram for Internet Banking System - API Application") ## Supplementary Diagrams @@ -29,5 +45,40 @@ Source: [C4_Component Diagram Sample - bigbankplc.puml](C4_Component%20Diagram%2 Source: [C4_Context Diagram Sample - bigbankplc-landscape.puml](C4_Context%20Diagram%20Sample%20-%20bigbankplc-landscape.puml) -![System Landscape diagram for Internet Banking System](http://www.plantuml.com/plantuml/png/jPPTRzis58Rl_IiEijjuTj8koGh7g9sFhS2o5hE3N2H1S28UIuGbKYFfEkxI_pwIfZGgiZ8KQEahyNoSvxnw8-IzDgZCgiXxUib5YGeBOBJ0LMxcz6GcEKz5GS90GiAGYhBM2iiRpam6XyDXT5_WqnLfZIdD-1U2Wr_YeAB4e4XpWdzwOC_Ca29fDYLTIc6s1OS-eZDaSir52WlCDVM-HbqcIibrw70cSwdWfoD__8thrBwD-t_THJGQFSgLOAWsut55rsJe8Xws1hp0UEkFlvrAnKXrtS_C9YTWg3DY3SeIaoMcRSPEdc-OtoL7IKfBqJ4eTBZqnyTttqujUAeST8WDJzuU7a_RBCFZDzEZoouMQqLI0lE77mDrTE9-RQYJYVjrGUcDDbHyRvQ3WwEJwNcRvStPyUNPy7y5-Z5Gl_hpYa0PPmIw7jRBAIN1GF4qCxtdKsWS-potIV3SUnu5Gun31BOls8V2Qwb3rOvnJf1hx1Esk_lxGDokhNCitXQoPxZ92MRRm1yec4xGqZ6EgLDv8HLCUMf54KieywHNomvxfwUVF0lcFkm-5MShRMH1waxS2PX04Xv1Bi1a18ysRH_Mt6HGXb9_1vWaLd2ZVzw3w6yFTTsXEJScWjiBOKYLYckwtuFuA-4R38CP6Wq-k191fW8F0conyrok_vkimKZup6aDN5Wr2ZHS2a0xnRYTk6fki0ye61Iu92XnKr2rL6rDrBx03WrsRTDDvbTT95uyfd0D2UhCTswx7pMWsT7tebyWhrpW9ymp0Yw2EwvuegIM2mCNJqbcgmWehkYUvf8wjxb2Avp2WdQ9FJDIaGRCyyeZYRse5DeXUIt6VYIvKIWq9YxDFf59NaCDD6tGohmm8_MP9sJXSB7mc7L8Xv1s8VyokAYjtPowoyOFeRuzt7rruEDYqPmxOGKNN1iL910CzAeifJBVIl1e-pz8tzz-iIeUw8zVk17UEPhJQqrwBqhxwyDllyzjCfeguoOOKNidmahR7b75gD-FRH6APYIO3gvoTjunegLLA9tefOQ_LwIT4gxsJWm68ys_qBk3m_7jd78gCodeVZHmb-F1OA_tOhN--SURF-s4rxcgLTogDLHjcqYVTl_NirkB1PwEzEYDGV_wKqTUuBpDE6Caxi_xq8HgXUilQgn2dN0T9RmdmTm_n_y2 "System Landscape diagram for Internet Banking System") +![System Landscape diagram for Big Bank plc](https://www.plantuml.com/plantuml/png/TLDDSy963BtxLwXSGcO8zD1JJ-63QJA5a0amcPuyorh6EwnttTKwXEdqlrThRDS4k7cbfwVt9FcPl72-p7NqYp9Ibmb2vdr1luz6JXo7U-MpSbSIEccDH-E7qkQZGWiJQfx89rhjHjFVdjv3QBjSZ7917Xs7ucce-FR38h0_G6cuD6SAy1b2QhMsHsNse9L142Q1YxHon5yMk3LeAuNM9-PeDVwaZnuMuxzMsqsyMRt7izNdM_-n3OtNyVhF-MRwmh4wzFcwUOaNyp_cRpCEHbvvZR0-iV8S5go5f2WG4YNsJkIirS54xM4Yp04ABQFe7HrPqvSbUPkZ6q3l716w0WLRqphNu-GO6YJOjFAtOzG0ZZnTA9hA40CXfIsDfs6FTStPeIkS8emd74s4E_NbhqpOLTDxX7yY0AZrztTd0J5LJmQ_1XQ3lf5M0ojXOGdKggCmyI-5Hr26JUV2Asj0x6nPRKMvIus3QcsvE20KufHZBRiZ9fv_-xxmUMYrMTxh6CQGyBM159Gnmq-2N2ZzlvtvKtW3jIOs6OAgF0eDIoMT9Pjwc7_BJ9Wz0dOBRWdaj4cTo979bittZMcjlNL88BHkrYWv0FN0RyoiTJdepCmxOKZ80ECNUjbAEjzG9QcfZ0dTbv91MNDGi3w7OEr5clQwcHeC53BLM9LfputR_Eoo4_8GspGzDvZm2rRywdAFarmPHTxLlam2L1Q5TVv-bt-Zw0Dr_8Pgd-siw_mcLxUv9IIk2F2F3kvyCf_rNL1r650IbzRWeBM3lxoGDPg4whM70-EQgmut1Zoc0y7V9L9m6kgguqADHMODDYIpgn_iVlEkPEvUkUeUMzVz9UrzuEpwDkv1j-s2xw6YXJWnOoNiilzbhcdv68BCsxNSIJwpzpBN_m40 "System Landscape diagram for Big Bank plc") + +### Dynamic Diagram + +Source: [C4_Dynamic Diagram Sample - bigbankplc.puml](C4_Dynamic%20Diagram%20Sample%20-%20bigbankplc.puml) + +![C4_Dynamic Diagram Sample - bigbankplc](https://www.plantuml.com/plantuml/png/NPDBRnD13CVl-HIcfmIrYO2Ua13Dew95VKHD2k8KUMUTtH7pMDdUHX7YkpEpIPKkDu_7zlytV-zUYI9hwztWdGt6jIL1hTh8vyc4SJUkhDPjqGgnYK4fwDX4FsaSXjnp8LewMqpcbnVBd7g-lvju52LEgSrY7z1RCsxozC7TzDVZythpytPzixcx_dRzi1YE1eDvcees42-AeRayXxC5AXOeT9RY9tAeDWPqy9g6bQd9OxvTQMGIo6p0L5bHxgh1XcratyNdKAFKL0AsMbDGQmubXgdCHtHo3cWCYO2BLJgGcl7PwCGrD1-obWsLeuibLWJJfd77EHdZExxWoh1j532KC0rLwv3ppPBZYor909s3k8L40BT1YGCf51X-fw6mROCvlD7g7ZI2QKMZ9nPuiPXxBCEE2YWuxeIu1xUPnJQKoFjXaVIcoziUt0Z-303cqJSnKD2X-PHVGgRb97NATrusd65cXA57tgVhza5bfXHRXTnXayMcnb3bGuCYkyZboSQU_CSibFgI2P2VmD4vuZVozp_cIKFqlzkfSt5tMBIyQYVX5FOjdHqjNUr5oMVvluE4l7dgTdYGRmjlLTxk7pHsQrmzFankrklbAlMbhWwtSsoEBbLPcPu-8Ig78yWE7-Vdkkxh5N9a5Dx3bgC_4kzgOkhYW9xW2tpjz1QpUUg_eb3ct-CV "C4_Dynamic Diagram Sample - bigbankplc") + +### Sequence Diagram + +Source: [C4_Sequence Diagram Sample - bigbankplc.puml](C4_Sequence%20Diagram%20Sample%20-%20bigbankplc.puml) + +![C4_Sequence Diagram Sample - bigbankplc](https://www.plantuml.com/plantuml/png/NL9BRnCn4BxdLmmv1PGc0df2GZIFYXRr4NKB7ADPxsJNmXulzhXH_psURQE6tEnvV8_FlaY2KR9tetUMZSiDGIVIfo_pUSJzhBNIvJedYYQm4ClC13_l7RBkd2LfdAtdg_EpZPP-tjxCFIQXM4hRYlvcOaEpNk57gmA0bYbEpCSfZ2lBhQEp3RO4Yxvtrg3OmEFI-e5FM9beUm7a1XRSPeTHEviOdcn32T0v23kGZk2Q2n-JG8tyfu32BhDHA7HMda42c9maU8e9dYpgZesmfnhg6FR5sMpy_aZTTXaoDnYV9tKXN6okZzMLIO1Ly7rWOfcOJuEHbk6QGH5YS8xYMAjzL2stlrRmG4bEkWld2ZLehaaL9iMmN8x_Mrg-MggUIwX-Tah_MOd8v5YCljMFw9U4V9pRIJOFv52eEIZG3SjJC1rogvSUKzg7sAGfa1YbFuIplUHcSXpRkfwOyyAqHi4Q4ochmh-GmQ4CbUd8etOh2P5UCe18hKqITLfps8NeX_CKEamTDO1PEc9vVGOmaHgzeYlIq1XA2LnettIE2lVmprwUADVUIZfU0md3Lwlkx-PNZu-RgYpfZiuFkQxGbIcR5c_CL2n3uCDacHei9t9a13x0BWR_-gRxZY8DPqPFy1M-3MphvQfiZwgh-z_RcyllbtVh4k85SPEz-mS0 "C4_Sequence Diagram Sample - bigbankplc") + +### Deployment Diagram + +Source: [C4_Deployment Diagram Sample - bigbankplc.puml](C4_Deployment%20Diagram%20Sample%20-%20bigbankplc.puml) + +![Deployment Diagram for Internet Banking System - Live](https://www.plantuml.com/plantuml/png/pLP_J-D64Fq_dsAQLkA7W41AArJff0i9FK24H3YKLgg4nhiJPylQQ-sk0sbrtxqpSgW9ILle_LCZHTxnl9atRsTs-HWY-bZbjWNmbIcKhJJ1BCOo_D3fU7myo4oSLMaLo2jNH2hYWN9vfxHO26e_H6rDskaVxu_5T3kywkGO8dastG-ej6wH2wYK55jG5OmM0yGPmTHPwnvDaO4r1G4M6bO-6n_upG5d1-iKMhjeRJKqDsHezRG-ioI62MRRxIbZKbGFxJtu9itwpZh_eVsrEfI_zevutv1Tyupq55TznIeSdwt7tvuC1jzn1ER3l5HbCP86Inbn4IO8PGtRgAAPonSm1LZM1IJ83eEkUh-CRYVtTnUJy_khiqzdruDj3XPDj0HDKJ0mc7dCMIaF5oo_BoZ2AHOF8bgoOA5ps8ShCwTMgu7TNpjDswLLUz0-DHa807ZPVhK6ZH51aGHkx_pH0dvUHz45WrAJfOpPnzBixkx-6fzE9DHjMd4JmD7t1uV7S3L9daDi2eCbgXang2Sl11ENAupjrmOuENXgmjHFtnKHMJRFGOm0nXVGAqjhsD-uGc9SuXn1sYSflIWp_Aalvh5tSwCfh4itvKOKC5eJ5p0tZ8RBP7JTEPzCnWbmYWFUN5W-drlrxwR2bjBezF3eXL2oVAz4pgEo8j58NWZsOUnDZdxHRcn7NVMtyWpIRPsowm0ZfXX8ODpTMDS9psP8MEuSvMiIdIVfLVBWAJCXUXHlC0KtN8xolWSp33FIW5MSCTUbwg0yQLcY3Nk0Ib48O5t62uhg_U9rLyNhRXHFHXEpyA4PrXtuDpsxBmLDIBb2hqlwpu7NLUx-NsHU8_vMuTENWZzIMe_ryNyRw-uNpZNdPy0TfM-Swm5PCoSVWAM24DbTmV9s4cynhuzyu1zBK696W4sQJQtwUVqmpPrGx5SXkfpyLW0s60wdQMuKrVMMbjEE4d0UUeNspcWfURNK6iRkmnhFA07_Z3boXIk75e8rkP7B8rHfe0XkkbxP-c4M7QWbpI0dcs2CN-NBHMygKhcyNArIB9NS3iBOUEM2cqQuCuLsZq48rLNdg4RI9vjxpRCl-UKEdzOh2VZ9ETcH_ioxd2KPkj-DjGW_6azJzxItZ9tWbAKHKOT6-Ph0cSv8qgstKYXH9gxUwp5cjAcb4kLDMRTAhyWgYtvLU6k_J6lkPrXMpKetJNL3zgy6gE-o8JvmGhdH56SD752O_1PSKTz4Z1OGL_K-nFrjFLGCN9aN9mn1DHlyWcgDh2zPBTr-GwW3JBtBHIfuz2RISyBBmMb_5T1z0sBZUILqR_XGROBK6yP8ZH4Ppawjv7nqr_odz94ANUNsJm00 "Deployment Diagram for Internet Banking System - Live") + +**with details** + +Source: [C4_Deployment Diagram Sample - bigbankplc-details.puml](C4_Deployment%20Diagram%20Sample%20-%20bigbankplc-details.puml) + +![Deployment Diagram for Internet Banking System - Live with details](https://www.plantuml.com/plantuml/png/vLTxR-964F-VJp6bbOwSo2CqLqMLJZe2z98J70YJorMgXDRhmMnlxRLsroIqkk_U6TkS8P1xg5LLgKGYzdWUyvlVp7XvvRomFazq0-0xbKgTHmXBxpFty-cf5VSdiVBBFCmTMcbIZwa_aIOvpRH8sUhO-KYhyBHtSJnXqUreU9e8vz6IQDx7J9jrmaOPXtW6UKhMB02_H5WOhSszIcFGAaKGQGGxZvLrT6M0eeCsKcYz9X-VqZmGeT6Dee565in4t6eko2OKyaEp3J-4SSzeOryslvTd_DSyOkqfwZrDZmz-LvUbdED6Ul7ZPR__WZmqxgW-9lSJQpAqVdsD8aBReWVFW1AMkHOU8z0O8w5JZh54q1BIgrNnHAMWgM151Ox8QDZzTNmxcz_TpAxdmy7hmTi-E_FAQuGQBVILYAr8g8GMReWNcwA7Av5-u6e6Qs8WWMCOgXKs6hNP_As9i9LfsOOcFslI_oiL5uP0uiVt40alG287Q1xzsG3wKCqsO5lD8R7YbKd9aAxJoAG5YrEg0YL2zM6BH_7dmrQKadweuf3Y78jCFN_-_3V_SCbURiESEWlEVpevku3XB61P5-un18TsXHOiEiNEgNBS9TkF5i8cRH1IekCghvI0Nrx0rSthuvi9-Hgvams8FI1ln4h0ExIk0dD9kHzKV9yyyFCNvvtHqogELSxFEXUrpg4oY4p89JB0uW9c9g5oDXyBuFBaeH2cG25IS2Qt4g58UJ3OAi0EFFxqJEe5DPQbK8ezJ6wWcsLQrQonbuAp8BDSrT6x7ei9pKf5wFQRQq4ppCP2AxykQYpWJJ1-Utezcqq2e10dMw0_Dehlh-cS9xkbQfGeF3lVQXk-VQfXPbGxWfC8kovQE1GEzsfqC9QnGcgcP5nSq0nDIZ_DMdRUaO-2j47JDDMXlaH7Fsn58RdeLmRiRefQb7M5ZHW2Qe94yDF06ukyFOe9Y9Npjj06bIwCJOhhDYo5Ms848lTBmbIn3D9YnBT2kyrqW3OntQ2NtqpMvsTxkiLMPvUjpkVOSYYf2GxonGjPnEvblQAFu6aAfnM5dMqEWyBxGHQxTUWsE4-J4Exbq2wtDk_QXL3Qa0Yot6R6eGEJwlMNajmdl_DVONy_yVr--6VMFhL6kDqIjBVAlN_n_zhxqshlT_wLnKzAvE4EmwzS_7taLMPTKMFdILr2TV9ZRHRllnCSVMc4JCG8eWvpQBTyt3-F98PJxENEcmJjCmSaKEGkmfMInNHmwXHs782nq4qZQrJ4a7UXbcQaFYhjoOgDtuj44CATjve0hHB5vo-NXuwGc0KZ-zBRpXkGLPgEsunjbDtDbq0V0YbDaksYP4dE1olEM5bfd5buk5CqJlUE4ofH9qAEWmtOnrv3IxfeAuQl-Avq-DeOPgItj1Ij3IFpXzAQna9PN9Y7TkKx43GwYeiwKjAM2GoY63dSVYkvJF0kAhcU4DU7MYgGLcLbgtJJEDV2xXPUwxzNQsxw2ZLLkcwgAUfF3L0UTaRY0mNa8u-ag8uSSYQ_EvEMHnMoPYD2zMqMyzjogCXmPrvCWKhM16-bMiKgmaHXzHPri21sYbBTM-Ln4_1D_wgtQz3v6ej3cvpJdTBhfdPI4eQkFDfxGqgDu7fyL__OU8LfnB-b_W80 "Deployment Diagram for Internet Banking System - Live with details") + +## Styles + +Source: [C4_Container Diagram Sample - bigbankplc-styles.puml](C4_Container%20Diagram%20Sample%20-%20bigbankplc-styles.puml) + +![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/hLPFRzl64xthKynFoK46Q0i_fBaKC11POXi7agMASjr30M58ZgX5bhl4xj1_KFIxTvQcILDEaKDwCRYpE-yzFxuTyPDdT5oNUlG_PJ9TvmH7vih_F9qwVBWe51_hjFRaCckO35zajfnM6ateEVUSQvLEvp-TRqBfThMSbkYPd9JsS-b0PSXTL05_b7nUt-qtyJPPt-pNjxlbzKqyEHlDyZpML0hq3el9ECNiAvcywnr7yFuWYxdLrbs-ZvVnAhxPxNzPov_vUhdUodvQFE-Etttuy74n-nXw_14hkenLSUH4vPGdOJqvanrDXH3iw94lNzWWUw7xqr1e0HzwneswBUb66VedamLebjPMpcoxNTzrEhGW_Ej6ma-QBXVeZvGlbH4j0_G0FlrlA2npJp5YnPgWynDoXON34WxMmRLXSeOOhj1yLQQ0vCapbQFHXfotPfBLdcr9Be9vzpIUmKiPx07uI91ATmGF4XMecaRKJGqmosnjs8z5npFq_aeAERgdIVP_mJeLC3w3lqO0qEkTF52wnwgImtUKmgogjCgGbJLZANt1UumWgLmGl_fz7ceBqkfUP3JIFClP3Dhm0fgyANUywSi_lfc9o26phr3W4jdMTBx1WWBx2skIELLn13DJr1fTA6-SlLSvUK2jlyrog4qMfADM_0HiEoSzt2iCFSg1_CEGEllWoRsHLDfKQMhzM8L59sh-Be8_i4InOYW6j2eLKmw-JZqnsCCFY7iM03dTgunEvItIIOwCANeAxw5z36gItvOmMBDrv27C5N1KACyE0pSe8xaic-S8Zirb0Qpv29cZd0mhr3uAkIBlGTj25iJPnHkZseijJgaGsStrjvEpi7BCzNq3vxxZK315W9lhYeM_V3EwHDJVNUxZHvvGYKhlVLCGelXy9UlspWNctP50DQIeOQKoPxqzCCIFsH5DGV3SAR2lC5jjFQfWceF3aaukTMzxayys1PaKeCLuRJvWQclk8n1rTpa2TcWyDaxqze-sf5_DY_xMtdhoWVlpRhT9vE3mdA_mksVQqFTmBTt-9ipgrFOpee7h9q2Br1G7WUW8cu4RmHVvIPesvFtRRBPQX5x1Zm7jhwIvbzrVbY7ebZ3tS72sR0RMWrDC7jW6efPdSJKNo0xpbLid8Ki4rWETXsg3qGiPvl54mx2lzfAFdZvPxJO2D7W7W_QJLFO-zJzpCgrMorEl-cs1V_vWMCQ_nZSB-L3u9EZXE-8V "Container diagram for Internet Banking System") + +## Icons + +Source: [C4_Container Diagram Sample - bigbankplc-icons.puml](C4_Container%20Diagram%20Sample%20-%20bigbankplc-icons.puml) +![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/hLLDS-D44BtxLpJXWBVAZei2BfpMiGt94d-mSZRBITMIslQmenanFRBNHV7VwL5aoN8s5IYuUNgwNp-zVZr-onwTBtFT-qgPL9SPmSxxWdySZHmUhhVAxygaP7AfDPwClqvjFYeqcb0pP9zfbOmctmzN8VGmln_bo9wSXEA9LA0ovAwB2Z-ZZPnWEljmDraked_GnvS5Pkwxjf-Is-56CePSEEM9J-qoseSxRhhyj5oinu-pQ3cV_Q-DgXWUY6rEmnzwtq1f120N8F0xWetLsXwKsO8EBD1aqBbMZkMN1I40sgQezL4m6kcVgrPVjRADq6nBZIzUPzORyY_T_evxVEakvpzqpEJs5xqxOevUJI2p9sqBUagHhxiV_xPyMCVhvIgUBXyN_JTjR1p5qI-pzUHMWdNeyMvz6z_FVfujfXBiUUKrGICAP0gt3dCHsi6TyUGCURX1yobe7XtPKzxhhSYnDVsqP6zpSWEODB-knd0AWzrKGqcaUW07CGOKLI7gAWQOfhOqdg-4nnDqV2E13DsndtuhM9S4hjx0dpq0QFds3vJ4M1II_4W9Z8j2gnIzikPAGkza6WE82XV8ppzCGcnAMed0N55ZBxafr5ODTgh2JT_azE6hSQWDqnMoNGPSe5n5agPfkC8j1HQdxb7gLE47C7uoLGYldDshZ1XGwoztsuZdlGewANy4Rnj56VOAGuro81yEYRC7fWgrTkqpThbDbAPQedauDFmcNm_W8-OewdHvWLQvyfG1bmcJbpd-1vvF1A1wG2ZqULgWIwBJf9-XnmIPmf3gdo4_-lKUEcTl7N7OS0UEjegzgmOEoeXfy-ht07R8Eye0It5TwYWZunLg7WJJ4JDekvK3-VGwOER7PZUVIvXW-ebC9XgguE_LtPTjDhMIvjgwZgQlQ1Va4k1Gqf3ugrcAsMVVfnoLCAm2aZKRpkLSBsGeMyk0LDK4DSnLwYpRZOVPvtGdrY3W9lFqVaYBC_oQLzj1yCt6OKuNsz-E81Zuv8rK0istdGq2CB6bRuqnQ9P-0DwXOQnKE8r27eBtfCyUbdQz7vWuzBvThrUH97RpkC1NSpgh45BhTl62r7QNsFOngU3Qfw96ge8TCpGDaOyc7S2xQBaOdJTlM_xBolX6ibjYxMfqKTuJPWmRP_FgxJfKVwNWRK2kWQSt4u5iCC_qkB1K9B0CD0pH2gCbqdLVXyDbNSdYWBPzD5-l1AYZSgUywxjMcAf-LAlpSNxVYFDMIijS_mq0 "Container diagram for Internet Banking System") diff --git a/samples/C4_Component Diagram Sample - bigbankplc.puml b/samples/C4_Component Diagram Sample - bigbankplc.puml index 491a725a..444d7d7d 100644 --- a/samples/C4_Component Diagram Sample - bigbankplc.puml +++ b/samples/C4_Component Diagram Sample - bigbankplc.puml @@ -1,9 +1,9 @@ @startuml -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Component.puml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml ' uncomment the following line and comment the first to use locally ' !include C4_Component.puml -LAYOUT_WITH_LEGEND +LAYOUT_WITH_LEGEND() title Component diagram for Internet Banking System - API Application @@ -13,8 +13,8 @@ ContainerDb(db, "Database", "Relational Database Schema", "Stores user registrat System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") Container_Boundary(api, "API Application") { - Component(sign, "Sign In Controller", "MVC Rest Controlle", "Allows users to sign in to the internet banking system") - Component(accounts, "Accounts Summary Controller", "MVC Rest Controlle", "Provides customers with a summory of their bank accounts") + Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system") + Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts") Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.") Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.") diff --git a/samples/C4_Container Diagram Sample - bigbankplc-icons.puml b/samples/C4_Container Diagram Sample - bigbankplc-icons.puml new file mode 100644 index 00000000..0a503cfb --- /dev/null +++ b/samples/C4_Container Diagram Sample - bigbankplc-icons.puml @@ -0,0 +1,45 @@ +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!define DEVICONS https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons +!define FONTAWESOME https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/font-awesome-5 +' uncomment the following line and comment the first to use locally +' !include C4_Container.puml +!include DEVICONS/angular.puml +!include DEVICONS/dotnet.puml +!include DEVICONS/java.puml +!include DEVICONS/msql_server.puml +!include FONTAWESOME/server.puml +!include FONTAWESOME/envelope.puml + +' LAYOUT_TOP_DOWN() +' LAYOUT_AS_SKETCH() +LAYOUT_WITH_LEGEND() + +title Container diagram for Internet Banking System + +Person(customer, Customer, "A customer of the bank, with personal bank accounts") + +System_Boundary(c1, "Internet Banking") { + Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA", "java") + Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser", "angular") + Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device", "dotnet") + ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.", "mysql_server") + Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API", "server") +} + +System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", "envelope") +System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") + +Rel(customer, web_app, "Uses", "HTTPS") +Rel(customer, spa, "Uses", "HTTPS") +Rel(customer, mobile_app, "Uses") + +Rel_Neighbor(web_app, spa, "Delivers") +Rel(spa, backend_api, "Uses", "async, JSON/HTTPS") +Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS") +Rel_Back_Neighbor(database, backend_api, "Reads from and writes to", "sync, JDBC") + +Rel_Back(customer, email_system, "Sends e-mails to") +Rel_Back(email_system, backend_api, "Sends e-mails using", "sync, SMTP") +Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS") +@enduml diff --git a/samples/C4_Container Diagram Sample - bigbankplc-styles.puml b/samples/C4_Container Diagram Sample - bigbankplc-styles.puml new file mode 100644 index 00000000..33554c25 --- /dev/null +++ b/samples/C4_Container Diagram Sample - bigbankplc-styles.puml @@ -0,0 +1,38 @@ +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +SHOW_PERSON_OUTLINE() +AddElementTag("backendContainer", $fontColor=$ELEMENT_FONT_COLOR, $bgColor="#335DA5", $shape=EightSidedShape(), $legendText="backend container\neight sided") +AddRelTag("async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine()) +AddRelTag("sync/async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine()) + +title Container diagram for Internet Banking System + +Person(customer, Customer, "A customer of the bank, with personal bank accounts") + +System_Boundary(c1, "Internet Banking") { + Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA") + Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser") + Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device") + ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.") + Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API", $tags="backendContainer") +} + +System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system") +System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") + +Rel(customer, web_app, "Uses", "HTTPS") +Rel(customer, spa, "Uses", "HTTPS") +Rel(customer, mobile_app, "Uses") + +Rel_Neighbor(web_app, spa, "Delivers") +Rel(spa, backend_api, "Uses", "async, JSON/HTTPS", $tags="async") +Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS", $tags="async") +Rel_Back_Neighbor(database, backend_api, "Reads from and writes to", "sync, JDBC") + +Rel_Back(customer, email_system, "Sends e-mails to") +Rel_Back(email_system, backend_api, "Sends e-mails using", "sync, SMTP") +Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS", $tags="sync/async") + +SHOW_LEGEND() +@enduml diff --git a/samples/C4_Container Diagram Sample - bigbankplc.puml b/samples/C4_Container Diagram Sample - bigbankplc.puml index 56dccd9c..dc1b1bda 100644 --- a/samples/C4_Container Diagram Sample - bigbankplc.puml +++ b/samples/C4_Container Diagram Sample - bigbankplc.puml @@ -1,11 +1,11 @@ @startuml -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml ' uncomment the following line and comment the first to use locally ' !include C4_Container.puml -LAYOUT_TOP_DOWN -'LAYOUT_AS_SKETCH -LAYOUT_WITH_LEGEND +' LAYOUT_TOP_DOWN() +' LAYOUT_AS_SKETCH() +LAYOUT_WITH_LEGEND() title Container diagram for Internet Banking System @@ -13,9 +13,9 @@ Person(customer, Customer, "A customer of the bank, with personal bank accounts" System_Boundary(c1, "Internet Banking") { Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA") - Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser") + Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser") Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device") - ContainerDb(database, "Database", "SQL Database", "Stores user registraion information, hased auth credentials, access logs, etc.") + ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.") Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API") } @@ -34,4 +34,4 @@ Rel_Back_Neighbor(database, backend_api, "Reads from and writes to", "sync, JDBC Rel_Back(customer, email_system, "Sends e-mails to") Rel_Back(email_system, backend_api, "Sends e-mails using", "sync, SMTP") Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS") -@enduml \ No newline at end of file +@enduml diff --git a/samples/C4_Container Diagram Sample - message bus.puml b/samples/C4_Container Diagram Sample - message bus.puml index d8485ff7..5ed5d861 100644 --- a/samples/C4_Container Diagram Sample - message bus.puml +++ b/samples/C4_Container Diagram Sample - message bus.puml @@ -1,43 +1,32 @@ -@startuml "bigbankplc" -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +@startuml "messagebus" +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml ' uncomment the following line and comment the first to use locally ' !include C4_Container.puml -skinparam wrapWidth 200 -skinparam maxMessageSize 200 - -LAYOUT_TOP_DOWN -'LAYOUT_AS_SKETCH -LAYOUT_WITH_LEGEND +AddElementTag("microService", $shape=EightSidedShape(), $bgColor="CornflowerBlue", $fontColor="white", $legendText="micro service\neight sided") +AddElementTag("storage", $shape=RoundedBoxShape(), $bgColor="lightSkyBlue", $fontColor="white") +SHOW_PERSON_OUTLINE() Person(customer, Customer, "A customer") System_Boundary(c1, "Customer Information") { - Container(app, "Customer Application", "Javascript, Angular", "Allows customers to manage their profile") - - Container(customer_service, "Customer Service", "Java, Spring Boot", "The point of access for customer information") - + Container(customer_service, "Customer Service", "Java, Spring Boot", "The point of access for customer information", $tags = "microService") Container(message_bus, "Message Bus", "RabbitMQ", "Transport for business events") - - Container(reporting_service, "Reporting Service", "Ruby", "Creates normalised data for reporting purposes") - - Container(audit_service, "Audit Service", "C#/.NET", "Provides organisation-wide auditing facilities") - - ContainerDb(customer_db, "Customer Database", "Oracle 12c", "Stores customer information") - - ContainerDb(reporting_db, "Reporting Database", "MySQL", "Stores a normalized version of all business data for ad hoc reporting purposes") - - Container(audit_store, "Audit Store", "Event Store", "Stores information about events that have happened") + Container(reporting_service, "Reporting Service", "Ruby", "Creates normalised data for reporting purposes", $tags = "microService") + Container(audit_service, "Audit Service", "C#/.NET", "Provides organisation-wide auditing facilities", $tags = "microService") + ContainerDb(customer_db, "Customer Database", "Oracle 12c", "Stores customer information", $tags = "storage") + ContainerDb(reporting_db, "Reporting Database", "MySQL", "Stores a normalized version of all business data for ad hoc reporting purposes", $tags = "storage") + Container(audit_store, "Audit Store", "Event Store", "Stores information about events that have happened", $tags = "storage") } -Rel(customer, app, "Uses", "HTTPS") +Rel_D(customer, app, "Uses", "HTTPS") -Rel_R(app, customer_service, "Updates customer information using", "async, JSON/HTTPS") +Rel_D(app, customer_service, "Updates customer information using", "async, JSON/HTTPS") -Rel_L(customer_service, app, "Sends events to", "WebSocket") -Rel_R(customer_service, message_bus, "Sends customer update events to") +Rel_U(customer_service, app, "Sends events to", "WebSocket") +Rel_U(customer_service, message_bus, "Sends customer update events to") Rel(customer_service, customer_db, "Stores data in", "JDBC") Rel(message_bus, reporting_service, "Sends customer update events to") @@ -48,4 +37,5 @@ Rel(audit_service, audit_store, "Stores events in") Lay_R(reporting_service, audit_service) -@enduml \ No newline at end of file +SHOW_LEGEND() +@enduml diff --git a/samples/C4_Container Diagram Sample - techtribesjs.puml b/samples/C4_Container Diagram Sample - techtribesjs.puml index dbd05697..1b6b0582 100644 --- a/samples/C4_Container Diagram Sample - techtribesjs.puml +++ b/samples/C4_Container Diagram Sample - techtribesjs.puml @@ -1,11 +1,11 @@ @startuml "techtribesjs" -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml ' uncomment the following line and comment the first to use locally ' !include C4_Container.puml -LAYOUT_TOP_DOWN -'LAYOUT_AS_SKETCH -LAYOUT_WITH_LEGEND +LAYOUT_TOP_DOWN() +'LAYOUT_AS_SKETCH() +LAYOUT_WITH_LEGEND() Person_Ext(anonymous_user, "Anonymous User") @@ -34,11 +34,11 @@ Rel(anonymous_user, web_app, "Uses", "HTTPS") Rel(aggregated_user, web_app, "Uses", "HTTPS") Rel(administration_user, web_app, "Uses", "HTTPS") -Rel(web_app, rel_db, "Reads from and writes to", "SQL/JDBC, post 3306") +Rel(web_app, rel_db, "Reads from and writes to", "SQL/JDBC, port 3306") Rel(web_app, filesystem, "Reads from") Rel(web_app, nosql, "Reads from", "MongoDB wire protocol, port 27017") -Rel_U(updater, rel_db, "Reads from and writes data to", "SQL/JDBC, post 3306") +Rel_U(updater, rel_db, "Reads from and writes data to", "SQL/JDBC, port 3306") Rel_U(updater, filesystem, "Writes to") Rel_U(updater, nosql, "Reads from and writes to", "MongoDB wire protocol, port 27017") @@ -48,4 +48,4 @@ Rel(updater, blogs, "Gets content using RSS and Atom feeds from", "HTTP") Lay_R(rel_db, filesystem) -@enduml \ No newline at end of file +@enduml diff --git a/samples/C4_Context Diagram Sample - bigbankplc-landscape.puml b/samples/C4_Context Diagram Sample - bigbankplc-landscape.puml index a4b3f4b7..5546bd86 100644 --- a/samples/C4_Context Diagram Sample - bigbankplc-landscape.puml +++ b/samples/C4_Context Diagram Sample - bigbankplc-landscape.puml @@ -1,11 +1,11 @@ @startuml -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml ' uncomment the following line and comment the first to use locally ' !include C4_Context.puml -'LAYOUT_TOP_DOWN -'LAYOUT_AS_SKETCH -LAYOUT_WITH_LEGEND +'LAYOUT_TOP_DOWN() +'LAYOUT_AS_SKETCH() +LAYOUT_WITH_LEGEND() title System Landscape diagram for Big Bank plc diff --git a/samples/C4_Context Diagram Sample - bigbankplc.puml b/samples/C4_Context Diagram Sample - bigbankplc.puml index 70778cd2..e5e12fbd 100644 --- a/samples/C4_Context Diagram Sample - bigbankplc.puml +++ b/samples/C4_Context Diagram Sample - bigbankplc.puml @@ -1,9 +1,9 @@ @startuml -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml ' uncomment the following line and comment the first to use locally ' !include C4_Context.puml -LAYOUT_WITH_LEGEND +LAYOUT_WITH_LEGEND() title System Context diagram for Internet Banking System diff --git a/samples/C4_Context Diagram Sample - enterprise.puml b/samples/C4_Context Diagram Sample - enterprise.puml index c58f636d..c3086c0b 100644 --- a/samples/C4_Context Diagram Sample - enterprise.puml +++ b/samples/C4_Context Diagram Sample - enterprise.puml @@ -1,20 +1,20 @@ @startuml "enterprise" -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml ' uncomment the following line and comment the first to use locally ' !include C4_Context.puml -LAYOUT_TOP_DOWN -'LAYOUT_AS_SKETCH -LAYOUT_WITH_LEGEND +LAYOUT_TOP_DOWN() +'LAYOUT_AS_SKETCH() +LAYOUT_WITH_LEGEND() Person(customer, "Customer", "A customer of Widgets Limited.") Enterprise_Boundary(c0, "Widgets Limited") { Person(csa, "Customer Service Agent", "Deals with customer enquiries.") - System(ecommerce, "E-commerce System", "Allows customers to buy widgts online via the widgets.com website.") + System(ecommerce, "E-commerce System", "Allows customers to buy widgets online via the widgets.com website.") - System(fulfilment, "Fulfilment System", "Responsible for processing and shipping of customer orders.") + System(fulfillment, "Fulfillment System", "Responsible for processing and shipping of customer orders.") } System(taxamo, "Taxamo", "Calculates local tax (for EU B2B customers) and acts as a front-end for Braintree Payments.") @@ -29,9 +29,9 @@ Rel_R(customer, ecommerce, "Places orders for widgets using") Rel(csa, ecommerce, "Looks up order information using") -Rel_R(ecommerce, fulfilment, "Sends order information to") +Rel_R(ecommerce, fulfillment, "Sends order information to") -Rel_D(fulfilment, post, "Gets shipping charges from") +Rel_D(fulfillment, post, "Gets shipping charges from") Rel_D(ecommerce, taxamo, "Delegates credit card processing to") @@ -39,4 +39,4 @@ Rel_L(taxamo, braintree, "Uses for credit card processing") Lay_D(customer, braintree) -@enduml \ No newline at end of file +@enduml diff --git a/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml b/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml new file mode 100644 index 00000000..d3d031c9 --- /dev/null +++ b/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml @@ -0,0 +1,67 @@ +@startuml + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml +' uncomment the following line and comment the first to use locally +' !include C4_Deployment.puml + +AddElementTag("fallback", $bgColor="#c0c0c0") +AddRelTag("fallback", $textColor="#c0c0c0", $lineColor="#438DD5") + +WithoutPropertyHeader() + +' calculated legend is used (activated in last line) +' LAYOUT_WITH_LEGEND() + +title Deployment Diagram for Internet Banking System - Live + +Deployment_Node(plc, "Live", "Big Bank plc", "Big Bank plc data center"){ + AddProperty("Location", "London and Reading") + Deployment_Node_L(dn, "bigbank-api***\tx8", "Ubuntu 16.04 LTS", "A web server residing in the web server farm, accessed via F5 BIG-IP LTMs."){ + AddProperty("Java Version", "8") + AddProperty("Xmx", "512M") + AddProperty("Xms", "1024M") + Deployment_Node_L(apache, "Apache Tomcat", "Apache Tomcat 8.x", "An open source Java EE web server."){ + Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.") + } + } + AddProperty("Location", "London") + Deployment_Node_L(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS", "The primary database server."){ + Deployment_Node_L(oracle, "Oracle - Primary", "Oracle 12c", "The primary, live database server."){ + ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") + } + } + AddProperty("Location", "Reading") + Deployment_Node_R(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS", "The secondary database server.", $tags="fallback") { + Deployment_Node_R(oracle2, "Oracle - Secondary", "Oracle 12c", "A secondary, standby database server, used for failover purposes only.", $tags="fallback") { + ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="fallback") + } + } + AddProperty("Location", "London and Reading") + Deployment_Node_R(bb2, "bigbank-web***\tx4", "Ubuntu 16.04 LTS", "A web server residing in the web server farm, accessed via F5 BIG-IP LTMs."){ + AddProperty("Java Version", "8") + AddProperty("Xmx", "512M") + AddProperty("Xms", "1024M") + Deployment_Node_R(apache2, "Apache Tomcat", "Apache Tomcat 8.x", "An open source Java EE web server."){ + Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.") + } + } +} + +Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){ + Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.") +} + +Deployment_Node(comp, "Customer's computer", "Microsoft Windows of Apple macOS"){ + Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox, Apple Safari or Microsoft Edge"){ + Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.") + } +} + +Rel(mobile, api, "Makes API calls to", "json/HTTPS") +Rel(spa, api, "Makes API calls to", "json/HTTPS") +Rel_U(web, spa, "Delivers to the customer's web browser") +Rel(api, db, "Reads from and writes to", "JDBC") +Rel(api, db2, "Reads from and writes to", "JDBC", $tags="fallback") +Rel_R(db, db2, "Replicates data to") + +SHOW_LEGEND() +@enduml diff --git a/samples/C4_Deployment Diagram Sample - bigbankplc.puml b/samples/C4_Deployment Diagram Sample - bigbankplc.puml new file mode 100644 index 00000000..83468719 --- /dev/null +++ b/samples/C4_Deployment Diagram Sample - bigbankplc.puml @@ -0,0 +1,55 @@ +@startuml + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml +' uncomment the following line and comment the first to use locally +' !include C4_Deployment.puml + +AddElementTag("fallback", $bgColor="#c0c0c0") +AddRelTag("fallback", $textColor="#c0c0c0", $lineColor="#438DD5") + +' calculated legend is used (activated in last line) +' LAYOUT_WITH_LEGEND() + +title Deployment Diagram for Internet Banking System - Live + +Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){ + Deployment_Node(dn, "bigbank-api***\tx8", "Ubuntu 16.04 LTS"){ + Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){ + Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.") + } + } + Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){ + Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){ + ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") + } + } + Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS", $tags="fallback") { + Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c", $tags="fallback") { + ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="fallback") + } + } + Deployment_Node(bb2, "bigbank-web***\tx4", "Ubuntu 16.04 LTS"){ + Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){ + Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.") + } + } +} + +Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){ + Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.") +} + +Deployment_Node(comp, "Customer's computer", "Microsoft Windows or Apple macOS"){ + Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox, Apple Safari or Microsoft Edge"){ + Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.") + } +} + +Rel(mobile, api, "Makes API calls to", "json/HTTPS") +Rel(spa, api, "Makes API calls to", "json/HTTPS") +Rel_U(web, spa, "Delivers to the customer's web browser") +Rel(api, db, "Reads from and writes to", "JDBC") +Rel(api, db2, "Reads from and writes to", "JDBC", $tags="fallback") +Rel_R(db, db2, "Replicates data to") + +SHOW_LEGEND() +@enduml diff --git a/samples/C4_Dynamic Diagram Sample - bigbankplc.puml b/samples/C4_Dynamic Diagram Sample - bigbankplc.puml new file mode 100644 index 00000000..0f5caf28 --- /dev/null +++ b/samples/C4_Dynamic Diagram Sample - bigbankplc.puml @@ -0,0 +1,15 @@ +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml + +LAYOUT_WITH_LEGEND() + +ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") +Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.") +Container_Boundary(b, "API Application") { + Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.") + Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.") +} +Rel_R(c1, c2, "Submits credentials to", "JSON/HTTPS") +Rel(c2, c3, "Calls isAuthenticated() on") +Rel_R(c3, c4, "select * from users where username = ?", "JDBC") +@enduml diff --git a/samples/C4_Dynamic Diagram Sample - message bus - old format.puml b/samples/C4_Dynamic Diagram Sample - message bus - old format.puml new file mode 100644 index 00000000..4f4fd860 --- /dev/null +++ b/samples/C4_Dynamic Diagram Sample - message bus - old format.puml @@ -0,0 +1,35 @@ +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml + +LAYOUT_TOP_DOWN() +LAYOUT_WITH_LEGEND() + +Person(customer, Customer, "A customer") +System_Boundary(c1, "Customer Information") { + Container(app, "Customer Application", "Javascript, Angular", "Allows customers to manage their profile") + Container(customer_service, "Customer Service", "Java, Spring Boot", "The point of access for customer information") + Container(message_bus, "Message Bus", "RabbitMQ", "Transport for business events") + Container(reporting_service, "Reporting Service", "Ruby", "Creates normalised data for reporting purposes") + Container(audit_service, "Audit Service", "C#/.NET", "Provides organisation-wide auditing facilities") + ContainerDb(customer_db, "Customer Database", "Oracle 12c", "Stores customer information") + ContainerDb(reporting_db, "Reporting Database", "MySQL", "Stores a normalized version of all business data for ad hoc reporting purposes") + Container(audit_store, "Audit Store", "Event Store", "Stores information about events that have happened") +} + +Rel_D(customer, app, "Updates his profile using", "HTTPS") +Rel(app, customer_service, "Updates customer information using", "JSON/HTTPS") +Rel_R(customer_service, customer_db, "Stores data in", "JDBC") + +RelIndex_D($index-1, customer_service, message_bus, "Sends customer update events to", "async") +RelIndex_U($index-2, customer_service, app, "Confirm update to", "async") +increment() + +RelIndex_L($index-1, message_bus, reporting_service, "Sends customer update events to", "async") +increment() +RelIndex($index-1, reporting_service, reporting_db, "Stores data in") + +setIndex(5) +RelIndex_R($index-2, message_bus, audit_service, "Sends customer update events to", "async") +increment() +RelIndex($index-2, audit_service, audit_store, "Stores events in") +@enduml diff --git a/samples/C4_Dynamic Diagram Sample - message bus.puml b/samples/C4_Dynamic Diagram Sample - message bus.puml new file mode 100644 index 00000000..8bb106e0 --- /dev/null +++ b/samples/C4_Dynamic Diagram Sample - message bus.puml @@ -0,0 +1,34 @@ +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml + +LAYOUT_TOP_DOWN() +LAYOUT_WITH_LEGEND() + +Person(customer, Customer, "A customer") +System_Boundary(c1, "Customer Information") { + Container(app, "Customer Application", "Javascript, Angular", "Allows customers to manage their profile") + Container(customer_service, "Customer Service", "Java, Spring Boot", "The point of access for customer information") + Container(message_bus, "Message Bus", "RabbitMQ", "Transport for business events") + Container(reporting_service, "Reporting Service", "Ruby", "Creates normalised data for reporting purposes") + Container(audit_service, "Audit Service", "C#/.NET", "Provides organisation-wide auditing facilities") + ContainerDb(customer_db, "Customer Database", "Oracle 12c", "Stores customer information") + ContainerDb(reporting_db, "Reporting Database", "MySQL", "Stores a normalized version of all business data for ad hoc reporting purposes") + Container(audit_store, "Audit Store", "Event Store", "Stores information about events that have happened") +} + +Rel_D(customer, app, "Updates his profile using", "HTTPS") +Rel(app, customer_service, "Updates customer information using", "JSON/HTTPS") +Rel_R(customer_service, customer_db, "Stores data in", "JDBC") + +Rel_D(customer_service, message_bus, "Sends customer update events to", "async", $index=Index()-1) +Rel_U(customer_service, app, "Confirm update to", "async", $index=LastIndex()-2) + +Rel_L(message_bus, reporting_service, "Sends customer update events to", "async", $index=Index()-1) +Rel(reporting_service, reporting_db, "Stores data in", $index=Index()-1) + +' $index cab be first arg too (like the old RelIndex... calls), as long it is written with $index=.... +Rel_R($index=SetIndex(5)-2, message_bus, audit_service, "Sends customer update events to", "async") +Rel($index=Index()-2, audit_service, audit_store, "Stores events in") + +SHOW_LEGEND() +@enduml \ No newline at end of file diff --git a/samples/C4_Sequence Diagram Sample - bigbankplc.puml b/samples/C4_Sequence Diagram Sample - bigbankplc.puml new file mode 100644 index 00000000..46786ae9 --- /dev/null +++ b/samples/C4_Sequence Diagram Sample - bigbankplc.puml @@ -0,0 +1,18 @@ +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Sequence.puml + +Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.") + +Container_Boundary(b, "API Application") + Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.") + Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.") +Boundary_End() + +ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") + +Rel(c1, c2, "Submits credentials to", "JSON/HTTPS") +Rel(c2, c3, "Calls isAuthenticated() on") +Rel(c3, c4, "select * from users where username = ?", "JDBC") + +SHOW_LEGEND() +@enduml \ No newline at end of file diff --git a/samples/C4_Sequence Diagram Sample - complex.puml b/samples/C4_Sequence Diagram Sample - complex.puml new file mode 100644 index 00000000..9c18b7f0 --- /dev/null +++ b/samples/C4_Sequence Diagram Sample - complex.puml @@ -0,0 +1,44 @@ +@startuml +!theme C4_united from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Sequence.puml + +Person(Alice, "Alice") +Person(Bob, "Bob") + +activate Bob + +Rel(Alice, Bob, "Authentication Request") + +alt successful case + Rel(Bob, Alice, "Authentication Accepted") +else some kind of failure + loop 1000 times + Rel(Alice, Bob, "DNS Attack") + end +end + +ref over Alice, Bob : init + +Rel(Alice, Bob, "hello") + +ref over Bob + This can be on + several lines +end ref + +== Initialization == + +Rel(Alice, Bob, "Authentication Request") +Rel(Bob, Alice, "Authentication Response") + +== Repetition == + +Rel(Alice, Bob, "Another authentication Request") +Rel(Bob, Alice, "another authentication Response") + +... 5 minutes later ... + +Rel(Alice, Bob, "calls via phone") + +SHOW_LEGEND() +@enduml \ No newline at end of file diff --git a/themes/puml-theme-C4Language_chinese.puml b/themes/puml-theme-C4Language_chinese.puml new file mode 100644 index 00000000..9a30809c --- /dev/null +++ b/themes/puml-theme-C4Language_chinese.puml @@ -0,0 +1,51 @@ +!$THEME = "C4Language_chinese" + +!$BOUNDARY_LEGEND_TEXT ?= "边界" + +!$LEGEND_TITLE_TEXT ?= "图例" + +!$LEGEND_BOUNDARY ?= "边界" +' !$LEGEND_BOUNDARY_PRE_PART ?= "" +!$LEGEND_BOUNDARY_POST_PART ?= $LEGEND_BOUNDARY + +!$LEGEND_SHADOW_TEXT ?= "阴影" +!$LEGEND_NO_SHADOW_TEXT ?= "无阴影" +!$LEGEND_NO_FONT_BG_TEXT ?= "最后的文字和背景颜色" +!$LEGEND_NO_FONT_TEXT ?= "最后的文字颜色" +!$LEGEND_NO_BG_TEXT ?= "最后的背景颜色" +!$LEGEND_NO_LINE_TEXT ?= "最后的线条颜色" +!$LEGEND_ROUNDED_BOX ?= "圆角框" +!$LEGEND_EIGHT_SIDED ?= "八边形" +!$LEGEND_DOTTED_LINE ?= "点线" +!$LEGEND_DASHED_LINE ?= "虚线" +!$LEGEND_BOLD_LINE ?= "粗线" +!$LEGEND_SOLID_LINE ?= "实线" +' !$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "transparent, " +!$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "" +!$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "虚线, " +' !$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "" +!$LEGEND_THICKNESS ?= "厚度" + +!$SKETCH_FOOTER_WARNING ?= "警告:" +!$SKETCH_FOOTER_TEXT ?= "创建用于讨论，需要验证" + +!$COMPONENT_LEGEND_TEXT ?= "组件" +!$EXTERNAL_COMPONENT_LEGEND_TEXT ?= "外部组件" + +!$CONTAINER_LEGEND_TEXT ?= "容器" +!$CONTAINER_BOUNDARY_TYPE ?= "容器" +!$CONTAINER_BOUNDARY_LEGEND_TEXT ?= "容器边界" +!$EXTERNAL_CONTAINER_LEGEND_TEXT ?= "外部容器" + +!$PERSON_LEGEND_TEXT ?= "人" +!$EXTERNAL_PERSON_LEGEND_TEXT ?= "外部人" + +!$SYSTEM_LEGEND_TEXT ?= "系统" +!$SYSTEM_BOUNDARY_TYPE ?= "系统" +!$SYSTEM_BOUNDARY_LEGEND_TEXT ?= "系统边界" +!$EXTERNAL_SYSTEM_LEGEND_TEXT ?= "外部系统" + +!ENTERPRISE_BOUNDARY_TYPE ?= "企业" +!$ENTERPRISE_BOUNDARY_LEGEND_TEXT ?= "企业边界" + +!$NODE_LEGEND_TEXT ?= "节点" diff --git a/themes/puml-theme-C4Language_danish.puml b/themes/puml-theme-C4Language_danish.puml new file mode 100644 index 00000000..87d8a500 --- /dev/null +++ b/themes/puml-theme-C4Language_danish.puml @@ -0,0 +1,51 @@ +' all available language specific text labels (orig. English) +!$THEME = "C4Language_danish" + +!$BOUNDARY_LEGEND_TEXT ?= "skillelinje" + +!$LEGEND_TITLE_TEXT ?= "Signaturforklaring" + +!$LEGEND_BOUNDARY ?= "skillelinje" +' !$LEGEND_BOUNDARY_PRE_PART ?= "" +' !$LEGEND_BOUNDARY_POST_PART ?= " " + $LEGEND_BOUNDARY + +!$LEGEND_SHADOW_TEXT ?= "skygge" +!$LEGEND_NO_SHADOW_TEXT ?= "ingen skygge" +!$LEGEND_NO_FONT_BG_TEXT ?= "sidste tekst og sidste farve" +!$LEGEND_NO_FONT_TEXT ?= "sidste tekstfarve" +!$LEGEND_NO_BG_TEXT ?= "sidste baggrundsfarve" +!$LEGEND_NO_LINE_TEXT ?= "sidste linjefarve" +!$LEGEND_ROUNDED_BOX ?= "rundet boks" +!$LEGEND_EIGHT_SIDED ?= "ottesidet" +!$LEGEND_DOTTED_LINE ?= "prikket" +!$LEGEND_DASHED_LINE ?= "stiplet" +!$LEGEND_BOLD_LINE ?= "fed" +!$LEGEND_SOLID_LINE ?= "solid" +' !$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "transparent, " +!$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "" +!$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "stiplet, " +' !$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "" +!$LEGEND_THICKNESS ?= "tykkelse" +!$SKETCH_FOOTER_WARNING ?= "Advarsel:" +!$SKETCH_FOOTER_TEXT ?= "Oprettet til diskussion, skal valideres" + +!$COMPONENT_LEGEND_TEXT ?= "komponent" +!$EXTERNAL_COMPONENT_LEGEND_TEXT ?= "ekstern komponent" + +!$CONTAINER_LEGEND_TEXT ?= "container" +!$CONTAINER_BOUNDARY_TYPE ?= "container" +!$CONTAINER_BOUNDARY_LEGEND_TEXT ?= "container skillelinje" +!$EXTERNAL_CONTAINER_LEGEND_TEXT ?= "ekstern container" + +!$PERSON_LEGEND_TEXT ?= "person" +!$EXTERNAL_PERSON_LEGEND_TEXT ?= "ekstern person" + +!$SYSTEM_LEGEND_TEXT ?= "system" +!$SYSTEM_BOUNDARY_TYPE ?= "system" +!$SYSTEM_BOUNDARY_LEGEND_TEXT ?= "system skillelinje" +!$EXTERNAL_SYSTEM_LEGEND_TEXT ?= "eksternt system" + +!$ENTERPRISE_BOUNDARY_TYPE ?= "enterprise" +!$ENTERPRISE_BOUNDARY_LEGEND_TEXT ?= "enterprise skillelinje" + +!$NODE_LEGEND_TEXT ?= "node" diff --git a/themes/puml-theme-C4Language_dutch.puml b/themes/puml-theme-C4Language_dutch.puml new file mode 100644 index 00000000..82afafa8 --- /dev/null +++ b/themes/puml-theme-C4Language_dutch.puml @@ -0,0 +1,51 @@ +!$THEME = "C4Language_dutch" + +!$BOUNDARY_LEGEND_TEXT ?= "grens" + +!$LEGEND_TITLE_TEXT ?= "Legenda" + +!$LEGEND_BOUNDARY ?= "grens" +' !$LEGEND_BOUNDARY_PRE_PART ?= "" +!$LEGEND_BOUNDARY_POST_PART ?= $LEGEND_BOUNDARY + +!$LEGEND_SHADOW_TEXT ?= "schaduw" +!$LEGEND_NO_SHADOW_TEXT ?= "geen schaduw" +!$LEGEND_NO_FONT_BG_TEXT ?= "laatste tekst- en achtergrondkleur" +!$LEGEND_NO_FONT_TEXT ?= "laatste tekstkleur" +!$LEGEND_NO_BG_TEXT ?= "laatste achtergrondkleur" +!$LEGEND_NO_LINE_TEXT ?= "laatste lijnkleur" +!$LEGEND_ROUNDED_BOX ?= "afgeronde doos" +!$LEGEND_EIGHT_SIDED ?= "achtzijdig" +!$LEGEND_DOTTED_LINE ?= "gestippeld" +!$LEGEND_DASHED_LINE ?= "gestreept" +!$LEGEND_BOLD_LINE ?= "vet" +!$LEGEND_SOLID_LINE ?= "solide" +' !$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "transparent, " +!$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "" +!$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "gestreept, " +' !$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "" +!$LEGEND_THICKNESS ?= "dikte" + +!$SKETCH_FOOTER_WARNING ?= "Waarschuwing:" +!$SKETCH_FOOTER_TEXT ?= "Gemaakt voor discussie, moet worden gevalideerd" + +!$COMPONENT_LEGEND_TEXT ?= "component" +!$EXTERNAL_COMPONENT_LEGEND_TEXT ?= "extern component" + +!$CONTAINER_LEGEND_TEXT ?= "container" +!$CONTAINER_BOUNDARY_TYPE ?= "container" +!$CONTAINER_BOUNDARY_LEGEND_TEXT ?= "containergrens" +!$EXTERNAL_CONTAINER_LEGEND_TEXT ?= "externe container" + +!$PERSON_LEGEND_TEXT ?= "persoon" +!$EXTERNAL_PERSON_LEGEND_TEXT ?= "externe persoon" + +!$SYSTEM_LEGEND_TEXT ?= "systeem" +!$SYSTEM_BOUNDARY_TYPE ?= "systeem" +!$SYSTEM_BOUNDARY_LEGEND_TEXT ?= "systeemgrens" +!$EXTERNAL_SYSTEM_LEGEND_TEXT ?= "extern systeem" + +!$ENTERPRISE_BOUNDARY_TYPE ?= "bedrijfs" +!$ENTERPRISE_BOUNDARY_LEGEND_TEXT ?= "bedrijfsgrens" + +!$NODE_LEGEND_TEXT ?= "knooppunt" diff --git a/themes/puml-theme-C4Language_english.puml b/themes/puml-theme-C4Language_english.puml new file mode 100644 index 00000000..91b9d475 --- /dev/null +++ b/themes/puml-theme-C4Language_english.puml @@ -0,0 +1,51 @@ +' all available language specific text labels (orig. English) +!$THEME = "C4Language_english" + +!$BOUNDARY_LEGEND_TEXT ?= "boundary" + +!$LEGEND_TITLE_TEXT ?= "Legend" + +!$LEGEND_BOUNDARY ?= "boundary" +' !$LEGEND_BOUNDARY_PRE_PART ?= "" +' !$LEGEND_BOUNDARY_POST_PART ?= " " + $LEGEND_BOUNDARY + +!$LEGEND_SHADOW_TEXT ?= "shadow" +!$LEGEND_NO_SHADOW_TEXT ?= "no shadow" +!$LEGEND_NO_FONT_BG_TEXT ?= "last text and back color" +!$LEGEND_NO_FONT_TEXT ?= "last text color" +!$LEGEND_NO_BG_TEXT ?= "last back color" +!$LEGEND_NO_LINE_TEXT ?= "last line color" +!$LEGEND_ROUNDED_BOX ?= "rounded box" +!$LEGEND_EIGHT_SIDED ?= "eight sided" +!$LEGEND_DOTTED_LINE ?= "dotted" +!$LEGEND_DASHED_LINE ?= "dashed" +!$LEGEND_BOLD_LINE ?= "bold" +!$LEGEND_SOLID_LINE ?= "solid" +' !$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "transparent, " +!$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "" +!$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "dashed, " +' !$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "" +!$LEGEND_THICKNESS ?= "thickness" +!$SKETCH_FOOTER_WARNING ?= "Warning:" +!$SKETCH_FOOTER_TEXT ?= "Created for discussion, needs to be validated" + +!$COMPONENT_LEGEND_TEXT ?= "component" +!$EXTERNAL_COMPONENT_LEGEND_TEXT ?= "external component" + +!$CONTAINER_LEGEND_TEXT ?= "container" +!$CONTAINER_BOUNDARY_TYPE ?= "container" +!$CONTAINER_BOUNDARY_LEGEND_TEXT ?= "container boundary" +!$EXTERNAL_CONTAINER_LEGEND_TEXT ?= "external container" + +!$PERSON_LEGEND_TEXT ?= "person" +!$EXTERNAL_PERSON_LEGEND_TEXT ?= "external person" + +!$SYSTEM_LEGEND_TEXT ?= "system" +!$SYSTEM_BOUNDARY_TYPE ?= "system" +!$SYSTEM_BOUNDARY_LEGEND_TEXT ?= "system boundary" +!$EXTERNAL_SYSTEM_LEGEND_TEXT ?= "external system" + +!$ENTERPRISE_BOUNDARY_TYPE ?= "enterprise" +!$ENTERPRISE_BOUNDARY_LEGEND_TEXT ?= "enterprise boundary" + +!$NODE_LEGEND_TEXT ?= "node" diff --git a/themes/puml-theme-C4Language_french.puml b/themes/puml-theme-C4Language_french.puml new file mode 100644 index 00000000..f6a447d1 --- /dev/null +++ b/themes/puml-theme-C4Language_french.puml @@ -0,0 +1,51 @@ +!$THEME = "C4Language_french" + +!$BOUNDARY_LEGEND_TEXT ?= "frontière" + +!$LEGEND_TITLE_TEXT ?= "Légende" + +!$LEGEND_BOUNDARY ?= "frontière" +!$LEGEND_BOUNDARY_PRE_PART ?= "frontière du " +!$LEGEND_BOUNDARY_POST_PART ?= "" + +!$LEGEND_SHADOW_TEXT ?= "ombre" +!$LEGEND_NO_SHADOW_TEXT ?= "pas d'ombre" +!$LEGEND_NO_FONT_BG_TEXT ?= "dernière couleur de texte et de fond" +!$LEGEND_NO_FONT_TEXT ?= "dernière couleur de texte" +!$LEGEND_NO_BG_TEXT ?= "dernière couleur de fond" +!$LEGEND_NO_LINE_TEXT ?= "dernière couleur de ligne" +!$LEGEND_ROUNDED_BOX ?= "boîte arrondie" +!$LEGEND_EIGHT_SIDED ?= "octogonal" +!$LEGEND_DOTTED_LINE ?= "pointillé" +!$LEGEND_DASHED_LINE ?= "tiret" +!$LEGEND_BOLD_LINE ?= "gras" +!$LEGEND_SOLID_LINE ?= "solide" +' !$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "transparent, " +!$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "" +!$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "tiret, " +' !$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "" +!$LEGEND_THICKNESS ?= "épaisseur" + +!$SKETCH_FOOTER_WARNING ?= "Attention:" +!$SKETCH_FOOTER_TEXT ?= "Créé pour discussion, doit être validé" + +!$COMPONENT_LEGEND_TEXT ?= "composant" +!$EXTERNAL_COMPONENT_LEGEND_TEXT ?= "composant externe" + +!$CONTAINER_LEGEND_TEXT ?= "conteneur" +!$CONTAINER_BOUNDARY_TYPE ?= "conteneur" +!$CONTAINER_BOUNDARY_LEGEND_TEXT ?= "frontière du conteneur" +!$EXTERNAL_CONTAINER_LEGEND_TEXT ?= "conteneur externe" + +!$PERSON_LEGEND_TEXT ?= "personne" +!$EXTERNAL_PERSON_LEGEND_TEXT ?= "personne externe" + +!$SYSTEM_LEGEND_TEXT ?= "système" +!$SYSTEM_BOUNDARY_TYPE ?= "système" +!$SYSTEM_BOUNDARY_LEGEND_TEXT ?= "frontière du système" +!$EXTERNAL_SYSTEM_LEGEND_TEXT ?= "système externe" + +!$ENTERPRISE_BOUNDARY_TYPE ?= "entreprise" +!$ENTERPRISE_BOUNDARY_LEGEND_TEXT ?= "frontière de l'entreprise" + +!$NODE_LEGEND_TEXT ?= "nœud" diff --git a/themes/puml-theme-C4Language_german.puml b/themes/puml-theme-C4Language_german.puml new file mode 100644 index 00000000..aef04883 --- /dev/null +++ b/themes/puml-theme-C4Language_german.puml @@ -0,0 +1,51 @@ +!$THEME = "C4Language_deutsch" + +!$BOUNDARY_LEGEND_TEXT ?= "Grenze" + +!$LEGEND_TITLE_TEXT ?= "Legende" + +!$LEGEND_BOUNDARY ?= "Grenze" +' !$LEGEND_BOUNDARY_PRE_PART ?= "" +' !$LEGEND_BOUNDARY_POST_PART ?= " " + $LEGEND_BOUNDARY +!$LEGEND_BOUNDARY_POST_PART ?= "grenze" + +!$LEGEND_SHADOW_TEXT ?= "Schatten" +!$LEGEND_NO_SHADOW_TEXT ?= "kein Schatten" +!$LEGEND_NO_FONT_BG_TEXT ?= "letzte Text- und Hintergrundfarbe" +!$LEGEND_NO_FONT_TEXT ?= "letzte Textfarbe" +!$LEGEND_NO_BG_TEXT ?= "letzte Hintergrundfarbe" +!$LEGEND_NO_LINE_TEXT ?= "letzte Linienfarbe" +!$LEGEND_ROUNDED_BOX ?= "abgerundetes Kästchen" +!$LEGEND_EIGHT_SIDED ?= "achtseitig" +!$LEGEND_DOTTED_LINE ?= "gepunktet" +!$LEGEND_DASHED_LINE ?= "gestrichelt" +!$LEGEND_BOLD_LINE ?= "fett" +!$LEGEND_SOLID_LINE ?= "durchgezogen" +' !$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "transparent, " +!$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "" +!$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "gestrichelt, " +' !$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "" +!$LEGEND_THICKNESS ?= "Dicke" +!$SKETCH_FOOTER_WARNING ?= "Warnung:" +!$SKETCH_FOOTER_TEXT ?= "Zur Diskussion gestellt, muss überprüft werden" + +!$COMPONENT_LEGEND_TEXT ?= "Komponente" +!$EXTERNAL_COMPONENT_LEGEND_TEXT ?= "externe Komponente" + +!$CONTAINER_LEGEND_TEXT ?= "Container" +!$CONTAINER_BOUNDARY_TYPE ?= "Container" +!$CONTAINER_BOUNDARY_LEGEND_TEXT ?= "Containergrenze" +!$EXTERNAL_CONTAINER_LEGEND_TEXT ?= "externer Container" + +!$PERSON_LEGEND_TEXT ?= "Person" +!$EXTERNAL_PERSON_LEGEND_TEXT ?= "externe Person" + +!$SYSTEM_LEGEND_TEXT ?= "System" +!$SYSTEM_BOUNDARY_TYPE ?= "System" +!$SYSTEM_BOUNDARY_LEGEND_TEXT ?= "Systemgrenze" +!$EXTERNAL_SYSTEM_LEGEND_TEXT ?= "externes System" + +!$ENTERPRISE_BOUNDARY_TYPE ?= "Unternehmen" +!$ENTERPRISE_BOUNDARY_LEGEND_TEXT ?= "Unternehmensgrenze" + +!$NODE_LEGEND_TEXT ?= "Knoten" diff --git a/themes/puml-theme-C4Language_italian.puml b/themes/puml-theme-C4Language_italian.puml new file mode 100644 index 00000000..cd7558c3 --- /dev/null +++ b/themes/puml-theme-C4Language_italian.puml @@ -0,0 +1,50 @@ +!$THEME = "C4Language_italian" + +!$BOUNDARY_LEGEND_TEXT ?= "confine" + +!$LEGEND_TITLE_TEXT ?= "Legenda" + +!$LEGEND_BOUNDARY ?= "confine" +!$LEGEND_BOUNDARY_PRE_PART ?= "confine del " +!$LEGEND_BOUNDARY_POST_PART ?= "" + +!$LEGEND_SHADOW_TEXT ?= "ombra" +!$LEGEND_NO_SHADOW_TEXT ?= "nessuna ombra" +!$LEGEND_NO_FONT_BG_TEXT ?= "ultimo colore del testo e dello sfondo" +!$LEGEND_NO_FONT_TEXT ?= "ultimo colore del testo" +!$LEGEND_NO_BG_TEXT ?= "ultimo colore dello sfondo" +!$LEGEND_NO_LINE_TEXT ?= "ultimo colore della linea" +!$LEGEND_ROUNDED_BOX ?= "scatola arrotondata" +!$LEGEND_EIGHT_SIDED ?= "otto lati" +!$LEGEND_DOTTED_LINE ?= "punteggiato" +!$LEGEND_DASHED_LINE ?= "tratteggiato" +!$LEGEND_BOLD_LINE ?= "grassetto" +!$LEGEND_SOLID_LINE ?= "solido" +' !$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "transparent, " +!$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "" +!$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "tratteggiato, " +' !$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "" +!$LEGEND_THICKNESS ?= "spessore" +!$SKETCH_FOOTER_WARNING ?= "Avvertimento:" +!$SKETCH_FOOTER_TEXT ?= "Creato per discussione, deve essere convalidato" + +!$COMPONENT_LEGEND_TEXT ?= "componente" +!$EXTERNAL_COMPONENT_LEGEND_TEXT ?= "componente esterno" + +!$CONTAINER_LEGEND_TEXT ?= "contenitore" +!$CONTAINER_BOUNDARY_TYPE ?= "contenitore" +!$CONTAINER_BOUNDARY_LEGEND_TEXT ?= "confine del contenitore" +!$EXTERNAL_CONTAINER_LEGEND_TEXT ?= "contenitore esterno" + +!$PERSON_LEGEND_TEXT ?= "persona" +!$EXTERNAL_PERSON_LEGEND_TEXT ?= "persona esterna" + +!$SYSTEM_LEGEND_TEXT ?= "sistema" +!$SYSTEM_BOUNDARY_TYPE ?= "sistema" +!$SYSTEM_BOUNDARY_LEGEND_TEXT ?= "confine del sistema" +!$EXTERNAL_SYSTEM_LEGEND_TEXT ?= "sistema esterno" + +!$ENTERPRISE_BOUNDARY_TYPE ?= "impresa" +!$ENTERPRISE_BOUNDARY_LEGEND_TEXT ?= "confine dell'impresa" + +!$NODE_LEGEND_TEXT ?= "nodo" diff --git a/themes/puml-theme-C4Language_japanese.puml b/themes/puml-theme-C4Language_japanese.puml new file mode 100644 index 00000000..687b5414 --- /dev/null +++ b/themes/puml-theme-C4Language_japanese.puml @@ -0,0 +1,51 @@ +!$THEME = "C4Language_japanese" + +!$BOUNDARY_LEGEND_TEXT ?= "境界" + +!$LEGEND_TITLE_TEXT ?= "凡例" + +!$LEGEND_BOUNDARY ?= "境界" +' !$LEGEND_BOUNDARY_PRE_PART ?= "" +!$LEGEND_BOUNDARY_POST_PART ?= $LEGEND_BOUNDARY + +!$LEGEND_SHADOW_TEXT ?= "影" +!$LEGEND_NO_SHADOW_TEXT ?= "影なし" +!$LEGEND_NO_FONT_BG_TEXT ?= "最後のテキストと背景色" +!$LEGEND_NO_FONT_TEXT ?= "最後のテキスト色" +!$LEGEND_NO_BG_TEXT ?= "最後の背景色" +!$LEGEND_NO_LINE_TEXT ?= "最後の線色" +!$LEGEND_ROUNDED_BOX ?= "丸いボックス" +!$LEGEND_EIGHT_SIDED ?= "八角形" +!$LEGEND_DOTTED_LINE ?= "点線" +!$LEGEND_DASHED_LINE ?= "破線" +!$LEGEND_BOLD_LINE ?= "太線" +!$LEGEND_SOLID_LINE ?= "実線" +' !$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "transparent, " +!$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "" +!$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "破線, " +' !$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "" +!$LEGEND_THICKNESS ?= "厚さ" + +!$SKETCH_FOOTER_WARNING ?= "警告:" +!$SKETCH_FOOTER_TEXT ?= "議論用に作成されたもので、検証が必要です" + +!$COMPONENT_LEGEND_TEXT ?= "コンポーネント" +!$EXTERNAL_COMPONENT_LEGEND_TEXT ?= "外部コンポーネント" + +!$CONTAINER_LEGEND_TEXT ?= "コンテナ" +!$CONTAINER_BOUNDARY_TYPE ?= "コンテナ" +!$CONTAINER_BOUNDARY_LEGEND_TEXT ?= "コンテナ境界" +!$EXTERNAL_CONTAINER_LEGEND_TEXT ?= "外部コンテナ" + +!$PERSON_LEGEND_TEXT ?= "人" +!$EXTERNAL_PERSON_LEGEND_TEXT ?= "外部の人" + +!$SYSTEM_LEGEND_TEXT ?= "システム" +!$SYSTEM_BOUNDARY_TYPE ?= "システム" +!$SYSTEM_BOUNDARY_LEGEND_TEXT ?= "システム境界" +!$EXTERNAL_SYSTEM_LEGEND_TEXT ?= "外部システム" + +!$ENTERPRISE_BOUNDARY_TYPE ?= "企業" +!$ENTERPRISE_BOUNDARY_LEGEND_TEXT ?= "企業境界" + +!$NODE_LEGEND_TEXT ?= "ノード" diff --git a/themes/puml-theme-C4Language_korean.puml b/themes/puml-theme-C4Language_korean.puml new file mode 100644 index 00000000..0f422e69 --- /dev/null +++ b/themes/puml-theme-C4Language_korean.puml @@ -0,0 +1,51 @@ +!$THEME = "C4Language_korean" + +!$BOUNDARY_LEGEND_TEXT ?= "경계" + +!$LEGEND_TITLE_TEXT ?= "범례" + +!$LEGEND_BOUNDARY ?= "경계" +' !$LEGEND_BOUNDARY_PRE_PART ?= "" +' !$LEGEND_BOUNDARY_POST_PART ?= " " + $LEGEND_BOUNDARY + +!$LEGEND_SHADOW_TEXT ?= "그림자" +!$LEGEND_NO_SHADOW_TEXT ?= "그림자 없음" +!$LEGEND_NO_FONT_BG_TEXT ?= "마지막 텍스트 및 배경 색상" +!$LEGEND_NO_FONT_TEXT ?= "마지막 텍스트 색상" +!$LEGEND_NO_BG_TEXT ?= "마지막 배경 색상" +!$LEGEND_NO_LINE_TEXT ?= "마지막 선 색상" +!$LEGEND_ROUNDED_BOX ?= "둥근 상자" +!$LEGEND_EIGHT_SIDED ?= "팔각형" +!$LEGEND_DOTTED_LINE ?= "점선" +!$LEGEND_DASHED_LINE ?= "대시선" +!$LEGEND_BOLD_LINE ?= "굵은 선" +!$LEGEND_SOLID_LINE ?= "실선" +' !$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "transparent, " +!$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "" +!$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "대시선, " +' !$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "" +!$LEGEND_THICKNESS ?= "두께" + +!$SKETCH_FOOTER_WARNING ?= "경고:" +!$SKETCH_FOOTER_TEXT ?= "토론을 위해 작성되었으며 검증이 필요합니다" + +!$COMPONENT_LEGEND_TEXT ?= "구성 요소" +!$EXTERNAL_COMPONENT_LEGEND_TEXT ?= "외부 구성 요소" + +!$CONTAINER_LEGEND_TEXT ?= "컨테이너" +!$CONTAINER_BOUNDARY_TYPE ?= "컨테이너" +!$CONTAINER_BOUNDARY_LEGEND_TEXT ?= "컨테이너 경계" +!$EXTERNAL_CONTAINER_LEGEND_TEXT ?= "외부 컨테이너" + +!$PERSON_LEGEND_TEXT ?= "사람" +!$EXTERNAL_PERSON_LEGEND_TEXT ?= "외부 사람" + +!$SYSTEM_LEGEND_TEXT ?= "시스템" +!$SYSTEM_BOUNDARY_TYPE ?= "시스템" +!$SYSTEM_BOUNDARY_LEGEND_TEXT ?= "시스템 경계" +!$EXTERNAL_SYSTEM_LEGEND_TEXT ?= "외부 시스템" + +!$ENTERPRISE_BOUNDARY_TYPE ?= "기업" +!$ENTERPRISE_BOUNDARY_LEGEND_TEXT ?= "기업 경계" + +!$NODE_LEGEND_TEXT ?= "노드" diff --git a/themes/puml-theme-C4Language_portuguese.puml b/themes/puml-theme-C4Language_portuguese.puml new file mode 100644 index 00000000..642fd4b3 --- /dev/null +++ b/themes/puml-theme-C4Language_portuguese.puml @@ -0,0 +1,51 @@ +!$THEME = "C4Language_portuguese" + +!$BOUNDARY_LEGEND_TEXT ?= "limite" + +!$LEGEND_TITLE_TEXT ?= "Legenda" + +!$LEGEND_BOUNDARY ?= "limite" +!$LEGEND_BOUNDARY_PRE_PART ?= "limite do " +!$LEGEND_BOUNDARY_POST_PART ?= "" + +!$LEGEND_SHADOW_TEXT ?= "sombra" +!$LEGEND_NO_SHADOW_TEXT ?= "sem sombra" +!$LEGEND_NO_FONT_BG_TEXT ?= "última cor do texto e do fundo" +!$LEGEND_NO_FONT_TEXT ?= "última cor do texto" +!$LEGEND_NO_BG_TEXT ?= "última cor do fundo" +!$LEGEND_NO_LINE_TEXT ?= "última cor da linha" +!$LEGEND_ROUNDED_BOX ?= "caixa arredondada" +!$LEGEND_EIGHT_SIDED ?= "oito lados" +!$LEGEND_DOTTED_LINE ?= "pontilhado" +!$LEGEND_DASHED_LINE ?= "tracejado" +!$LEGEND_BOLD_LINE ?= "negrito" +!$LEGEND_SOLID_LINE ?= "sólido" +' !$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "transparent, " +!$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "" +!$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "tracejado, " +' !$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "" +!$LEGEND_THICKNESS ?= "espessura" + +!$SKETCH_FOOTER_WARNING ?= "Aviso:" +!$SKETCH_FOOTER_TEXT ?= "Criado para discussão, precisa ser validado" + +!$COMPONENT_LEGEND_TEXT ?= "componente" +!$EXTERNAL_COMPONENT_LEGEND_TEXT ?= "componente externo" + +!$CONTAINER_LEGEND_TEXT ?= "contêiner" +!$CONTAINER_BOUNDARY_TYPE ?= "contêiner" +!$CONTAINER_BOUNDARY_LEGEND_TEXT ?= "limite do contêiner" +!$EXTERNAL_CONTAINER_LEGEND_TEXT ?= "contêiner externo" + +!$PERSON_LEGEND_TEXT ?= "pessoa" +!$EXTERNAL_PERSON_LEGEND_TEXT ?= "pessoa externa" + +!$SYSTEM_LEGEND_TEXT ?= "sistema" +!$SYSTEM_BOUNDARY_TYPE ?= "sistema" +!$SYSTEM_BOUNDARY_LEGEND_TEXT ?= "limite do sistema" +!$EXTERNAL_SYSTEM_LEGEND_TEXT ?= "sistema externo" + +!$ENTERPRISE_BOUNDARY_TYPE ?= "empresa" +!$ENTERPRISE_BOUNDARY_LEGEND_TEXT ?= "limite da empresa" + +!$NODE_LEGEND_TEXT ?= "nó" diff --git a/themes/puml-theme-C4Language_russian.puml b/themes/puml-theme-C4Language_russian.puml new file mode 100644 index 00000000..556921d2 --- /dev/null +++ b/themes/puml-theme-C4Language_russian.puml @@ -0,0 +1,51 @@ +!$THEME = "C4Language_russian" + +!$BOUNDARY_LEGEND_TEXT ?= "граница" + +!$LEGEND_TITLE_TEXT ?= "Легенда" + +!$LEGEND_BOUNDARY ?= "граница" +!$LEGEND_BOUNDARY_PRE_PART ?= $LEGEND_BOUNDARY + " " +!$LEGEND_BOUNDARY_POST_PART ?= "" + +!$LEGEND_SHADOW_TEXT ?= "тень" +!$LEGEND_NO_SHADOW_TEXT ?= "без тени" +!$LEGEND_NO_FONT_BG_TEXT ?= "последний цвет текста и фона" +!$LEGEND_NO_FONT_TEXT ?= "последний цвет текста" +!$LEGEND_NO_BG_TEXT ?= "последний цвет фона" +!$LEGEND_NO_LINE_TEXT ?= "последний цвет линии" +!$LEGEND_ROUNDED_BOX ?= "округлая коробка" +!$LEGEND_EIGHT_SIDED ?= "восьмиугольный" +!$LEGEND_DOTTED_LINE ?= "пунктирная линия" +!$LEGEND_DASHED_LINE ?= "штриховая линия" +!$LEGEND_BOLD_LINE ?= "жирная линия" +!$LEGEND_SOLID_LINE ?= "сплошная линия" +' !$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "transparent, " +!$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "" +!$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "штриховая линия, " +' !$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "" +!$LEGEND_THICKNESS ?= "толщина" + +!$SKETCH_FOOTER_WARNING ?= "Предупреждение:" +!$SKETCH_FOOTER_TEXT ?= "Создано для обсуждения, требует проверки" + +!$COMPONENT_LEGEND_TEXT ?= "компонент" +!$EXTERNAL_COMPONENT_LEGEND_TEXT ?= "внешний компонент" + +!$CONTAINER_LEGEND_TEXT ?= "контейнер" +!$CONTAINER_BOUNDARY_TYPE ?= "контейнер" +!$CONTAINER_BOUNDARY_LEGEND_TEXT ?= "граница контейнера" +!$EXTERNAL_CONTAINER_LEGEND_TEXT ?= "внешний контейнер" + +!$PERSON_LEGEND_TEXT ?= "человек" +!$EXTERNAL_PERSON_LEGEND_TEXT ?= "внешний человек" + +!$SYSTEM_LEGEND_TEXT ?= "система" +!$SYSTEM_BOUNDARY_TYPE ?= "система" +!$SYSTEM_BOUNDARY_LEGEND_TEXT ?= "граница системы" +!$EXTERNAL_SYSTEM_LEGEND_TEXT ?= "внешняя система" + +!$ENTERPRISE_BOUNDARY_TYPE ?= "предприятия" +!$ENTERPRISE_BOUNDARY_LEGEND_TEXT ?= "граница предприятия" + +!$NODE_LEGEND_TEXT ?= "узел" diff --git a/themes/puml-theme-C4Language_spanish.puml b/themes/puml-theme-C4Language_spanish.puml new file mode 100644 index 00000000..167b6257 --- /dev/null +++ b/themes/puml-theme-C4Language_spanish.puml @@ -0,0 +1,50 @@ +!$THEME = "C4Language_spanish" + +!$BOUNDARY_LEGEND_TEXT ?= "límite" + +!$LEGEND_TITLE_TEXT ?= "Leyenda" + +!$LEGEND_BOUNDARY ?= "límite" +!$LEGEND_BOUNDARY_PRE_PART ?= "límite del " +!$LEGEND_BOUNDARY_POST_PART ?= "" + +!$LEGEND_SHADOW_TEXT ?= "sombra" +!$LEGEND_NO_SHADOW_TEXT ?= "sin sombra" +!$LEGEND_NO_FONT_BG_TEXT ?= "último color de texto y fondo" +!$LEGEND_NO_FONT_TEXT ?= "último color de texto" +!$LEGEND_NO_BG_TEXT ?= "último color de fondo" +!$LEGEND_NO_LINE_TEXT ?= "último color de línea" +!$LEGEND_ROUNDED_BOX ?= "caja redondeada" +!$LEGEND_EIGHT_SIDED ?= "octogonal" +!$LEGEND_DOTTED_LINE ?= "punteado" +!$LEGEND_DASHED_LINE ?= "discontinuo" +!$LEGEND_BOLD_LINE ?= "negrita" +!$LEGEND_SOLID_LINE ?= "sólido" +' !$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "transparent, " +!$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "" +!$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "discontinuo, " +' !$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "" +!$LEGEND_THICKNESS ?= "grosor" +!$SKETCH_FOOTER_WARNING ?= "Advertencia:" +!$SKETCH_FOOTER_TEXT ?= "Creado para discusión, necesita ser validado" + +!$COMPONENT_LEGEND_TEXT ?= "componente" +!$EXTERNAL_COMPONENT_LEGEND_TEXT ?= "componente externo" + +!$CONTAINER_LEGEND_TEXT ?= "contenedor" +!$CONTAINER_BOUNDARY_TYPE ?= "contenedor" +!$CONTAINER_BOUNDARY_LEGEND_TEXT ?= "límite del contenedor" +!$EXTERNAL_CONTAINER_LEGEND_TEXT ?= "contenedor externo" + +!$PERSON_LEGEND_TEXT ?= "persona" +!$EXTERNAL_PERSON_LEGEND_TEXT ?= "persona externa" + +!$SYSTEM_LEGEND_TEXT ?= "sistema" +!$SYSTEM_BOUNDARY_TYPE ?= "sistema" +!$SYSTEM_BOUNDARY_LEGEND_TEXT ?= "límite del sistema" +!$EXTERNAL_SYSTEM_LEGEND_TEXT ?= "sistema externo" + +!$ENTERPRISE_BOUNDARY_TYPE ?= "empresa" +!$ENTERPRISE_BOUNDARY_LEGEND_TEXT ?= "límite de la empresa" + +!$NODE_LEGEND_TEXT ?= "nodo" diff --git a/themes/puml-theme-C4Language_ukrainian.puml b/themes/puml-theme-C4Language_ukrainian.puml new file mode 100644 index 00000000..b18cf328 --- /dev/null +++ b/themes/puml-theme-C4Language_ukrainian.puml @@ -0,0 +1,52 @@ +!$THEME = "C4Language_ukrainian" + +!$BOUNDARY_LEGEND_TEXT ?= "межа" + +!$LEGEND_TITLE_TEXT ?= "Легенда" + +!$LEGEND_BOUNDARY ?= "межа" +!$LEGEND_BOUNDARY_PRE_PART ?= $LEGEND_BOUNDARY + "" +' !$LEGEND_BOUNDARY_POST_PART ?= " " + $LEGEND_BOUNDARY + +!$LEGEND_SHADOW_TEXT ?= "тінь" +!$LEGEND_NO_SHADOW_TEXT ?= "без тіні" +!$LEGEND_NO_FONT_BG_TEXT ?= "останній колір тексту та фону" + +!$LEGEND_NO_FONT_TEXT ?= "останній колір тексту" +!$LEGEND_NO_BG_TEXT ?= "останній колір фону" +!$LEGEND_NO_LINE_TEXT ?= "останній колір лінії" +!$LEGEND_ROUNDED_BOX ?= "округлий блок" +!$LEGEND_EIGHT_SIDED ?= "восьмикутний" +!$LEGEND_DOTTED_LINE ?= "пунктирна лінія" +!$LEGEND_DASHED_LINE ?= "штрихова лінія" +!$LEGEND_BOLD_LINE ?= "жирна лінія" +!$LEGEND_SOLID_LINE ?= "суцільна лінія" +' !$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "transparent, " +!$LEGEND_BOUNDARY_TRANSPARENT_INCL_COMA ?= "" +!$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "штрихова, " +' !$LEGEND_BOUNDARY_DASHED_INCL_COMA ?= "" +!$LEGEND_THICKNESS ?= "товщина" + +!$SKETCH_FOOTER_WARNING ?= "Попередження:" +!$SKETCH_FOOTER_TEXT ?= "Створено для обговорення, потребує перевірки" + +!$COMPONENT_LEGEND_TEXT ?= "компонент" +!$EXTERNAL_COMPONENT_LEGEND_TEXT ?= "зовнішній компонент" + +!$CONTAINER_LEGEND_TEXT ?= "контейнер" +!$CONTAINER_BOUNDARY_TYPE ?= "контейнер" +!$CONTAINER_BOUNDARY_LEGEND_TEXT ?= "межа контейнера" +!$EXTERNAL_CONTAINER_LEGEND_TEXT ?= "зовнішній контейнер" + +!$PERSON_LEGEND_TEXT ?= "особа" +!$EXTERNAL_PERSON_LEGEND_TEXT ?= "зовнішня особа" + +!$SYSTEM_LEGEND_TEXT ?= "система" +!$SYSTEM_BOUNDARY_TYPE ?= "система" +!$SYSTEM_BOUNDARY_LEGEND_TEXT ?= "межа системи" +!$EXTERNAL_SYSTEM_LEGEND_TEXT ?= "зовнішня система" + +!$ENTERPRISE_BOUNDARY_TYPE ?= "підприємства" +!$ENTERPRISE_BOUNDARY_LEGEND_TEXT ?= "межа підприємства" + +!$NODE_LEGEND_TEXT ?= "вузол" diff --git a/themes/puml-theme-C4_FirstTest.puml b/themes/puml-theme-C4_FirstTest.puml new file mode 100644 index 00000000..a4f4a380 --- /dev/null +++ b/themes/puml-theme-C4_FirstTest.puml @@ -0,0 +1,112 @@ +' First test with themes (it depends on a original theme, changes colors and set $TECHN_FONT_SIZE) + +!theme cyborg + +!$THEME = "C4_FirstTest" + +!$ELEMENT_FONT_COLOR ?= $PRIMARY_TEXT + +!$ARROW_COLOR ?= $PRIMARY_LIGHT +!$ARROW_FONT_COLOR ?= $ARROW_COLOR + +!$BOUNDARY_COLOR ?= $PRIMARY_DARK +!$BOUNDARY_BG_COLOR ?= "transparent" + +!$LEGEND_FONT_COLOR ?= "#FFFFFF" +!$LEGEND_TITLE_COLOR ?= "#000000" +' %darken(darkkhaki,50), #khaki +!$LEGEND_DARK_COLOR ?= "#66622E" +!$LEGEND_LIGHT_COLOR ?= "#khaki" + +!$PERSON_FONT_COLOR ?= $INFO_TEXT +!$PERSON_BG_COLOR ?= $INFO_LIGHT +!$PERSON_BORDER_COLOR ?= $INFO_DARK + +!$EXTERNAL_PERSON_FONT_COLOR ?= $INFO_TEXT +!$EXTERNAL_PERSON_BG_COLOR ?= $INFO_DARK +!$EXTERNAL_PERSON_BORDER_COLOR ?= $INFO_LIGHT + +!$SYSTEM_FONT_COLOR ?= $SUCCESS_TEXT +!$SYSTEM_BG_COLOR ?= $SUCCESS_LIGHT +!$SYSTEM_BORDER_COLOR ?= $SUCCESS_DARK + +!$EXTERNAL_SYSTEM_FONT_COLOR ?= $SUCCESS_TEXT +!$EXTERNAL_SYSTEM_BG_COLOR ?= $SUCCESS_DARK +!$EXTERNAL_SYSTEM_BORDER_COLOR ?= $SUCCESS_LIGHT + +!$CONTAINER_FONT_COLOR ?= $WARNING_TEXT +!$CONTAINER_BG_COLOR ?= $DANGER_LIGHT +!$CONTAINER_BORDER_COLOR ?= $DANGER_DARK + +!$EXTERNAL_CONTAINER_FONT_COLOR ?= $WARNING_TEXT +!$EXTERNAL_CONTAINER_BG_COLOR ?= $DANGER_DARK +!$EXTERNAL_CONTAINER_BORDER_COLOR ?= $DANGER_LIGHT + +!$COMPONENT_FONT_COLOR ?= $PRIMARY_TEXT +!$COMPONENT_BG_COLOR ?= $PRIMARY_LIGHT +!$COMPONENT_BORDER_COLOR ?= $PRIMARY_DARK + +!$EXTERNAL_COMPONENT_FONT_COLOR ?= $PRIMARY_TEXT +!$EXTERNAL_COMPONENT_BG_COLOR ?= $PRIMARY_DARK +!$EXTERNAL_COMPONENT_BORDER_COLOR ?= $PRIMARY_LIGHT + +!$NODE_FONT_COLOR ?= $SECONDARY_TEXT +!$NODE_BG_COLOR ?= $SECONDARY_LIGHT +!$NODE_BORDER_COLOR ?= $SECONDARY_DARK + +!$TECHN_FONT_SIZE ?= 18 + +' <<<<<<<<<<<<< sequence diagram is styled via skinparam and style + +' $BOUNDARY_BG_COLOR... have to be defined in theme itself that it can be used in styles,... +' (no default values which are defined in C4.puml) +' If skinparams and styles are defined with concrete values no variables are required +!$BOUNDARY_BG_COLOR ?= "transparent" +!$BOUNDARY_COLOR ?= "#444444" +!$ARROW_COLOR ?= "#666666" + +' replace transparent with concrete background that it can be used as font color too +!if ($BOUNDARY_BG_COLOR == "transparent") + !$SEQUENCE_BG_COLOR = white +!else + !$SEQUENCE_BG_COLOR = $BOUNDARY_BG_COLOR +!endif + +' "C4 styled" default is no foot boxes +hide footbox +' "C4 styled" default is that lifeline is arrow color +skinparam SequenceLifelineBorderColor $ARROW_COLOR + +skinparam SequenceGroupBodyBackgroundColor $SEQUENCE_BG_COLOR +skinparam SequenceGroupFontColor $BOUNDARY_COLOR +skinparam SequenceGroupBackgroundColor $BOUNDARY_COLOR +skinparam SequenceGroupHeaderFontColor $SEQUENCE_BG_COLOR +skinparam SequenceGroupBorderColor $BOUNDARY_COLOR + +skinparam SequenceReferenceBackgroundColor $SEQUENCE_BG_COLOR +skinparam SequenceReferenceFontColor $BOUNDARY_COLOR +skinparam SequenceReferenceHeaderBackgroundColor $BOUNDARY_COLOR +' VIA STYLE +' skinparam SequenceReferenceHeaderFontColor $SEQUENCE_BG_COLOR + +skinparam SequenceReferenceBorderColor $BOUNDARY_COLOR + +skinparam SequenceDividerBackgroundColor $SEQUENCE_BG_COLOR +skinparam SequenceDividerFontColor $BOUNDARY_COLOR +skinparam SequenceDividerBorderColor $BOUNDARY_COLOR + +' VIA STYLE +' skinparam SequenceDelayFontColor green + + +' <<<<<<<<<<<<< end sequence diagram diff --git a/themes/puml-theme-C4_blue.puml b/themes/puml-theme-C4_blue.puml new file mode 100644 index 00000000..5172351c --- /dev/null +++ b/themes/puml-theme-C4_blue.puml @@ -0,0 +1,87 @@ +!$THEME = "C4_blue" + +!$ELEMENT_FONT_COLOR ?= "#FFFFFF" + +!$PERSON_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$PERSON_BG_COLOR ?= "#08427B" +!$PERSON_BORDER_COLOR ?= "#073B6F" +!$EXTERNAL_PERSON_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$EXTERNAL_PERSON_BG_COLOR ?= "#686868" +!$EXTERNAL_PERSON_BORDER_COLOR ?= "#8A8A8A" + +!$SYSTEM_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$SYSTEM_BG_COLOR ?= "#1168BD" +!$SYSTEM_BORDER_COLOR ?= "#3C7FC0" +!$EXTERNAL_SYSTEM_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$EXTERNAL_SYSTEM_BG_COLOR ?= "#999999" +!$EXTERNAL_SYSTEM_BORDER_COLOR ?= "#8A8A8A" + +!$CONTAINER_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$CONTAINER_BG_COLOR ?= "#438DD5" +!$CONTAINER_BORDER_COLOR ?= "#3C7FC0" +!$EXTERNAL_CONTAINER_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$EXTERNAL_CONTAINER_BG_COLOR ?= "#B3B3B3" +!$EXTERNAL_CONTAINER_BORDER_COLOR ?= "#A6A6A6" + +!$COMPONENT_FONT_COLOR ?= "#000000" +!$COMPONENT_BG_COLOR ?= "#85BBF0" +!$COMPONENT_BORDER_COLOR ?= "#78A8D8" +!$EXTERNAL_COMPONENT_FONT_COLOR ?= $COMPONENT_FONT_COLOR +!$EXTERNAL_COMPONENT_BG_COLOR ?= "#CCCCCC" +!$EXTERNAL_COMPONENT_BORDER_COLOR ?= "#BFBFBF" + + +' <<<<<<<<<<<<< sequence diagram is styled via skinparam and style + +' $BOUNDARY_BG_COLOR... have to be defined in theme itself that it can be used in styles,... +' (no default values which are defined in C4.puml) +' If skinparams and styles are defined with concrete values no variables are required +!$BOUNDARY_BG_COLOR ?= "transparent" +!$BOUNDARY_COLOR ?= "#444444" +!$ARROW_COLOR ?= "#666666" + +' replace transparent with concrete background that it can be used as font color too +!if ($BOUNDARY_BG_COLOR == "transparent") + !$SEQUENCE_BG_COLOR = white +!else + !$SEQUENCE_BG_COLOR = $BOUNDARY_BG_COLOR +!endif + +' "C4 styled" default is no foot boxes +hide footbox +' "C4 styled" default is that lifeline is arrow color +skinparam SequenceLifelineBorderColor $ARROW_COLOR + +skinparam SequenceGroupBodyBackgroundColor $SEQUENCE_BG_COLOR +skinparam SequenceGroupFontColor $BOUNDARY_COLOR +skinparam SequenceGroupBackgroundColor $BOUNDARY_COLOR +skinparam SequenceGroupHeaderFontColor $SEQUENCE_BG_COLOR +skinparam SequenceGroupBorderColor $BOUNDARY_COLOR + +skinparam SequenceReferenceBackgroundColor $SEQUENCE_BG_COLOR +skinparam SequenceReferenceFontColor $BOUNDARY_COLOR +skinparam SequenceReferenceHeaderBackgroundColor $BOUNDARY_COLOR +' VIA STYLE +' skinparam SequenceReferenceHeaderFontColor $SEQUENCE_BG_COLOR + +skinparam SequenceReferenceBorderColor $BOUNDARY_COLOR + +skinparam SequenceDividerBackgroundColor $SEQUENCE_BG_COLOR +skinparam SequenceDividerFontColor $BOUNDARY_COLOR +skinparam SequenceDividerBorderColor $BOUNDARY_COLOR + +' VIA STYLE +' skinparam SequenceDelayFontColor green + + +' <<<<<<<<<<<<< end sequence diagram diff --git a/themes/puml-theme-C4_brown.puml b/themes/puml-theme-C4_brown.puml new file mode 100644 index 00000000..9428ec99 --- /dev/null +++ b/themes/puml-theme-C4_brown.puml @@ -0,0 +1,87 @@ +!$THEME = "C4_brown" + +!$ELEMENT_FONT_COLOR ?= "#FFFFFF" + +!$PERSON_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$PERSON_BG_COLOR ?= "#7B4208" +!$PERSON_BORDER_COLOR ?= "#6F3B07" +!$EXTERNAL_PERSON_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$EXTERNAL_PERSON_BG_COLOR ?= "#686868" +!$EXTERNAL_PERSON_BORDER_COLOR ?= "#8A8A8A" + +!$SYSTEM_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$SYSTEM_BG_COLOR ?= "#BD6811" +!$SYSTEM_BORDER_COLOR ?= "#C07F3C" +!$EXTERNAL_SYSTEM_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$EXTERNAL_SYSTEM_BG_COLOR ?= "#999999" +!$EXTERNAL_SYSTEM_BORDER_COLOR ?= "#8A8A8A" + +!$CONTAINER_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$CONTAINER_BG_COLOR ?= "#D58D43" +!$CONTAINER_BORDER_COLOR ?= "#C07F3C" +!$EXTERNAL_CONTAINER_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$EXTERNAL_CONTAINER_BG_COLOR ?= "#B3B3B3" +!$EXTERNAL_CONTAINER_BORDER_COLOR ?= "#A6A6A6" + +!$COMPONENT_FONT_COLOR ?= "#000000" +!$COMPONENT_BG_COLOR ?= "#F0BB85" +!$COMPONENT_BORDER_COLOR ?= "#D8A878" +!$EXTERNAL_COMPONENT_FONT_COLOR ?= $COMPONENT_FONT_COLOR +!$EXTERNAL_COMPONENT_BG_COLOR ?= "#CCCCCC" +!$EXTERNAL_COMPONENT_BORDER_COLOR ?= "#BFBFBF" + +' <<<<<<<<<<<<< sequence diagram is styled via skinparam and style + +' $BOUNDARY_BG_COLOR... have to be defined in theme itself that it can be used in styles,... +' (no default values which are defined in C4.puml) +' If skinparams and styles are defined with concrete values no variables are required +!$BOUNDARY_BG_COLOR ?= "transparent" +!$BOUNDARY_COLOR ?= "#444444" +!$ARROW_COLOR ?= "#666666" + +' replace transparent with concrete background that it can be used as font color too +!if ($BOUNDARY_BG_COLOR == "transparent") + !$SEQUENCE_BG_COLOR = white +!else + !$SEQUENCE_BG_COLOR = $BOUNDARY_BG_COLOR +!endif + +' "C4 styled" default is no foot boxes +hide footbox +' "C4 styled" default is that lifeline is arrow color +skinparam SequenceLifelineBorderColor $ARROW_COLOR + +skinparam SequenceGroupBodyBackgroundColor $SEQUENCE_BG_COLOR +skinparam SequenceGroupFontColor $BOUNDARY_COLOR +skinparam SequenceGroupBackgroundColor $BOUNDARY_COLOR +skinparam SequenceGroupHeaderFontColor $SEQUENCE_BG_COLOR +skinparam SequenceGroupBorderColor $BOUNDARY_COLOR + +skinparam SequenceReferenceBackgroundColor $SEQUENCE_BG_COLOR +skinparam SequenceReferenceFontColor $BOUNDARY_COLOR +skinparam SequenceReferenceHeaderBackgroundColor $BOUNDARY_COLOR +' VIA STYLE +' skinparam SequenceReferenceHeaderFontColor $SEQUENCE_BG_COLOR + +skinparam SequenceReferenceBorderColor $BOUNDARY_COLOR + +skinparam SequenceDividerBackgroundColor $SEQUENCE_BG_COLOR +skinparam SequenceDividerFontColor $BOUNDARY_COLOR +skinparam SequenceDividerBorderColor $BOUNDARY_COLOR + +' VIA STYLE +' skinparam SequenceDelayFontColor green + + +' <<<<<<<<<<<<< end sequence diagram + diff --git a/themes/puml-theme-C4_green.puml b/themes/puml-theme-C4_green.puml new file mode 100644 index 00000000..0e73a6b7 --- /dev/null +++ b/themes/puml-theme-C4_green.puml @@ -0,0 +1,87 @@ +!$THEME = "C4_green" + +!$ELEMENT_FONT_COLOR ?= "#FFFFFF" + +!$PERSON_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$PERSON_BG_COLOR ?= "#427B08" +!$PERSON_BORDER_COLOR ?= "#3B6F07" +!$EXTERNAL_PERSON_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$EXTERNAL_PERSON_BG_COLOR ?= "#686868" +!$EXTERNAL_PERSON_BORDER_COLOR ?= "#8A8A8A" + +!$SYSTEM_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$SYSTEM_BG_COLOR ?= "#68BD11" +!$SYSTEM_BORDER_COLOR ?= "#7FC03C" +!$EXTERNAL_SYSTEM_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$EXTERNAL_SYSTEM_BG_COLOR ?= "#999999" +!$EXTERNAL_SYSTEM_BORDER_COLOR ?= "#8A8A8A" + +!$CONTAINER_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$CONTAINER_BG_COLOR ?= "#8DD543" +!$CONTAINER_BORDER_COLOR ?= "#7FC03C" +!$EXTERNAL_CONTAINER_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$EXTERNAL_CONTAINER_BG_COLOR ?= "#B3B3B3" +!$EXTERNAL_CONTAINER_BORDER_COLOR ?= "#A6A6A6" + +!$COMPONENT_FONT_COLOR ?= "#000000" +!$COMPONENT_BG_COLOR ?= "#BBF085" +!$COMPONENT_BORDER_COLOR ?= "#A8D878" +!$EXTERNAL_COMPONENT_FONT_COLOR ?= $COMPONENT_FONT_COLOR +!$EXTERNAL_COMPONENT_BG_COLOR ?= "#CCCCCC" +!$EXTERNAL_COMPONENT_BORDER_COLOR ?= "#BFBFBF" + +' <<<<<<<<<<<<< sequence diagram is styled via skinparam and style + +' $BOUNDARY_BG_COLOR... have to be defined in theme itself that it can be used in styles,... +' (no default values which are defined in C4.puml) +' If skinparams and styles are defined with concrete values no variables are required +!$BOUNDARY_BG_COLOR ?= "transparent" +!$BOUNDARY_COLOR ?= "#444444" +!$ARROW_COLOR ?= "#666666" + +' replace transparent with concrete background that it can be used as font color too +!if ($BOUNDARY_BG_COLOR == "transparent") + !$SEQUENCE_BG_COLOR = white +!else + !$SEQUENCE_BG_COLOR = $BOUNDARY_BG_COLOR +!endif + +' "C4 styled" default is no foot boxes +hide footbox +' "C4 styled" default is that lifeline is arrow color +skinparam SequenceLifelineBorderColor $ARROW_COLOR + +skinparam SequenceGroupBodyBackgroundColor $SEQUENCE_BG_COLOR +skinparam SequenceGroupFontColor $BOUNDARY_COLOR +skinparam SequenceGroupBackgroundColor $BOUNDARY_COLOR +skinparam SequenceGroupHeaderFontColor $SEQUENCE_BG_COLOR +skinparam SequenceGroupBorderColor $BOUNDARY_COLOR + +skinparam SequenceReferenceBackgroundColor $SEQUENCE_BG_COLOR +skinparam SequenceReferenceFontColor $BOUNDARY_COLOR +skinparam SequenceReferenceHeaderBackgroundColor $BOUNDARY_COLOR +' VIA STYLE +' skinparam SequenceReferenceHeaderFontColor $SEQUENCE_BG_COLOR + +skinparam SequenceReferenceBorderColor $BOUNDARY_COLOR + +skinparam SequenceDividerBackgroundColor $SEQUENCE_BG_COLOR +skinparam SequenceDividerFontColor $BOUNDARY_COLOR +skinparam SequenceDividerBorderColor $BOUNDARY_COLOR + +' VIA STYLE +' skinparam SequenceDelayFontColor green + + +' <<<<<<<<<<<<< end sequence diagram + diff --git a/themes/puml-theme-C4_sandstone.puml b/themes/puml-theme-C4_sandstone.puml new file mode 100644 index 00000000..583c5be2 --- /dev/null +++ b/themes/puml-theme-C4_sandstone.puml @@ -0,0 +1,82 @@ +!theme sandstone + +!$THEME = "C4_sandstone" + +!$ELEMENT_FONT_COLOR ?= $PRIMARY_TEXT + +!$ARROW_COLOR ?= $PRIMARY_LIGHT +!$ARROW_FONT_COLOR ?= $ARROW_COLOR + +!$PERSON_FONT_COLOR ?= $INFO_TEXT +!$PERSON_BG_COLOR ?= $INFO +!$PERSON_BORDER_COLOR ?= $INFO_DARK + +!$EXTERNAL_PERSON_FONT_COLOR ?= $INFO_DARK +!$EXTERNAL_PERSON_BG_COLOR ?= $LIGHT +!$EXTERNAL_PERSON_BORDER_COLOR ?= $INFO_DARK + +!$SYSTEM_FONT_COLOR ?= $WHITE +!$SYSTEM_BG_COLOR ?= $DARK +!$SYSTEM_BORDER_COLOR ?= $DARK_DARK + +!$EXTERNAL_SYSTEM_FONT_COLOR ?= $DARK_DARK +!$EXTERNAL_SYSTEM_BG_COLOR ?= $LIGHT +!$EXTERNAL_SYSTEM_BORDER_COLOR ?= $DARK_DARK + +!$CONTAINER_FONT_COLOR ?= $WARNING_TEXT +!$CONTAINER_BG_COLOR ?= $WARNING +!$CONTAINER_BORDER_COLOR ?= $WARNING_DARK + +!$EXTERNAL_CONTAINER_FONT_COLOR ?= $WARNING_DARK +!$EXTERNAL_CONTAINER_BG_COLOR ?= $LIGHT +!$EXTERNAL_CONTAINER_BORDER_COLOR ?= $WARNING_DARK + +!$COMPONENT_FONT_COLOR ?= $PRIMARY_TEXT +!$COMPONENT_BG_COLOR ?= $PRIMARY +!$COMPONENT_BORDER_COLOR ?= $PRIMARY_DARK + +!$EXTERNAL_COMPONENT_FONT_COLOR ?= $PRIMARY_DARK +!$EXTERNAL_COMPONENT_BG_COLOR ?= $LIGHT +!$EXTERNAL_COMPONENT_BORDER_COLOR ?= $PRIMARY_DARK + +!$NODE_FONT_COLOR ?= $LIGHT +!$NODE_BG_COLOR ?= $SECONDARY +!$NODE_BORDER_COLOR ?= $SECONDARY_DARK + +!$BOUNDARY_COLOR ?= $PRIMARY_DARK +!$BOUNDARY_BG_COLOR ?= "transparent" +!$BOUNDARY_BORDER_STYLE ?= "solid" +' border is not dashed in theme "united", remove dashed from legend text too +!$LEGEND_DASHED_BOUNDARY ?= "" +!$LEGEND_DASHED_TRANSPARENT_BOUNDARY ?= "" +!$ENTERPRISE_BOUNDARY_COLOR ?= $SYSTEM_BORDER_COLOR +!$SYSTEM_BOUNDARY_COLOR ?= $SYSTEM_BORDER_COLOR +!$CONTAINER_BOUNDARY_COLOR ?= $CONTAINER_BORDER_COLOR + +!$LEGEND_TITLE_COLOR ?= $LIGHT +!$LEGEND_FONT_COLOR ?= $LIGHT +!$LEGEND_BG_COLOR ?= $SECONDARY +!$LEGEND_BORDER_COLOR ?= $SECONDARY_DARK + +' <<<<<<<<<<<<< sequence diagram is styled via skinparam and style + +' "C4 styled" default is no foot boxes +hide footbox + +' fix wrong ReferenceHeaderFontColor + + +' fix invisible SequenceDelayFontColor + + +' <<<<<<<<<<<<< end sequence diagram diff --git a/themes/puml-theme-C4_superhero.puml b/themes/puml-theme-C4_superhero.puml new file mode 100644 index 00000000..1b5aa5b2 --- /dev/null +++ b/themes/puml-theme-C4_superhero.puml @@ -0,0 +1,84 @@ +!$BGCOLOR ?= black + +!theme superhero + +!$THEME = "C4_superhero" + +!$ELEMENT_FONT_COLOR ?= $PRIMARY_TEXT + +!$ARROW_COLOR ?= $PRIMARY_LIGHT +!$ARROW_FONT_COLOR ?= $ARROW_COLOR + +!$PERSON_FONT_COLOR ?= $INFO_TEXT +!$PERSON_BG_COLOR ?= $INFO +!$PERSON_BORDER_COLOR ?= $INFO_DARK + +!$EXTERNAL_PERSON_FONT_COLOR ?= $INFO_DARK +!$EXTERNAL_PERSON_BG_COLOR ?= $SECONDARY_DARK +!$EXTERNAL_PERSON_BORDER_COLOR ?= $INFO_DARK + +!$SYSTEM_FONT_COLOR ?= $WHITE +!$SYSTEM_BG_COLOR ?= $DARK +!$SYSTEM_BORDER_COLOR ?= $DARK_DARK + +!$EXTERNAL_SYSTEM_FONT_COLOR ?= 000000 +!$EXTERNAL_SYSTEM_BG_COLOR ?= $SECONDARY_DARK +!$EXTERNAL_SYSTEM_BORDER_COLOR ?= $DARK_LIGHT + +!$CONTAINER_FONT_COLOR ?= $WARNING_TEXT +!$CONTAINER_BG_COLOR ?= $WARNING +!$CONTAINER_BORDER_COLOR ?= $WARNING_DARK + +!$EXTERNAL_CONTAINER_FONT_COLOR ?= $WARNING_DARK +!$EXTERNAL_CONTAINER_BG_COLOR ?= $SECONDARY_DARK +!$EXTERNAL_CONTAINER_BORDER_COLOR ?= $WARNING_DARK + +!$COMPONENT_FONT_COLOR ?= $PRIMARY_TEXT +!$COMPONENT_BG_COLOR ?= $PRIMARY +!$COMPONENT_BORDER_COLOR ?= $PRIMARY_DARK + +!$EXTERNAL_COMPONENT_FONT_COLOR ?= $PRIMARY_DARK +!$EXTERNAL_COMPONENT_BG_COLOR ?= $SECONDARY_DARK +!$EXTERNAL_COMPONENT_BORDER_COLOR ?= $PRIMARY_DARK + +!$NODE_FONT_COLOR ?= $LIGHT +!$NODE_BG_COLOR ?= $SECONDARY +!$NODE_BORDER_COLOR ?= $SECONDARY_DARK + +!$BOUNDARY_COLOR ?= $PRIMARY_DARK +!$BOUNDARY_BG_COLOR ?= "transparent" +!$BOUNDARY_BORDER_STYLE ?= "solid" +' border is not dashed in theme "united", remove dashed from legend text too +!$LEGEND_DASHED_BOUNDARY ?= "" +!$LEGEND_DASHED_TRANSPARENT_BOUNDARY ?= "" +!$ENTERPRISE_BOUNDARY_COLOR ?= $SYSTEM_BORDER_COLOR +!$SYSTEM_BOUNDARY_COLOR ?= $SYSTEM_BORDER_COLOR +!$CONTAINER_BOUNDARY_COLOR ?= $CONTAINER_BORDER_COLOR + +!$LEGEND_TITLE_COLOR ?= $LIGHT +!$LEGEND_FONT_COLOR ?= $LIGHT +!$LEGEND_BG_COLOR ?= $SECONDARY +!$LEGEND_BORDER_COLOR ?= $SECONDARY_DARK + +' <<<<<<<<<<<<< sequence diagram is styled via skinparam and style + +' "C4 styled" default is no foot boxes +hide footbox + +' fix wrong ReferenceHeaderFontColor + + +' fix invisible SequenceDelayFontColor + + +' <<<<<<<<<<<<< end sequence diagram diff --git a/themes/puml-theme-C4_united.puml b/themes/puml-theme-C4_united.puml new file mode 100644 index 00000000..74d3855b --- /dev/null +++ b/themes/puml-theme-C4_united.puml @@ -0,0 +1,82 @@ +!theme united + +!$THEME = "C4_united" + +!$ELEMENT_FONT_COLOR ?= $PRIMARY_TEXT + +!$ARROW_COLOR ?= $PRIMARY_LIGHT +!$ARROW_FONT_COLOR ?= $ARROW_COLOR + +!$PERSON_FONT_COLOR ?= $INFO_TEXT +!$PERSON_BG_COLOR ?= $INFO +!$PERSON_BORDER_COLOR ?= $INFO_DARK + +!$EXTERNAL_PERSON_FONT_COLOR ?= $INFO_DARK +!$EXTERNAL_PERSON_BG_COLOR ?= $LIGHT +!$EXTERNAL_PERSON_BORDER_COLOR ?= $INFO_DARK + +!$SYSTEM_FONT_COLOR ?= $WHITE +!$SYSTEM_BG_COLOR ?= $DARK +!$SYSTEM_BORDER_COLOR ?= $DARK_DARK + +!$EXTERNAL_SYSTEM_FONT_COLOR ?= $DARK_DARK +!$EXTERNAL_SYSTEM_BG_COLOR ?= $LIGHT +!$EXTERNAL_SYSTEM_BORDER_COLOR ?= $DARK_DARK + +!$CONTAINER_FONT_COLOR ?= $WARNING_TEXT +!$CONTAINER_BG_COLOR ?= $WARNING +!$CONTAINER_BORDER_COLOR ?= $WARNING_DARK + +!$EXTERNAL_CONTAINER_FONT_COLOR ?= $WARNING_DARK +!$EXTERNAL_CONTAINER_BG_COLOR ?= $LIGHT +!$EXTERNAL_CONTAINER_BORDER_COLOR ?= $WARNING_DARK + +!$COMPONENT_FONT_COLOR ?= $PRIMARY_TEXT +!$COMPONENT_BG_COLOR ?= $PRIMARY +!$COMPONENT_BORDER_COLOR ?= $PRIMARY_DARK + +!$EXTERNAL_COMPONENT_FONT_COLOR ?= $PRIMARY_DARK +!$EXTERNAL_COMPONENT_BG_COLOR ?= $LIGHT +!$EXTERNAL_COMPONENT_BORDER_COLOR ?= $PRIMARY_DARK + +!$NODE_FONT_COLOR ?= $LIGHT +!$NODE_BG_COLOR ?= $SECONDARY +!$NODE_BORDER_COLOR ?= $SECONDARY_DARK + +!$BOUNDARY_COLOR ?= $PRIMARY_DARK +!$BOUNDARY_BG_COLOR ?= "transparent" +!$BOUNDARY_BORDER_STYLE ?= "solid" +' border is not dashed in theme "united", remove dashed from legend text too +!$LEGEND_DASHED_BOUNDARY ?= "" +!$LEGEND_DASHED_TRANSPARENT_BOUNDARY ?= "" +!$ENTERPRISE_BOUNDARY_COLOR ?= $SYSTEM_BORDER_COLOR +!$SYSTEM_BOUNDARY_COLOR ?= $SYSTEM_BORDER_COLOR +!$CONTAINER_BOUNDARY_COLOR ?= $CONTAINER_BORDER_COLOR + +!$LEGEND_TITLE_COLOR ?= $LIGHT +!$LEGEND_FONT_COLOR ?= $LIGHT +!$LEGEND_BG_COLOR ?= $SECONDARY +!$LEGEND_BORDER_COLOR ?= $SECONDARY_DARK + +' <<<<<<<<<<<<< sequence diagram is styled via skinparam and style + +' "C4 styled" default is no foot boxes +hide footbox + +' fix wrong ReferenceHeaderFontColor + + +' fix invisible SequenceDelayFontColor + + +' <<<<<<<<<<<<< end sequence diagram diff --git a/themes/puml-theme-C4_violet.puml b/themes/puml-theme-C4_violet.puml new file mode 100644 index 00000000..be9fb7b0 --- /dev/null +++ b/themes/puml-theme-C4_violet.puml @@ -0,0 +1,87 @@ +!$THEME = "C4_violet" + +!$ELEMENT_FONT_COLOR ?= "#FFFFFF" + +!$PERSON_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$PERSON_BG_COLOR ?= "#42087B" +!$PERSON_BORDER_COLOR ?= "#3B076F" +!$EXTERNAL_PERSON_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$EXTERNAL_PERSON_BG_COLOR ?= "#686868" +!$EXTERNAL_PERSON_BORDER_COLOR ?= "#8A8A8A" + +!$SYSTEM_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$SYSTEM_BG_COLOR ?= "#6811BD" +!$SYSTEM_BORDER_COLOR ?= "#7F3CC0" +!$EXTERNAL_SYSTEM_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$EXTERNAL_SYSTEM_BG_COLOR ?= "#999999" +!$EXTERNAL_SYSTEM_BORDER_COLOR ?= "#8A8A8A" + +!$CONTAINER_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$CONTAINER_BG_COLOR ?= "#8D43D5" +!$CONTAINER_BORDER_COLOR ?= "#7F3CC0" +!$EXTERNAL_CONTAINER_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$EXTERNAL_CONTAINER_BG_COLOR ?= "#B3B3B3" +!$EXTERNAL_CONTAINER_BORDER_COLOR ?= "#A6A6A6" + +!$COMPONENT_FONT_COLOR ?= "#000000" +!$COMPONENT_BG_COLOR ?= "#BB85F0" +!$COMPONENT_BORDER_COLOR ?= "#A878D8" +!$EXTERNAL_COMPONENT_FONT_COLOR ?= $COMPONENT_FONT_COLOR +!$EXTERNAL_COMPONENT_BG_COLOR ?= "#CCCCCC" +!$EXTERNAL_COMPONENT_BORDER_COLOR ?= "#BFBFBF" + +' <<<<<<<<<<<<< sequence diagram is styled via skinparam and style + +' $BOUNDARY_BG_COLOR... have to be defined in theme itself that it can be used in styles,... +' (no default values which are defined in C4.puml) +' If skinparams and styles are defined with concrete values no variables are required +!$BOUNDARY_BG_COLOR ?= "transparent" +!$BOUNDARY_COLOR ?= "#444444" +!$ARROW_COLOR ?= "#666666" + +' replace transparent with concrete background that it can be used as font color too +!if ($BOUNDARY_BG_COLOR == "transparent") + !$SEQUENCE_BG_COLOR = white +!else + !$SEQUENCE_BG_COLOR = $BOUNDARY_BG_COLOR +!endif + +' "C4 styled" default is no foot boxes +hide footbox +' "C4 styled" default is that lifeline is arrow color +skinparam SequenceLifelineBorderColor $ARROW_COLOR + +skinparam SequenceGroupBodyBackgroundColor $SEQUENCE_BG_COLOR +skinparam SequenceGroupFontColor $BOUNDARY_COLOR +skinparam SequenceGroupBackgroundColor $BOUNDARY_COLOR +skinparam SequenceGroupHeaderFontColor $SEQUENCE_BG_COLOR +skinparam SequenceGroupBorderColor $BOUNDARY_COLOR + +skinparam SequenceReferenceBackgroundColor $SEQUENCE_BG_COLOR +skinparam SequenceReferenceFontColor $BOUNDARY_COLOR +skinparam SequenceReferenceHeaderBackgroundColor $BOUNDARY_COLOR +' VIA STYLE +' skinparam SequenceReferenceHeaderFontColor $SEQUENCE_BG_COLOR + +skinparam SequenceReferenceBorderColor $BOUNDARY_COLOR + +skinparam SequenceDividerBackgroundColor $SEQUENCE_BG_COLOR +skinparam SequenceDividerFontColor $BOUNDARY_COLOR +skinparam SequenceDividerBorderColor $BOUNDARY_COLOR + +' VIA STYLE +' skinparam SequenceDelayFontColor green + + +' <<<<<<<<<<<<< end sequence diagram +