mermaid
Version:
Markdownish syntax for generating flowcharts, sequence diagrams and gantt charts.
334 lines (237 loc) • 8.54 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<meta name="robots" content="noindex,nofollow">
<!--NEW RELIC Start Perf Measurement-->
<!--NREND-->
<!-- Le styles -->
<link href="/static/build/styles.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="/static/ico/ipynb_icon_16x16.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144"
href="/static/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114"
href="/static/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72"
href="/static/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed"
href="/static/ico/apple-touch-icon-57-precomposed.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Notebook on nbviewer">
<meta name="twitter:description" content="Check out this Jupyter notebook!">
<meta name="twitter:domain" content="nbviewer.ipython.org">
<meta name="twitter:image:src" content="http://ipython.org/ipython-doc/dev/_images/ipynb_icon_128x128.png">
<link href="/static/build/notebook.css" rel="stylesheet">
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" type="text/javascript">
</script>
<script type="text/javascript">
init_mathjax = function() {
if (window.MathJax) {
// MathJax loaded
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true,
processEnvironments: true
},
displayAlign: 'center',
"HTML-CSS": {
styles: {'.MathJax_Display': {"margin": 0}},
linebreaks: { automatic: true }
}
});
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
}
}
init_mathjax();
</script>
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
<!-- These are loaded at the top of the body so they are available to
notebook cells when they are loaded below. -->
<script src="/static/components/jquery/dist/jquery.min.js"></script>
<script src="/static/components/moment/min/moment.min.js"></script>
<script src="http://requirejs.org/docs/release/2.1.19/minified/require.js"></script>
<script src="../dist/mermaid.s.min.js"/>
<!-- Navbar
================================================== -->
<nav id="menubar" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="/">nbviewer</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="/faq" title="FAQ" >
<span>FAQ</span>
</a>
</li>
<li class="">
<a href="http://ipython.org">IPython</a>
</li>
<li class="">
<a href="http://jupyter.org">Jupyter</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" title="Python 3 Kernel" >
<span class="fa fa-server fa-2x menu-icon"></span>
<span class="menu-text">Python 3 Kernel</span>
</a>
</li>
<li>
<a href="https://gist.github.com/8e413b6a33a8019f6db8" title="View on Gist" >
<span class="fa fa-github-square fa-2x menu-icon"></span>
<span class="menu-text">View on Gist</span>
</a>
</li>
<li>
<a href="https://gist.githubusercontent.com/bollwyvl/8e413b6a33a8019f6db8/raw/29de14a3657fd8ed446095bccda925bfcd5f858a/Mermaid%20Requre.ipynb" title="Download Notebook" download>
<span class="fa fa-download fa-2x menu-icon"></span>
<span class="menu-text">Download Notebook</span>
</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<div class="container">
<div id="notebook">
<div id="notebook-container">
<div class="cell border-box-sizing text_cell rendered">
<div class="prompt input_prompt">
</div>
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<div class="mermaid">graph TB
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
c1-->a2
</div>
</div>
</div>
</div>
<div class="cell border-box-sizing code_cell rendered">
<div class="input">
<div class="prompt input_prompt">In [2]:</div>
<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span class="o">%%</span><span class="k">html</span>
<script src="https://rawgit.com/knsv/mermaid/master/dist/mermaid.js"/>
<script>
mermaid.init();
</script>
</pre></div>
</div>
</div>
</div>
<div class="output_wrapper">
<div class="output">
<div class="output_area"><div class="prompt"></div>
<div class="output_html rendered_html output_subarea ">
<script>
mermaid.init();
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="back-to-top hidden-print text-center">
<a href="#">Back to top</a>
</div>
<footer class="footer hidden-print col-md-12">
<div class="col-md-4">
<p>
This web site does not host notebooks, it only renders notebooks
available on other websites.
</p>
</div>
<div class="col-md-4">
<p>
Delivered by <a href="http://www.fastly.com/">Fastly</a>,
Rendered by <a href="https://developer.rackspace.com/?nbviewer=awesome">Rackspace</a>
</p>
<p>
nbviewer GitHub <a href="https://github.com/jupyter/nbviewer">repository</a>.
</p>
</div>
<div class="col-md-4">
<p>
nbviewer version:
<a href="https://github.com/jupyter/nbviewer/commit/a68bf94062e491b750c3f39905c28c2ee8a7054c">
a68bf94
</a>
</p>
<p class="text-muted">
IPython version: 3.3.0-dev
(<a href="https://github.com/ipython/ipython/commit/b16c2ca">
b16c2ca
</a>)
</p>
<p class="text-muted">
Rendered
<span class='date' data-date='Wed, 22 Jul 2015 09:21:12 UTC' title='Wed, 22 Jul 2015 09:21:12 UTC'>(Wed, 22 Jul 2015 09:21:12 UTC)</span>
</p>
</div>
</footer>
</div>
<script src="/static/components/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/components/headroom.js/dist/headroom.min.js"></script>
<script src="/static/components/headroom.js/dist/jQuery.headroom.min.js"></script>
<script>
$(function(){ $("#menubar").headroom({
tolerance: 5,
offset: 205,
classes: {
initial: "animated",
pinned: "slideInDown",
unpinned: "slideOutUp"
}
})});
</script>
<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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-38683231-2', 'auto');
ga('send', 'pageview');
</script>
<script>
var update_date = function(){
var str = window.moment($('.date').data('date')).fromNow();
$('.date').text(str);
}
setInterval(update_date , 61*1000);
$(update_date);
</script>
<!--NEW RELIC Stop Perf Measurement-->
<!--NEW RELIC End-->
</body>
</html>