Deploy website

Deploy website version based on 834899659a

docs/guides/diagram.html

@@ -88,7 +88,7 @@ diag
 <h2><a class="anchor" aria-hidden="true" id="options"></a><a href="#options" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Options</h2>
 <p>You can specify the output file format with <code>outformat</code> parameter. Default is <strong>png</strong>.</p>
 <blockquote>
-<p>(png, jpg, svg, and pdf) are allowed.</p>
+<p>(png, jpg, svg, pdf and dot) are allowed.</p>
 </blockquote>
 <pre><code class="hljs css language-python"><span class="hljs-keyword">from</span> diagrams <span class="hljs-keyword">import</span> Diagram
 <span class="hljs-keyword">from</span> diagrams.aws.compute <span class="hljs-keyword">import</span> EC2
@@ -96,6 +96,13 @@ diag
 <span class="hljs-keyword">with</span> Diagram(<span class="hljs-string">"Simple Diagram"</span>, outformat=<span class="hljs-string">"jpg"</span>):
     EC2(<span class="hljs-string">"web"</span>)
 </code></pre>
+<p>The <code>outformat</code> parameter also support list to output all the defined output in one call.</p>
+<pre><code class="hljs css language-python"><span class="hljs-keyword">from</span> diagrams <span class="hljs-keyword">import</span> Diagram
+<span class="hljs-keyword">from</span> diagrams.aws.compute <span class="hljs-keyword">import</span> EC2
+
+<span class="hljs-keyword">with</span> Diagram(<span class="hljs-string">"Simple Diagram Multi Output"</span>, outformat=[<span class="hljs-string">"jpg"</span>, <span class="hljs-string">"png"</span>, <span class="hljs-string">"dot"</span>]):
+    EC2(<span class="hljs-string">"web"</span>)
+</code></pre>
 <p>You can specify the output filename with <code>filename</code> parameter. The extension shouldn't be included, it's determined by the <code>outformat</code> parameter.</p>
 <pre><code class="hljs css language-python"><span class="hljs-keyword">from</span> diagrams <span class="hljs-keyword">import</span> Diagram
 <span class="hljs-keyword">from</span> diagrams.aws.compute <span class="hljs-keyword">import</span> EC2
