falkoschumann · August 10, 2024 12:22
diff --git a/acc.html b/acc.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8" />
    <title>System Name | Architecture Communication Canvas</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html {
        font-family: sans-serif;
      }

      @media screen and (max-width: 1279px) {
        html {
          font-size: 14px;
        }
      }

      body {
        padding: 1rem;
      }

      main {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(4, auto);
        gap: 0.5rem;
      }

      section {
        padding: 0.75rem;
        border: solid darkgray 1px;
        border-radius: 8px;
        box-shadow: 2px 2px 4px lightgray;
      }

      h1 {
        margin: 1rem 0 1rem 0;
      }

      h2,
      p,
      ul {
        margin: 0 0 1rem 0;
      }

      h2:last-child,
      p:last-child,
      ul:last-child {
        margin-bottom: 0;
      }

      ul {
        list-style-type: disc;
        padding-left: 1.5rem;
      }

      img {
        width: 100%;
        height: auto;
      }

      .requirements {
        background-color: lightgreen;
      }

      .solution {
        background-color: lightblue;
      }

      .risks {
        background-color: lightpink;
      }

      .legend {
        margin: 12px 0;
      }

      .legend .square {
        width: 1rem;
        height: 1rem;
        border: solid darkgray 1px;
        border-radius: 4px;
      }

      .h-box {
        display: flex;
        align-items: center;
      }

      .space-x-50 > * + * {
        margin-left: 0.5rem;
      }
      .space-x-100 > * + * {
        margin-left: 1rem;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Architecture Communication Canvas - System Name</h1>
    </header>

    <main>
      <section class="requirements" style="grid-column: 1/1; grid-row: 1/1">
        <h2>Value Proposition</h2>
        <p>Answer at least on of the following questions:</p>
        <ul>
          <li>What are the systems' major objectives?</li>
          <li>What value does the system deliver to the customer?</li>
          <li>What are the major business goals of the system?</li>
          <li>Why is the system build and operated?</li>
          <li>What is its core responsibility?</li>
        </ul>
      </section>

      <section class="requirements" style="grid-column: 1/1; grid-row: 2/2">
        <h2>Key Stakeholder</h2>
        <p>Identify the most important stakeholders of the system:</p>
        <ul>
          <li>For whom are we creating value?</li>
          <li>Who is paying for development?</li>
          <li>Who is paying for operations?</li>
          <li>Who are our most important customers?</li>
          <li>Who are our most important contributors?</li>
        </ul>
      </section>

      <section class="requirements" style="grid-column: 2/2; grid-row: 1/1">
        <h2>Core Functions</h2>
        <ul>
          <li>
            What are the most important functions, features or use-cases of the
            system?
          </li>
          <li>What activities or processes does it offer?</li>
          <li>What is the major use-case?</li>
          <li>Which of the functions generates high value for stakeholders?</li>
          <li>Which functions are risky, dangerous or critical?</li>
        </ul>
      </section>

      <section class="requirements" style="grid-column: 2/2; grid-row: 2/2">
        <h2>Quality Requirements</h2>

        <p>
          What are the important quality goals and requirements, like speed,
          scalability, reliability, usability, security, safety, capacity or
          similar.
        </p>

        <p>
          See the companion
          <a href="https://quality.arc42.org/">site on quality</a>", where you
          find detailed descriptions of more than 130 quality attributes, plus
          numerous examples of specific quality requirements.
        </p>
      </section>

      <section class="requirements" style="grid-column: 1/3; grid-row: 3/3">
        <h2>Business Context</h2>
        <p>Which external systems, interfaces or neighbouring systems…</p>
        <ul>
          <li>are the most important data sources?</li>
          <li>are the most important data sinks?</li>
          <li>
            determine our reliability, availability, performance or other
            critical quality requirements?
          </li>
          <li>are highly volatile or risky?</li>
          <li>have high operational cost (e.g. pay-per-use)?</li>
          <li>are difficult to implement, operate or monitor?</li>
        </ul>
      </section>

      <section class="solution" style="grid-column: 3/3; grid-row: 1/3">
        <h2>Core Decisions - Good or Bad</h2>
        <p>Which decisions…</p>
        <ul>
          <li>lead to the current state of the system?</li>
          <li>are you especially proud of?</li>
          <li>turned out to be dubious, wrong or painful?</li>
          <li>can’t you understand from todays’ perspective?</li>
        </ul>
      </section>

      <section class="solution" style="grid-column: 3/5; grid-row: 3/3">
        <h2>Components / Modules</h2>
        <p>
          What are the major building blocks of the system (e.g. modules,
          subsystems, packages, components, services)?
        </p>
      </section>

      <section class="solution" style="grid-column: 4/4; grid-row: 1/3">
        <h2>Technologies</h2>
        <p>
          What are the most important technologies used for development and
          operation of the system?
        </p>
        <ul>
          <li>programming languages and technologies</li>
          <li>frameworks (like SpringBoot, .NET, Flask, Django)</li>
          <li>database or middleware</li>
          <li>
            technical infrastructure like physical hardware, server, datacenter,
            cloud provider, hyperscaler or similer
          </li>
          <li>operating technologies and environment</li>
          <li>monitoring and administration technologies and environment</li>
        </ul>
        <p>
          See the companion [Technology Stack
          Canvas](https://techstackcanvas.io/).
        </p>
      </section>

      <section class="risks" style="grid-column: 1/5; grid-row: 4/4">
        <h2>Risks and Missing Information</h2>
        <ul>
          <li>What are known problems?</li>
          <li>
            Which parts of the system are known to cause problems during
            implementation, test or operation?
          </li>
          <li>
            Which processes (requirements, architecture/implementation, test,
            rollout, administration, operation) cause problems?
          </li>
          <li>What hinders development or value-generation?</li>
          <li>
            What would you like to know about the system, but cannot currently
            find out?
          </li>
          <li>
            What is hindering the team from delivering better value faster?
          </li>
        </ul>
      </section>
    </main>

    <footer>
      <div class="legend h-box space-x-100">
        <div class="h-box space-x-50">
          <div class="requirements square"></div>
          <div>Requirements: What should the system do?</div>
        </div>
        <div class="h-box space-x-50">
          <div class="solution square"></div>
          <div>Solution: How is it done? How does it work?</div>
        </div>
        <div class="h-box space-x-50">
          <div class="risks square"></div>
          <div>What are known problems and risks?</div>
        </div>
      </div>
      <div style="color: gray; font-size: 0.8em">
        Software Architecture Canvas, © 2023 by Gernot Starke, Patrick Roos and
        arc42 Contributors is licensed under Attribution-ShareAlike 4.0
        International.
        <a href="https://canvas.arc42.org">https://canvas.arc42.org</a>
      </div>
    </footer>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>System Name \| Architecture Communication Canvas</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	}

	html {
	font-family: sans-serif;
	}

	@media screen and (max-width: 1279px) {
	html {
	font-size: 14px;
	}
	}

	body {
	padding: 1rem;
	}

	main {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, auto);
	gap: 0.5rem;
	}

	section {
	padding: 0.75rem;
	border: solid darkgray 1px;
	border-radius: 8px;
	box-shadow: 2px 2px 4px lightgray;
	}

	h1 {
	margin: 1rem 0 1rem 0;
	}

	h2,
	p,
	ul {
	margin: 0 0 1rem 0;
	}

	h2:last-child,
	p:last-child,
	ul:last-child {
	margin-bottom: 0;
	}

	ul {
	list-style-type: disc;
	padding-left: 1.5rem;
	}

	img {
	width: 100%;
	height: auto;
	}

	.requirements {
	background-color: lightgreen;
	}

	.solution {
	background-color: lightblue;
	}

	.risks {
	background-color: lightpink;
	}

	.legend {
	margin: 12px 0;
	}

	.legend .square {
	width: 1rem;
	height: 1rem;
	border: solid darkgray 1px;
	border-radius: 4px;
	}

	.h-box {
	display: flex;
	align-items: center;
	}

	.space-x-50 > * + * {
	margin-left: 0.5rem;
	}
	.space-x-100 > * + * {
	margin-left: 1rem;
	}
	</style>
	</head>
	<body>
	<header>
	<h1>Architecture Communication Canvas - System Name</h1>
	</header>

	<main>
	<section class="requirements" style="grid-column: 1/1; grid-row: 1/1">
	<h2>Value Proposition</h2>
	<p>Answer at least on of the following questions:</p>
	<ul>
	<li>What are the systems' major objectives?</li>
	<li>What value does the system deliver to the customer?</li>
	<li>What are the major business goals of the system?</li>
	<li>Why is the system build and operated?</li>
	<li>What is its core responsibility?</li>
	</ul>
	</section>

	<section class="requirements" style="grid-column: 1/1; grid-row: 2/2">
	<h2>Key Stakeholder</h2>
	<p>Identify the most important stakeholders of the system:</p>
	<ul>
	<li>For whom are we creating value?</li>
	<li>Who is paying for development?</li>
	<li>Who is paying for operations?</li>
	<li>Who are our most important customers?</li>
	<li>Who are our most important contributors?</li>
	</ul>
	</section>

	<section class="requirements" style="grid-column: 2/2; grid-row: 1/1">
	<h2>Core Functions</h2>
	<ul>
	<li>
	What are the most important functions, features or use-cases of the
	system?
	</li>
	<li>What activities or processes does it offer?</li>
	<li>What is the major use-case?</li>
	<li>Which of the functions generates high value for stakeholders?</li>
	<li>Which functions are risky, dangerous or critical?</li>
	</ul>
	</section>

	<section class="requirements" style="grid-column: 2/2; grid-row: 2/2">
	<h2>Quality Requirements</h2>

	<p>
	What are the important quality goals and requirements, like speed,
	scalability, reliability, usability, security, safety, capacity or
	similar.
	</p>

	<p>
	See the companion
	<a href="https://quality.arc42.org/">site on quality</a>", where you
	find detailed descriptions of more than 130 quality attributes, plus
	numerous examples of specific quality requirements.
	</p>
	</section>

	<section class="requirements" style="grid-column: 1/3; grid-row: 3/3">
	<h2>Business Context</h2>
	<p>Which external systems, interfaces or neighbouring systems…</p>
	<ul>
	<li>are the most important data sources?</li>
	<li>are the most important data sinks?</li>
	<li>
	determine our reliability, availability, performance or other
	critical quality requirements?
	</li>
	<li>are highly volatile or risky?</li>
	<li>have high operational cost (e.g. pay-per-use)?</li>
	<li>are difficult to implement, operate or monitor?</li>
	</ul>
	</section>

	<section class="solution" style="grid-column: 3/3; grid-row: 1/3">
	<h2>Core Decisions - Good or Bad</h2>
	<p>Which decisions…</p>
	<ul>
	<li>lead to the current state of the system?</li>
	<li>are you especially proud of?</li>
	<li>turned out to be dubious, wrong or painful?</li>
	<li>can’t you understand from todays’ perspective?</li>
	</ul>
	</section>

	<section class="solution" style="grid-column: 3/5; grid-row: 3/3">
	<h2>Components / Modules</h2>
	<p>
	What are the major building blocks of the system (e.g. modules,
	subsystems, packages, components, services)?
	</p>
	</section>

	<section class="solution" style="grid-column: 4/4; grid-row: 1/3">
	<h2>Technologies</h2>
	<p>
	What are the most important technologies used for development and
	operation of the system?
	</p>
	<ul>
	<li>programming languages and technologies</li>
	<li>frameworks (like SpringBoot, .NET, Flask, Django)</li>
	<li>database or middleware</li>
	<li>
	technical infrastructure like physical hardware, server, datacenter,
	cloud provider, hyperscaler or similer
	</li>
	<li>operating technologies and environment</li>
	<li>monitoring and administration technologies and environment</li>
	</ul>
	<p>
	See the companion [Technology Stack
	Canvas](https://techstackcanvas.io/).
	</p>
	</section>

	<section class="risks" style="grid-column: 1/5; grid-row: 4/4">
	<h2>Risks and Missing Information</h2>
	<ul>
	<li>What are known problems?</li>
	<li>
	Which parts of the system are known to cause problems during
	implementation, test or operation?
	</li>
	<li>
	Which processes (requirements, architecture/implementation, test,
	rollout, administration, operation) cause problems?
	</li>
	<li>What hinders development or value-generation?</li>
	<li>
	What would you like to know about the system, but cannot currently
	find out?
	</li>
	<li>
	What is hindering the team from delivering better value faster?
	</li>
	</ul>
	</section>
	</main>

	<footer>
	<div class="legend h-box space-x-100">
	<div class="h-box space-x-50">
	<div class="requirements square"></div>
	<div>Requirements: What should the system do?</div>
	</div>
	<div class="h-box space-x-50">
	<div class="solution square"></div>
	<div>Solution: How is it done? How does it work?</div>
	</div>
	<div class="h-box space-x-50">
	<div class="risks square"></div>
	<div>What are known problems and risks?</div>
	</div>
	</div>
	<div style="color: gray; font-size: 0.8em">
	Software Architecture Canvas, © 2023 by Gernot Starke, Patrick Roos and
	arc42 Contributors is licensed under Attribution-ShareAlike 4.0
	International.
	<a href="https://canvas.arc42.org">https://canvas.arc42.org</a>
	</div>
	</footer>
	</body>
	</html>