mirror of https://github.com/mingrammer/diagrams
mingrammer
6 years ago
commit
b2f28d796c
File diff suppressed because one or more lines are too long
@ -0,0 +1,115 @@
|
||||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* Modified prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*='language-'] {
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*='language-'] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.number,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #dd4a68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
<!DOCTYPE html><html lang="en"><head><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"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Diagram as Code"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Diagrams · Diagram as Code"/><meta property="og:type" content="website"/><meta property="og:url" content="diagrams.mingrrammer.com/"/><meta property="og:description" content="Diagram as Code"/><meta property="og:image" content="diagrams.mingrrammer.com/img/diagrams.svg"/><meta name="twitter:card" content="summary"/><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 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/installation" target="_self">Docs</a></li><li class=""><a href="/docs/diagram" target="_self">Guides</a></li><li class=""><a href="https://github.com/mingrammer/diagrams" target="_self">GitHub</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.svg" 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="/docs/en/installation">Try It Out</a></div><div class="pluginWrapper buttonWrapper"><a class="button" href="/docs/en/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 Diagram</h2><div><span><p>Diagrams lets you to 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>tracking</strong> the architecture diagram changes on any <strong>version control</strong> system.</p>
|
||||
</span></div><div><span><p>Diagrams currently supports three major cloud providers: <code>AWS</code>, <code>Azure</code>, <code>GCP</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/en/installation">Getting Started</a><a href="/docs/en/diagram">Guides</a></div><div><h5>More</h5><a href="https://github.com/mingrammer/diagrams">GitHub</a><a class="github-button" data-icon="octicon-star" data-count-href="/mingrammer/diagrams/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><section class="copyright">Copyright © 2020 mingrammer</section></footer></div></body></html>
|
||||
|
After Width: | Height: | Size: 74 KiB |
|
After Width: | Height: | Size: 361 KiB |
|
After Width: | Height: | Size: 981 B |
|
After Width: | Height: | Size: 99 KiB |
|
After Width: | Height: | Size: 91 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 115 KiB |
|
After Width: | Height: | Size: 116 KiB |
|
After Width: | Height: | Size: 83 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 71 KiB |
|
After Width: | Height: | Size: 30 KiB |
@ -0,0 +1,5 @@
|
||||
<!DOCTYPE html><html lang=""><head><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"/><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="diagrams.mingrrammer.com/"/><meta property="og:description" content="Diagram as Code"/><meta property="og:image" content="diagrams.mingrrammer.com/img/diagrams.svg"/><meta name="twitter:card" content="summary"/><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 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/installation" target="_self">Docs</a></li><li class=""><a href="/docs/diagram" target="_self">Guides</a></li><li class=""><a href="https://github.com/mingrammer/diagrams" target="_self">GitHub</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.svg" 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="/docs/installation">Try It Out</a></div><div class="pluginWrapper buttonWrapper"><a class="button" href="/docs/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 Diagram</h2><div><span><p>Diagrams lets you to 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>tracking</strong> the architecture diagram changes on any <strong>version control</strong> system.</p>
|
||||
</span></div><div><span><p>Diagrams currently supports three major cloud providers: <code>AWS</code>, <code>Azure</code>, <code>GCP</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/installation">Getting Started</a><a href="/docs/diagram">Guides</a></div><div><h5>More</h5><a href="https://github.com/mingrammer/diagrams">GitHub</a><a class="github-button" data-icon="octicon-star" data-count-href="/mingrammer/diagrams/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><section class="copyright">Copyright © 2020 mingrammer</section></footer></div></body></html>
|
||||
@ -0,0 +1,31 @@
|
||||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
// Turn off ESLint for this file because it's sent down to users as-is.
|
||||
|
||||
/* eslint-disable */
|
||||
window.addEventListener('load', function() {
|
||||
// add event listener for all tab
|
||||
document.querySelectorAll('.nav-link').forEach(function(el) {
|
||||
el.addEventListener('click', function(e) {
|
||||
var groupId = e.target.getAttribute('data-group');
|
||||
document
|
||||
.querySelectorAll('.nav-link[data-group='.concat(groupId, ']'))
|
||||
.forEach(function(el) {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
document
|
||||
.querySelectorAll('.tab-pane[data-group='.concat(groupId, ']'))
|
||||
.forEach(function(el) {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
e.target.classList.add('active');
|
||||
document
|
||||
.querySelector('#'.concat(e.target.getAttribute('data-tab')))
|
||||
.classList.add('active');
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,83 @@
|
||||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/* eslint-disable */
|
||||
(function scrollSpy() {
|
||||
var OFFSET = 10;
|
||||
var timer;
|
||||
var headingsCache;
|
||||
|
||||
var findHeadings = function findHeadings() {
|
||||
return headingsCache || document.querySelectorAll('.toc-headings > li > a');
|
||||
};
|
||||
|
||||
var onScroll = function onScroll() {
|
||||
if (timer) {
|
||||
// throttle
|
||||
return;
|
||||
}
|
||||
|
||||
timer = setTimeout(function() {
|
||||
timer = null;
|
||||
var activeNavFound = false;
|
||||
var headings = findHeadings(); // toc nav anchors
|
||||
|
||||
/**
|
||||
* On every call, try to find header right after <-- next header
|
||||
* the one whose content is on the current screen <-- highlight this
|
||||
*/
|
||||
|
||||
for (var i = 0; i < headings.length; i++) {
|
||||
// headings[i] is current element
|
||||
// if an element is already active, then current element is not active
|
||||
// if no element is already active, then current element is active
|
||||
var currNavActive = !activeNavFound;
|
||||
/**
|
||||
* Enter the following check up only when an active nav header is not yet found
|
||||
* Then, check the bounding rectangle of the next header
|
||||
* The headers that are scrolled passed will have negative bounding rect top
|
||||
* So the first one with positive bounding rect top will be the nearest next header
|
||||
*/
|
||||
|
||||
if (currNavActive && i < headings.length - 1) {
|
||||
var heading = headings[i + 1];
|
||||
var next = decodeURIComponent(heading.href.split('#')[1]);
|
||||
var nextHeader = document.getElementById(next);
|
||||
|
||||
if (nextHeader) {
|
||||
var top = nextHeader.getBoundingClientRect().top;
|
||||
currNavActive = top > OFFSET;
|
||||
} else {
|
||||
console.error('Can not find header element', {
|
||||
id: next,
|
||||
heading: heading,
|
||||
});
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Stop searching once a first such header is found,
|
||||
* this makes sure the highlighted header is the most current one
|
||||
*/
|
||||
|
||||
if (currNavActive) {
|
||||
activeNavFound = true;
|
||||
headings[i].classList.add('active');
|
||||
} else {
|
||||
headings[i].classList.remove('active');
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
document.addEventListener('scroll', onScroll);
|
||||
document.addEventListener('resize', onScroll);
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Cache the headings once the page has fully loaded.
|
||||
headingsCache = findHeadings();
|
||||
onScroll();
|
||||
});
|
||||
})();
|
||||
Loading…
Reference in new issue