@@ -125,4 +132,4 @@ graph_attr = {
 <span class="hljs-keyword">with</span> Diagram(<span class="hljs-string">"Simple Diagram"</span>, show=<span class="hljs-literal">False</span>, graph_attr=graph_attr):
     EC2(<span class="hljs-string">"web"</span>)
 </code></pre>
-</span></div></article></div><div class="docLastUpdate"><em>Last updated on 3/19/2020</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/getting-started/examples"><span class="arrow-prev">← </span><span>Examples</span></a><a class="docs-next button" href="/docs/guides/node"><span>Nodes</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#basic">Basic</a></li><li><a href="#jupyter-notebooks">Jupyter Notebooks</a></li><li><a href="#options">Options</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/diagrams.ico" alt="Diagrams" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started/installation">Getting Started</a><a href="/docs/guides/diagram">Guides</a><a href="/docs/nodes/aws">Nodes</a></div><div><h5>More</h5><iframe src="https://ghbtns.com/github-btn.html?user=mingrammer&amp;repo=diagrams&amp;type=star&amp;count=true&amp;size=large" frameBorder="0" scrolling="0" width="170" height="30" title="Star mingrammer/diagrams on GitHub"></iframe></div></section><section class="copyright">Copyright © 2022 mingrammer</section></footer></div></body></html>
+</span></div></article></div><div class="docLastUpdate"><em>Last updated on 2/9/2022</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/getting-started/examples"><span class="arrow-prev">← </span><span>Examples</span></a><a class="docs-next button" href="/docs/guides/node"><span>Nodes</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#basic">Basic</a></li><li><a href="#jupyter-notebooks">Jupyter Notebooks</a></li><li><a href="#options">Options</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/diagrams.ico" alt="Diagrams" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started/installation">Getting Started</a><a href="/docs/guides/diagram">Guides</a><a href="/docs/nodes/aws">Nodes</a></div><div><h5>More</h5><iframe src="https://ghbtns.com/github-btn.html?user=mingrammer&amp;repo=diagrams&amp;type=star&amp;count=true&amp;size=large" frameBorder="0" scrolling="0" width="170" height="30" title="Star mingrammer/diagrams on GitHub"></iframe></div></section><section class="copyright">Copyright © 2022 mingrammer</section></footer></div></body></html>

docs/guides/diagram/index.html

@@ -88,7 +88,7 @@ diag
 <h2><a class="anchor" aria-hidden="true" id="options"></a><a href="#options" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Options</h2>
 <p>You can specify the output file format with <code>outformat</code> parameter. Default is <strong>png</strong>.</p>
 <blockquote>
-<p>(png, jpg, svg, and pdf) are allowed.</p>
+<p>(png, jpg, svg, pdf and dot) are allowed.</p>
 </blockquote>
 <pre><code class="hljs css language-python"><span class="hljs-keyword">from</span> diagrams <span class="hljs-keyword">import</span> Diagram
 <span class="hljs-keyword">from</span> diagrams.aws.compute <span class="hljs-keyword">import</span> EC2
@@ -96,6 +96,13 @@ diag
 <span class="hljs-keyword">with</span> Diagram(<span class="hljs-string">"Simple Diagram"</span>, outformat=<span class="hljs-string">"jpg"</span>):
     EC2(<span class="hljs-string">"web"</span>)
 </code></pre>
+<p>The <code>outformat</code> parameter also support list to output all the defined output in one call.</p>
+<pre><code class="hljs css language-python"><span class="hljs-keyword">from</span> diagrams <span class="hljs-keyword">import</span> Diagram
+<span class="hljs-keyword">from</span> diagrams.aws.compute <span class="hljs-keyword">import</span> EC2
+
+<span class="hljs-keyword">with</span> Diagram(<span class="hljs-string">"Simple Diagram Multi Output"</span>, outformat=[<span class="hljs-string">"jpg"</span>, <span class="hljs-string">"png"</span>, <span class="hljs-string">"dot"</span>]):
+    EC2(<span class="hljs-string">"web"</span>)
+</code></pre>
 <p>You can specify the output filename with <code>filename</code> parameter. The extension shouldn't be included, it's determined by the <code>outformat</code> parameter.</p>
 <pre><code class="hljs css language-python"><span class="hljs-keyword">from</span> diagrams <span class="hljs-keyword">import</span> Diagram
 <span class="hljs-keyword">from</span> diagrams.aws.compute <span class="hljs-keyword">import</span> EC2
@@ -125,4 +132,4 @@ graph_attr = {
 <span class="hljs-keyword">with</span> Diagram(<span class="hljs-string">"Simple Diagram"</span>, show=<span class="hljs-literal">False</span>, graph_attr=graph_attr):
     EC2(<span class="hljs-string">"web"</span>)
 </code></pre>
-</span></div></article></div><div class="docLastUpdate"><em>Last updated on 3/19/2020</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/getting-started/examples"><span class="arrow-prev">← </span><span>Examples</span></a><a class="docs-next button" href="/docs/guides/node"><span>Nodes</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#basic">Basic</a></li><li><a href="#jupyter-notebooks">Jupyter Notebooks</a></li><li><a href="#options">Options</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/diagrams.ico" alt="Diagrams" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started/installation">Getting Started</a><a href="/docs/guides/diagram">Guides</a><a href="/docs/nodes/aws">Nodes</a></div><div><h5>More</h5><iframe src="https://ghbtns.com/github-btn.html?user=mingrammer&amp;repo=diagrams&amp;type=star&amp;count=true&amp;size=large" frameBorder="0" scrolling="0" width="170" height="30" title="Star mingrammer/diagrams on GitHub"></iframe></div></section><section class="copyright">Copyright © 2022 mingrammer</section></footer></div></body></html>
+</span></div></article></div><div class="docLastUpdate"><em>Last updated on 2/9/2022</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/getting-started/examples"><span class="arrow-prev">← </span><span>Examples</span></a><a class="docs-next button" href="/docs/guides/node"><span>Nodes</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#basic">Basic</a></li><li><a href="#jupyter-notebooks">Jupyter Notebooks</a></li><li><a href="#options">Options</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/diagrams.ico" alt="Diagrams" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started/installation">Getting Started</a><a href="/docs/guides/diagram">Guides</a><a href="/docs/nodes/aws">Nodes</a></div><div><h5>More</h5><iframe src="https://ghbtns.com/github-btn.html?user=mingrammer&amp;repo=diagrams&amp;type=star&amp;count=true&amp;size=large" frameBorder="0" scrolling="0" width="170" height="30" title="Star mingrammer/diagrams on GitHub"></iframe></div></section><section class="copyright">Copyright © 2022 mingrammer</section></footer></div></body></html>

docs/nodes/c4.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>C4 · Diagrams</title><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## C4 Diagrams"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="C4 · Diagrams"/><meta property="og:type" content="website"/><meta property="og:url" content="https://diagrams.mingrammer.com/"/><meta property="og:description" content="## C4 Diagrams"/><meta property="og:image" content="https://diagrams.mingrammer.com/img/diagrams.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://diagrams.mingrammer.com/img/diagrams.png"/><link rel="shortcut icon" href="/img/diagrams.ico"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/><script>
+              (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+              (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+              m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+              })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+              ga('create', 'UA-84081627-3', 'auto');
+              ga('send', 'pageview');
+            </script><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><script src="/js/scrollSpy.js"></script><link rel="stylesheet" href="/css/main.css"/><script src="/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/"><img class="logo" src="/img/diagrams.ico" alt="Diagrams"/><h2 class="headerTitleWithLogo">Diagrams</h2></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/docs/getting-started/installation" target="_self">Docs</a></li><li class=""><a href="/docs/guides/diagram" target="_self">Guides</a></li><li class=""><a href="/docs/nodes/aws" target="_self">Nodes</a></li><li class=""><a href="https://github.com/mingrammer/diagrams" target="_self">GitHub</a></li><li class=""><a href="https://www.buymeacoffee.com/mingrammer" target="_self">Sponsoring</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><h1 id="__docusaurus" class="postHeaderTitle">C4</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="c4-diagrams"></a><a href="#c4-diagrams" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>C4 Diagrams</h2>
+<p><a href="https://c4model.com/">C4</a> is a standardized model to visualize software architecture.
+You can generate C4 diagrams by using the node and edge classes from the <code>diagrams.c4</code> package:</p>
+<pre><code class="hljs css language-python"><span class="hljs-keyword">from</span> diagrams <span class="hljs-keyword">import</span> Diagram
+<span class="hljs-keyword">from</span> diagrams.c4 <span class="hljs-keyword">import</span> Person, Container, Database, System, SystemBoundary, Relationship
+
+graph_attr = {
+    <span class="hljs-string">"splines"</span>: <span class="hljs-string">"spline"</span>,
+}
+
+<span class="hljs-keyword">with</span> Diagram(<span class="hljs-string">"Container diagram for Internet Banking System"</span>, direction=<span class="hljs-string">"TB"</span>, graph_attr=graph_attr):
+    customer = Person(
+        name=<span class="hljs-string">"Personal Banking Customer"</span>, description=<span class="hljs-string">"A customer of the bank, with personal bank accounts."</span>
+    )
+
+    <span class="hljs-keyword">with</span> SystemBoundary(<span class="hljs-string">"Internet Banking System"</span>):
+        webapp = Container(
+            name=<span class="hljs-string">"Web Application"</span>,
+            technology=<span class="hljs-string">"Java and Spring MVC"</span>,
+            description=<span class="hljs-string">"Delivers the static content and the Internet banking single page application."</span>,
+        )
+
+        spa = Container(
+            name=<span class="hljs-string">"Single-Page Application"</span>,
+            technology=<span class="hljs-string">"Javascript and Angular"</span>,
+            description=<span class="hljs-string">"Provides all of the Internet banking functionality to customers via their web browser."</span>,
+        )
+
+        mobileapp = Container(
+            name=<span class="hljs-string">"Mobile App"</span>,
+            technology=<span class="hljs-string">"Xamarin"</span>,
+            description=<span class="hljs-string">"Provides a limited subset of the Internet banking functionality to customers via their mobile device."</span>,
+        )
+
+        api = Container(
+            name=<span class="hljs-string">"API Application"</span>,
+            technology=<span class="hljs-string">"Java and Spring MVC"</span>,
+            description=<span class="hljs-string">"Provides Internet banking functionality via a JSON/HTTPS API."</span>,
+        )
+
+        database = Database(
+            name=<span class="hljs-string">"Database"</span>,
+            technology=<span class="hljs-string">"Oracle Database Schema"</span>,
+            description=<span class="hljs-string">"Stores user registration information, hashed authentication credentials, access logs, etc."</span>,
+        )
+
+    email = System(name=<span class="hljs-string">"E-mail System"</span>, description=<span class="hljs-string">"The internal Microsoft Exchange e-mail system."</span>, external=<span class="hljs-literal">True</span>)
+
+    mainframe = System(
+        name=<span class="hljs-string">"Mainframe Banking System"</span>,
+        description=<span class="hljs-string">"Stores all of the core banking information about customers, accounts, transactions, etc."</span>,
+        external=<span class="hljs-literal">True</span>,
+    )
+
+    customer &gt;&gt; Relationship(<span class="hljs-string">"Visits bigbank.com/ib using [HTTPS]"</span>) &gt;&gt; webapp
+    customer &gt;&gt; Relationship(<span class="hljs-string">"Views account balances, and makes payments using"</span>) &gt;&gt; [spa, mobileapp]
+    webapp &gt;&gt; Relationship(<span class="hljs-string">"Delivers to the customer's web browser"</span>) &gt;&gt; spa
+    spa &gt;&gt; Relationship(<span class="hljs-string">"Make API calls to [JSON/HTTPS]"</span>) &gt;&gt; api
+    mobileapp &gt;&gt; Relationship(<span class="hljs-string">"Make API calls to [JSON/HTTPS]"</span>) &gt;&gt; api
+
+    api &gt;&gt; Relationship(<span class="hljs-string">"reads from and writes to"</span>) &gt;&gt; database
+    api &gt;&gt; Relationship(<span class="hljs-string">"Sends email using [SMTP]"</span>) &gt;&gt; email
+    api &gt;&gt; Relationship(<span class="hljs-string">"Makes API calls to [XML/HTTPS]"</span>) &gt;&gt; mainframe
+    customer &lt;&lt; Relationship(<span class="hljs-string">"Sends e-mails to"</span>) &lt;&lt; email
+</code></pre>
+<p>It will produce the following diagram:</p>
+<p><img src="/img/c4.png" alt="c4"></p>
+</span></div></article></div><div class="docLastUpdate"><em>Last updated on 9/5/2022</em></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#c4-diagrams">C4 Diagrams</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/diagrams.ico" alt="Diagrams" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started/installation">Getting Started</a><a href="/docs/guides/diagram">Guides</a><a href="/docs/nodes/aws">Nodes</a></div><div><h5>More</h5><iframe src="https://ghbtns.com/github-btn.html?user=mingrammer&amp;repo=diagrams&amp;type=star&amp;count=true&amp;size=large" frameBorder="0" scrolling="0" width="170" height="30" title="Star mingrammer/diagrams on GitHub"></iframe></div></section><section class="copyright">Copyright © 2022 mingrammer</section></footer></div></body></html>

docs/nodes/c4/index.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>C4 · Diagrams</title><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## C4 Diagrams"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="C4 · Diagrams"/><meta property="og:type" content="website"/><meta property="og:url" content="https://diagrams.mingrammer.com/"/><meta property="og:description" content="## C4 Diagrams"/><meta property="og:image" content="https://diagrams.mingrammer.com/img/diagrams.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://diagrams.mingrammer.com/img/diagrams.png"/><link rel="shortcut icon" href="/img/diagrams.ico"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/><script>
+              (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+              (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+              m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+              })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+              ga('create', 'UA-84081627-3', 'auto');
+              ga('send', 'pageview');
+            </script><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><script src="/js/scrollSpy.js"></script><link rel="stylesheet" href="/css/main.css"/><script src="/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/"><img class="logo" src="/img/diagrams.ico" alt="Diagrams"/><h2 class="headerTitleWithLogo">Diagrams</h2></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/docs/getting-started/installation" target="_self">Docs</a></li><li class=""><a href="/docs/guides/diagram" target="_self">Guides</a></li><li class=""><a href="/docs/nodes/aws" target="_self">Nodes</a></li><li class=""><a href="https://github.com/mingrammer/diagrams" target="_self">GitHub</a></li><li class=""><a href="https://www.buymeacoffee.com/mingrammer" target="_self">Sponsoring</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><h1 id="__docusaurus" class="postHeaderTitle">C4</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="c4-diagrams"></a><a href="#c4-diagrams" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>C4 Diagrams</h2>
+<p><a href="https://c4model.com/">C4</a> is a standardized model to visualize software architecture.
+You can generate C4 diagrams by using the node and edge classes from the <code>diagrams.c4</code> package:</p>
+<pre><code class="hljs css language-python"><span class="hljs-keyword">from</span> diagrams <span class="hljs-keyword">import</span> Diagram
+<span class="hljs-keyword">from</span> diagrams.c4 <span class="hljs-keyword">import</span> Person, Container, Database, System, SystemBoundary, Relationship
+
+graph_attr = {
+    <span class="hljs-string">"splines"</span>: <span class="hljs-string">"spline"</span>,
+}
+
+<span class="hljs-keyword">with</span> Diagram(<span class="hljs-string">"Container diagram for Internet Banking System"</span>, direction=<span class="hljs-string">"TB"</span>, graph_attr=graph_attr):
+    customer = Person(
+        name=<span class="hljs-string">"Personal Banking Customer"</span>, description=<span class="hljs-string">"A customer of the bank, with personal bank accounts."</span>
+    )
+
+    <span class="hljs-keyword">with</span> SystemBoundary(<span class="hljs-string">"Internet Banking System"</span>):
+        webapp = Container(
+            name=<span class="hljs-string">"Web Application"</span>,
+            technology=<span class="hljs-string">"Java and Spring MVC"</span>,
+            description=<span class="hljs-string">"Delivers the static content and the Internet banking single page application."</span>,
+        )
+
+        spa = Container(
+            name=<span class="hljs-string">"Single-Page Application"</span>,
+            technology=<span class="hljs-string">"Javascript and Angular"</span>,
+            description=<span class="hljs-string">"Provides all of the Internet banking functionality to customers via their web browser."</span>,
+        )
+
+        mobileapp = Container(
+            name=<span class="hljs-string">"Mobile App"</span>,
+            technology=<span class="hljs-string">"Xamarin"</span>,
+            description=<span class="hljs-string">"Provides a limited subset of the Internet banking functionality to customers via their mobile device."</span>,
+        )
+
+        api = Container(
+            name=<span class="hljs-string">"API Application"</span>,
+            technology=<span class="hljs-string">"Java and Spring MVC"</span>,
+            description=<span class="hljs-string">"Provides Internet banking functionality via a JSON/HTTPS API."</span>,
+        )
+
+        database = Database(
+            name=<span class="hljs-string">"Database"</span>,
+            technology=<span class="hljs-string">"Oracle Database Schema"</span>,
+            description=<span class="hljs-string">"Stores user registration information, hashed authentication credentials, access logs, etc."</span>,
+        )
+
+    email = System(name=<span class="hljs-string">"E-mail System"</span>, description=<span class="hljs-string">"The internal Microsoft Exchange e-mail system."</span>, external=<span class="hljs-literal">True</span>)
+
+    mainframe = System(
+        name=<span class="hljs-string">"Mainframe Banking System"</span>,
+        description=<span class="hljs-string">"Stores all of the core banking information about customers, accounts, transactions, etc."</span>,
+        external=<span class="hljs-literal">True</span>,
+    )
+
+    customer &gt;&gt; Relationship(<span class="hljs-string">"Visits bigbank.com/ib using [HTTPS]"</span>) &gt;&gt; webapp
+    customer &gt;&gt; Relationship(<span class="hljs-string">"Views account balances, and makes payments using"</span>) &gt;&gt; [spa, mobileapp]
+    webapp &gt;&gt; Relationship(<span class="hljs-string">"Delivers to the customer's web browser"</span>) &gt;&gt; spa
+    spa &gt;&gt; Relationship(<span class="hljs-string">"Make API calls to [JSON/HTTPS]"</span>) &gt;&gt; api
+    mobileapp &gt;&gt; Relationship(<span class="hljs-string">"Make API calls to [JSON/HTTPS]"</span>) &gt;&gt; api
+
+    api &gt;&gt; Relationship(<span class="hljs-string">"reads from and writes to"</span>) &gt;&gt; database
+    api &gt;&gt; Relationship(<span class="hljs-string">"Sends email using [SMTP]"</span>) &gt;&gt; email
+    api &gt;&gt; Relationship(<span class="hljs-string">"Makes API calls to [XML/HTTPS]"</span>) &gt;&gt; mainframe
+    customer &lt;&lt; Relationship(<span class="hljs-string">"Sends e-mails to"</span>) &lt;&lt; email
+</code></pre>
+<p>It will produce the following diagram:</p>
+<p><img src="/img/c4.png" alt="c4"></p>
+</span></div></article></div><div class="docLastUpdate"><em>Last updated on 9/5/2022</em></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#c4-diagrams">C4 Diagrams</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/diagrams.ico" alt="Diagrams" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started/installation">Getting Started</a><a href="/docs/guides/diagram">Guides</a><a href="/docs/nodes/aws">Nodes</a></div><div><h5>More</h5><iframe src="https://ghbtns.com/github-btn.html?user=mingrammer&amp;repo=diagrams&amp;type=star&amp;count=true&amp;size=large" frameBorder="0" scrolling="0" width="170" height="30" title="Star mingrammer/diagrams on GitHub"></iframe></div></section><section class="copyright">Copyright © 2022 mingrammer</section></footer></div></body></html>

docs/nodes/onprem.html

@@ -216,8 +216,8 @@
 <li><strong>diagrams.onprem.monitoring.Dynatrace</strong></li>
 <li><strong>diagrams.onprem.monitoring.Grafana</strong></li>
 <li><strong>diagrams.onprem.monitoring.Humio</strong></li>
-<li><strong>diagrams.onprem.monitoring.Newrelic</strong></li>
 <li><strong>diagrams.onprem.monitoring.Nagios</strong></li>
+<li><strong>diagrams.onprem.monitoring.Newrelic</strong></li>
 <li><strong>diagrams.onprem.monitoring.PrometheusOperator</strong></li>
 <li><strong>diagrams.onprem.monitoring.Prometheus</strong></li>
 <li><strong>diagrams.onprem.monitoring.Sentry</strong></li>
@@ -305,4 +305,4 @@
 <li><strong>diagrams.onprem.workflow.Kubeflow</strong>, <strong>KubeFlow</strong> (alias)</li>
 <li><strong>diagrams.onprem.workflow.Nifi</strong>, <strong>NiFi</strong> (alias)</li>
 </ul>
-</span></div></article></div><div class="docLastUpdate"><em>Last updated on 1/22/2022</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/guides/edge"><span class="arrow-prev">← </span><span>Edges</span></a><a class="docs-next button" href="/docs/nodes/aws"><span>AWS</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#onpremaggregator">onprem.aggregator</a></li><li><a href="#onpremanalytics">onprem.analytics</a></li><li><a href="#onpremauth">onprem.auth</a></li><li><a href="#onpremcd">onprem.cd</a></li><li><a href="#onpremcertificates">onprem.certificates</a></li><li><a href="#onpremci">onprem.ci</a></li><li><a href="#onpremclient">onprem.client</a></li><li><a href="#onpremcompute">onprem.compute</a></li><li><a href="#onpremcontainer">onprem.container</a></li><li><a href="#onpremdatabase">onprem.database</a></li><li><a href="#onpremdns">onprem.dns</a></li><li><a href="#onpremetl">onprem.etl</a></li><li><a href="#onpremgitops">onprem.gitops</a></li><li><a href="#onpremgroupware">onprem.groupware</a></li><li><a href="#onpremiac">onprem.iac</a></li><li><a href="#onpremidentity">onprem.identity</a></li><li><a href="#onpreminmemory">onprem.inmemory</a></li><li><a href="#onpremlogging">onprem.logging</a></li><li><a href="#onpremmlops">onprem.mlops</a></li><li><a href="#onpremmonitoring">onprem.monitoring</a></li><li><a href="#onpremnetwork">onprem.network</a></li><li><a href="#onpremproxmox">onprem.proxmox</a></li><li><a href="#onpremqueue">onprem.queue</a></li><li><a href="#onpremsearch">onprem.search</a></li><li><a href="#onpremsecurity">onprem.security</a></li><li><a href="#onpremstorage">onprem.storage</a></li><li><a href="#onpremtracing">onprem.tracing</a></li><li><a href="#onpremvcs">onprem.vcs</a></li><li><a href="#onpremworkflow">onprem.workflow</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/diagrams.ico" alt="Diagrams" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started/installation">Getting Started</a><a href="/docs/guides/diagram">Guides</a><a href="/docs/nodes/aws">Nodes</a></div><div><h5>More</h5><iframe src="https://ghbtns.com/github-btn.html?user=mingrammer&amp;repo=diagrams&amp;type=star&amp;count=true&amp;size=large" frameBorder="0" scrolling="0" width="170" height="30" title="Star mingrammer/diagrams on GitHub"></iframe></div></section><section class="copyright">Copyright © 2022 mingrammer</section></footer></div></body></html>
+</span></div></article></div><div class="docLastUpdate"><em>Last updated on 8/5/2022</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/guides/edge"><span class="arrow-prev">← </span><span>Edges</span></a><a class="docs-next button" href="/docs/nodes/aws"><span>AWS</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#onpremaggregator">onprem.aggregator</a></li><li><a href="#onpremanalytics">onprem.analytics</a></li><li><a href="#onpremauth">onprem.auth</a></li><li><a href="#onpremcd">onprem.cd</a></li><li><a href="#onpremcertificates">onprem.certificates</a></li><li><a href="#onpremci">onprem.ci</a></li><li><a href="#onpremclient">onprem.client</a></li><li><a href="#onpremcompute">onprem.compute</a></li><li><a href="#onpremcontainer">onprem.container</a></li><li><a href="#onpremdatabase">onprem.database</a></li><li><a href="#onpremdns">onprem.dns</a></li><li><a href="#onpremetl">onprem.etl</a></li><li><a href="#onpremgitops">onprem.gitops</a></li><li><a href="#onpremgroupware">onprem.groupware</a></li><li><a href="#onpremiac">onprem.iac</a></li><li><a href="#onpremidentity">onprem.identity</a></li><li><a href="#onpreminmemory">onprem.inmemory</a></li><li><a href="#onpremlogging">onprem.logging</a></li><li><a href="#onpremmlops">onprem.mlops</a></li><li><a href="#onpremmonitoring">onprem.monitoring</a></li><li><a href="#onpremnetwork">onprem.network</a></li><li><a href="#onpremproxmox">onprem.proxmox</a></li><li><a href="#onpremqueue">onprem.queue</a></li><li><a href="#onpremsearch">onprem.search</a></li><li><a href="#onpremsecurity">onprem.security</a></li><li><a href="#onpremstorage">onprem.storage</a></li><li><a href="#onpremtracing">onprem.tracing</a></li><li><a href="#onpremvcs">onprem.vcs</a></li><li><a href="#onpremworkflow">onprem.workflow</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/diagrams.ico" alt="Diagrams" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started/installation">Getting Started</a><a href="/docs/guides/diagram">Guides</a><a href="/docs/nodes/aws">Nodes</a></div><div><h5>More</h5><iframe src="https://ghbtns.com/github-btn.html?user=mingrammer&amp;repo=diagrams&amp;type=star&amp;count=true&amp;size=large" frameBorder="0" scrolling="0" width="170" height="30" title="Star mingrammer/diagrams on GitHub"></iframe></div></section><section class="copyright">Copyright © 2022 mingrammer</section></footer></div></body></html>

docs/nodes/onprem/index.html

@@ -216,8 +216,8 @@
 <li><strong>diagrams.onprem.monitoring.Dynatrace</strong></li>
 <li><strong>diagrams.onprem.monitoring.Grafana</strong></li>
 <li><strong>diagrams.onprem.monitoring.Humio</strong></li>
-<li><strong>diagrams.onprem.monitoring.Newrelic</strong></li>
 <li><strong>diagrams.onprem.monitoring.Nagios</strong></li>
+<li><strong>diagrams.onprem.monitoring.Newrelic</strong></li>
 <li><strong>diagrams.onprem.monitoring.PrometheusOperator</strong></li>
 <li><strong>diagrams.onprem.monitoring.Prometheus</strong></li>
 <li><strong>diagrams.onprem.monitoring.Sentry</strong></li>
@@ -305,4 +305,4 @@
 <li><strong>diagrams.onprem.workflow.Kubeflow</strong>, <strong>KubeFlow</strong> (alias)</li>
 <li><strong>diagrams.onprem.workflow.Nifi</strong>, <strong>NiFi</strong> (alias)</li>
 </ul>
-</span></div></article></div><div class="docLastUpdate"><em>Last updated on 1/22/2022</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/guides/edge"><span class="arrow-prev">← </span><span>Edges</span></a><a class="docs-next button" href="/docs/nodes/aws"><span>AWS</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#onpremaggregator">onprem.aggregator</a></li><li><a href="#onpremanalytics">onprem.analytics</a></li><li><a href="#onpremauth">onprem.auth</a></li><li><a href="#onpremcd">onprem.cd</a></li><li><a href="#onpremcertificates">onprem.certificates</a></li><li><a href="#onpremci">onprem.ci</a></li><li><a href="#onpremclient">onprem.client</a></li><li><a href="#onpremcompute">onprem.compute</a></li><li><a href="#onpremcontainer">onprem.container</a></li><li><a href="#onpremdatabase">onprem.database</a></li><li><a href="#onpremdns">onprem.dns</a></li><li><a href="#onpremetl">onprem.etl</a></li><li><a href="#onpremgitops">onprem.gitops</a></li><li><a href="#onpremgroupware">onprem.groupware</a></li><li><a href="#onpremiac">onprem.iac</a></li><li><a href="#onpremidentity">onprem.identity</a></li><li><a href="#onpreminmemory">onprem.inmemory</a></li><li><a href="#onpremlogging">onprem.logging</a></li><li><a href="#onpremmlops">onprem.mlops</a></li><li><a href="#onpremmonitoring">onprem.monitoring</a></li><li><a href="#onpremnetwork">onprem.network</a></li><li><a href="#onpremproxmox">onprem.proxmox</a></li><li><a href="#onpremqueue">onprem.queue</a></li><li><a href="#onpremsearch">onprem.search</a></li><li><a href="#onpremsecurity">onprem.security</a></li><li><a href="#onpremstorage">onprem.storage</a></li><li><a href="#onpremtracing">onprem.tracing</a></li><li><a href="#onpremvcs">onprem.vcs</a></li><li><a href="#onpremworkflow">onprem.workflow</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/diagrams.ico" alt="Diagrams" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started/installation">Getting Started</a><a href="/docs/guides/diagram">Guides</a><a href="/docs/nodes/aws">Nodes</a></div><div><h5>More</h5><iframe src="https://ghbtns.com/github-btn.html?user=mingrammer&amp;repo=diagrams&amp;type=star&amp;count=true&amp;size=large" frameBorder="0" scrolling="0" width="170" height="30" title="Star mingrammer/diagrams on GitHub"></iframe></div></section><section class="copyright">Copyright © 2022 mingrammer</section></footer></div></body></html>
+</span></div></article></div><div class="docLastUpdate"><em>Last updated on 8/5/2022</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/guides/edge"><span class="arrow-prev">← </span><span>Edges</span></a><a class="docs-next button" href="/docs/nodes/aws"><span>AWS</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#onpremaggregator">onprem.aggregator</a></li><li><a href="#onpremanalytics">onprem.analytics</a></li><li><a href="#onpremauth">onprem.auth</a></li><li><a href="#onpremcd">onprem.cd</a></li><li><a href="#onpremcertificates">onprem.certificates</a></li><li><a href="#onpremci">onprem.ci</a></li><li><a href="#onpremclient">onprem.client</a></li><li><a href="#onpremcompute">onprem.compute</a></li><li><a href="#onpremcontainer">onprem.container</a></li><li><a href="#onpremdatabase">onprem.database</a></li><li><a href="#onpremdns">onprem.dns</a></li><li><a href="#onpremetl">onprem.etl</a></li><li><a href="#onpremgitops">onprem.gitops</a></li><li><a href="#onpremgroupware">onprem.groupware</a></li><li><a href="#onpremiac">onprem.iac</a></li><li><a href="#onpremidentity">onprem.identity</a></li><li><a href="#onpreminmemory">onprem.inmemory</a></li><li><a href="#onpremlogging">onprem.logging</a></li><li><a href="#onpremmlops">onprem.mlops</a></li><li><a href="#onpremmonitoring">onprem.monitoring</a></li><li><a href="#onpremnetwork">onprem.network</a></li><li><a href="#onpremproxmox">onprem.proxmox</a></li><li><a href="#onpremqueue">onprem.queue</a></li><li><a href="#onpremsearch">onprem.search</a></li><li><a href="#onpremsecurity">onprem.security</a></li><li><a href="#onpremstorage">onprem.storage</a></li><li><a href="#onpremtracing">onprem.tracing</a></li><li><a href="#onpremvcs">onprem.vcs</a></li><li><a href="#onpremworkflow">onprem.workflow</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/diagrams.ico" alt="Diagrams" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started/installation">Getting Started</a><a href="/docs/guides/diagram">Guides</a><a href="/docs/nodes/aws">Nodes</a></div><div><h5>More</h5><iframe src="https://ghbtns.com/github-btn.html?user=mingrammer&amp;repo=diagrams&amp;type=star&amp;count=true&amp;size=large" frameBorder="0" scrolling="0" width="170" height="30" title="Star mingrammer/diagrams on GitHub"></iframe></div></section><section class="copyright">Copyright © 2022 mingrammer</section></footer></div></body></html>

docs/nodes/programming.html

@@ -99,6 +99,7 @@
 <li><strong>diagrams.programming.framework.Fastapi</strong>, <strong>FastAPI</strong> (alias)</li>
 <li><strong>diagrams.programming.framework.Flask</strong></li>
 <li><strong>diagrams.programming.framework.Flutter</strong></li>
+<li><strong>diagrams.programming.framework.Graphql</strong>, <strong>GraphQL</strong> (alias)</li>
 <li><strong>diagrams.programming.framework.Laravel</strong></li>
 <li><strong>diagrams.programming.framework.Micronaut</strong></li>
 <li><strong>diagrams.programming.framework.Rails</strong></li>
@@ -136,4 +137,4 @@
 <ul>
 <li><strong>diagrams.programming.runtime.Dapr</strong></li>
 </ul>
-</span></div></article></div><div class="docLastUpdate"><em>Last updated on 1/21/2022</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/nodes/generic"><span class="arrow-prev">← </span><span>Generic</span></a><a class="docs-next button" href="/docs/nodes/saas"><span>Saas</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#programmingflowchart">programming.flowchart</a></li><li><a href="#programmingframework">programming.framework</a></li><li><a href="#programminglanguage">programming.language</a></li><li><a href="#programmingruntime">programming.runtime</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/diagrams.ico" alt="Diagrams" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started/installation">Getting Started</a><a href="/docs/guides/diagram">Guides</a><a href="/docs/nodes/aws">Nodes</a></div><div><h5>More</h5><iframe src="https://ghbtns.com/github-btn.html?user=mingrammer&amp;repo=diagrams&amp;type=star&amp;count=true&amp;size=large" frameBorder="0" scrolling="0" width="170" height="30" title="Star mingrammer/diagrams on GitHub"></iframe></div></section><section class="copyright">Copyright © 2022 mingrammer</section></footer></div></body></html>
+</span></div></article></div><div class="docLastUpdate"><em>Last updated on 8/5/2022</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/nodes/generic"><span class="arrow-prev">← </span><span>Generic</span></a><a class="docs-next button" href="/docs/nodes/saas"><span>Saas</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#programmingflowchart">programming.flowchart</a></li><li><a href="#programmingframework">programming.framework</a></li><li><a href="#programminglanguage">programming.language</a></li><li><a href="#programmingruntime">programming.runtime</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/diagrams.ico" alt="Diagrams" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started/installation">Getting Started</a><a href="/docs/guides/diagram">Guides</a><a href="/docs/nodes/aws">Nodes</a></div><div><h5>More</h5><iframe src="https://ghbtns.com/github-btn.html?user=mingrammer&amp;repo=diagrams&amp;type=star&amp;count=true&amp;size=large" frameBorder="0" scrolling="0" width="170" height="30" title="Star mingrammer/diagrams on GitHub"></iframe></div></section><section class="copyright">Copyright © 2022 mingrammer</section></footer></div></body></html>

docs/nodes/programming/index.html

@@ -99,6 +99,7 @@
 <li><strong>diagrams.programming.framework.Fastapi</strong>, <strong>FastAPI</strong> (alias)</li>
 <li><strong>diagrams.programming.framework.Flask</strong></li>
 <li><strong>diagrams.programming.framework.Flutter</strong></li>
+<li><strong>diagrams.programming.framework.Graphql</strong>, <strong>GraphQL</strong> (alias)</li>
 <li><strong>diagrams.programming.framework.Laravel</strong></li>
 <li><strong>diagrams.programming.framework.Micronaut</strong></li>
 <li><strong>diagrams.programming.framework.Rails</strong></li>
@@ -136,4 +137,4 @@
 <ul>
 <li><strong>diagrams.programming.runtime.Dapr</strong></li>
 </ul>
-</span></div></article></div><div class="docLastUpdate"><em>Last updated on 1/21/2022</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/nodes/generic"><span class="arrow-prev">← </span><span>Generic</span></a><a class="docs-next button" href="/docs/nodes/saas"><span>Saas</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#programmingflowchart">programming.flowchart</a></li><li><a href="#programmingframework">programming.framework</a></li><li><a href="#programminglanguage">programming.language</a></li><li><a href="#programmingruntime">programming.runtime</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/diagrams.ico" alt="Diagrams" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started/installation">Getting Started</a><a href="/docs/guides/diagram">Guides</a><a href="/docs/nodes/aws">Nodes</a></div><div><h5>More</h5><iframe src="https://ghbtns.com/github-btn.html?user=mingrammer&amp;repo=diagrams&amp;type=star&amp;count=true&amp;size=large" frameBorder="0" scrolling="0" width="170" height="30" title="Star mingrammer/diagrams on GitHub"></iframe></div></section><section class="copyright">Copyright © 2022 mingrammer</section></footer></div></body></html>
+</span></div></article></div><div class="docLastUpdate"><em>Last updated on 8/5/2022</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/nodes/generic"><span class="arrow-prev">← </span><span>Generic</span></a><a class="docs-next button" href="/docs/nodes/saas"><span>Saas</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#programmingflowchart">programming.flowchart</a></li><li><a href="#programmingframework">programming.framework</a></li><li><a href="#programminglanguage">programming.language</a></li><li><a href="#programmingruntime">programming.runtime</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/diagrams.ico" alt="Diagrams" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started/installation">Getting Started</a><a href="/docs/guides/diagram">Guides</a><a href="/docs/nodes/aws">Nodes</a></div><div><h5>More</h5><iframe src="https://ghbtns.com/github-btn.html?user=mingrammer&amp;repo=diagrams&amp;type=star&amp;count=true&amp;size=large" frameBorder="0" scrolling="0" width="170" height="30" title="Star mingrammer/diagrams on GitHub"></iframe></div></section><section class="copyright">Copyright © 2022 mingrammer</section></footer></div></body></html>