You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
diagrams/index.html

11 lines
6.0 KiB

<!DOCTYPE html><html lang=""><head><meta name="google-site-verification" content="p1XvVxyPOUJ6LYX5rAqSAM27tW2AFMaacg1BTr8mfR4" /><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Diagrams · Diagram as Code</title><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Diagram as Code"/><meta property="og:title" content="Diagrams · Diagram as Code"/><meta property="og:type" content="website"/><meta property="og:url" content="https://diagrams.mingrammer.com/"/><meta property="og:description" content="Diagram as Code"/><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 async="" src="https://www.googletagmanager.com/gtag/js?id=G-Y1TWCZ0L77"></script><script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-Y1TWCZ0L77');
</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><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="/playground/" target="_self">Playground</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><div class="homeContainer"><div class="homeSplashFade"><div class="wrapper homeWrapper"><div class="projectLogo"><img src="/img/diagrams.png" alt="Project Logo"/></div><div class="inner"><h2 class="projectTitle">Diagrams<small>Diagram as Code</small></h2><div class="section promoSection"><div class="promoRow"><div class="pluginRowBlock"><div class="pluginWrapper buttonWrapper"><a class="button" href="/playground/">Try It Out</a></div><div class="pluginWrapper buttonWrapper"><a class="button" href="/docs/getting-started/installation">Explore</a></div><div class="pluginWrapper buttonWrapper"><a class="button" href="/docs/getting-started/examples">Show Examples</a></div></div></div></div></div></div></div></div><div class="mainContainer"><div class="productShowcaseSection paddingBottom" style="text-align:center"><h2>About Diagrams</h2><div><span><p>Diagrams lets you draw the cloud system architecture <strong>in Python code</strong>.</p>
</span></div><div><span><p>It was born for <strong>prototyping</strong> a new system architecture without any design tools. You can also describe or visualize the existing system architecture as well.</p>
</span></div><div><span><p><code>Diagram as Code</code> allows you to <strong>track</strong> the architecture diagram changes in any <strong>version control</strong> system.</p>
</span></div><div><span><p>Diagrams currently supports main major providers including: <code>AWS</code>, <code>Azure</code>, <code>GCP</code>, <code>Kubernetes</code>, <code>Alibaba Cloud</code>, <code>Oracle Cloud</code> etc... It also supports <code>On-Premises</code> nodes, <code>SaaS</code> and major <code>Programming</code> frameworks and languages.</p>
</span></div><div><span><p><code>NOTE: It does not control any actual cloud resources nor does it generate cloud formation or terraform code. It is just for drawing the cloud system architecture diagrams.</code></p>
</span></div></div><div class="container paddingBottom paddingTop"><div class="wrapper"><div class="gridBlock"><div class="blockElement alignCenter imageAlignSide imageAlignLeft twoByGridBlock"><div class="blockImage"><img src="/img/message_collecting_code.png"/></div><div class="blockContent"><div></div></div></div><div class="blockElement alignCenter imageAlignSide imageAlignRight twoByGridBlock"><div class="blockContent"><div></div></div><div class="blockImage"><img src="/img/message_collecting_diagram.png"/></div></div></div></div></div><div class="container paddingBottom paddingTop"><div class="wrapper"><div class="gridBlock"><div class="blockElement alignCenter imageAlignSide imageAlignLeft twoByGridBlock"><div class="blockImage"><img src="/img/event_processing_code.png"/></div><div class="blockContent"><div></div></div></div><div class="blockElement alignCenter imageAlignSide imageAlignRight twoByGridBlock"><div class="blockContent"><div></div></div><div class="blockImage"><img src="/img/event_processing_diagram.png"/></div></div></div></div></div></div></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 © 2026 mingrammer</section></footer></div></body></html>