Skip to content

Commit

Permalink
Merge pull request #2 from knsv/gh-pages
Browse files Browse the repository at this point in the history 
Update from original
  • Loading branch information
@gkchic
gkchic committed Jan 7, 2015
2 parents 2114ea2 + 822ab59 commit 2e12192
Show file tree
Hide file tree
Showing 10 changed files with 489 additions and 2 deletions.
2 changes: 1 addition & 1 deletion css/seq.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,4 +80,4 @@ text.actor {
}


.node { fill:#eaeaea; stroke:#666; stroke-width:1.5px; }
.node { fill:#DCDCFF; stroke:#666; stroke-width:1.5px; }
323 changes: 323 additions & 0 deletions demos.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,323 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Demos</title>
<meta name="description" content="">
<meta name="author" content="ink, cookbook, recipes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">
<lnk rel="shortcut icon" href="http://cdn.ink.sapo.pt/3.1.1/img/favicon.ico">
<link rel="apple-touch-icon" href="http://cdn.ink.sapo.pt/3.1.1/img/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="http://cdn.ink.sapo.pt/3.1.1/img/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120"
href="http://cdn.ink.sapo.pt/3.1.1/img/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="http://cdn.ink.sapo.pt/3.1.1/img/touch-icon-ipad-retina.png">
<link rel="apple-touch-startup-image" href="http://cdn.ink.sapo.pt/3.1.1/img/splash.320x460.png"
media="screen and (min-device-width: 200px) and (max-device-width: 320px) and (orientation:portrait)">
<link rel="apple-touch-startup-image" href="http://cdn.ink.sapo.pt/3.1.1/img/splash.768x1004.png"
media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
<link rel="apple-touch-startup-image" href="http://cdn.ink.sapo.pt/3.1.1/img/splash.1024x748.png"
media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
<!-- load Ink's css from the cdn -->
<link rel="stylesheet" type="text/css" title="mermaid-svg-internal-css" href="css/ink-flex.min.css">
<link rel="stylesheet" type="text/css" title="mermaid-svg-internal-css" href="3.1.1/css/font-awesome.min.css">
<!-- load Ink's css for IE8 -->
<!--[if lt IE 9 ]>
<link rel="stylesheet" title="mermaid-svg-internal-css" href="css/ink-ie.min.css" type="text/css" media="screen"
title="no title" charset="utf-8">
<![endif]-->
<link rel="stylesheet" href="css/monokai_sublime.css">
<script src="js/highlight.pack.js"></script>
<link rel="stylesheet" href="css/seq.css" type="text/css" media="screen" title="no title" charset="utf-8">
<!-- test browser flexbox support and load legacy grid if unsupported -->
<script type="text/javascript" src="http://cdn.ink.sapo.pt/3.1.1/js/modernizr.js"></script>
<script type="text/javascript">
Modernizr.load({
test: Modernizr.flexbox,
nope: 'http://cdn.ink.sapo.pt/3.1.1/css/ink-legacy.min.css'
});
</script>
<!-- load Ink's javascript files from the cdn -->
<script type="text/javascript" src="http://cdn.ink.sapo.pt/3.1.1/js/holder.js"></script>
<script type="text/javascript" src="http://cdn.ink.sapo.pt/3.1.1/js/ink-all.min.js"></script>
<script type="text/javascript" src="http://cdn.ink.sapo.pt/3.1.1/js/autoload.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/knsv/mermaid/0.3.1/dist/mermaid.full.js"></script>
<style type="text/css">
body {
background: #ffffff;
font-family: sans-serif;
font-size: 90%;
}
header h1 small:before {
content: "|";
margin: 0 0.5em;
font-size: 1.5em;
}
h1 {
color: #104e8b
}
article header {
padding: 0;
overflow: hidden;
}
article footer {
background: none;
}
article {
padding-bottom: 2em;
border-bottom: 1px solid #ccc;
}
table, th, td {
border: 1px solid #8b8989;
}
.date {
float: right;
}
summary {
font-weight: 700;
line-height: 1.5;
}
.push, footer {
height: 120px;
margin-top: 0;
margin-bottom: 10;
}
footer {
background: #a9a9a9;
}
</style>
<script>
var g = function (hljs) {
var r = "[a-z'][a-zA-Z0-9_']*", c = "(" + r + ":" + r + "|" + r + ")";
var keyw = {
keyword: 'graph sequenceDiagram participant loop end',
typename: 'Note',
literal: "false true left right"
};
return {
case_insensitive: false,
aliases: ["mermaid"],
k: keyw,
i: 'for',
c: [{
cN: "function",
b: "^" + r + "\\s*\\(",
e: "->",
rB: !0,
i: "\\(|#|//|/\\*|\\\\|:|;",
starts: {
e: ";|\\.", k: keyw, c: [
{cN: "comment", b: "%", e: "$"}
]
}
},
{cN: "comment", b: "%", e: "$"}
]
};
};
hljs.registerLanguage('mm', g);
hljs.initHighlightingOnLoad();
Ink.requireModules(['Ink.Dom.Loaded_1'], function (DomLoaded) {
DomLoaded.run(function () {
var elements = document.querySelectorAll('article h1,h2');
var i;
var sections = document.getElementById('sections');
for (i = 0; i < elements.length; i++) {
var e = elements[i];
sections.innerHTML = sections.innerHTML + '<li><a href="#' + e.id + '">' + e.innerHTML + '</a></li>';
//$("#sections").append('<li><a href="http://www.idg.se">'+$e.text()+'</a></li>');
}
Ink.requireModules(['Ink.UI.Sticky_1'], function (Sticky) {
new Sticky('#sidenav')
});
console.log('Registering new lang');
});
});
</script>
</head>
<body>
<nav class="ink-navigation xlarge-push-right large-push-right half-top-space">
<ul class="menu horizontal blue">
<li><a href="index.html">Home</a></li>
<li><a href="usage.html">Usage</a></li>
<li><a href="flowchart.html">Flowchart</a></li>
<li><a href="sequenceDiagram.html">Sequence Diagram</a></li>
<li><a href="mermaidCLI.html">mermaid CLI</a></li>
<li class="active"><a href="demos.html">Demos</a></li>
<li><a href="development.html">Development</a></li>
</ul>
</nav>
<div class="ink-grid">
<!--[if lte IE 9 ]>
<div class="ink-alert basic" role="alert">
<button class="ink-dismiss">&times;</button>
<p>
<strong>You are using an outdated Internet Explorer version.</strong>
Please <a href="http://browsehappy.com/">upgrade to a modern browser</a> to improve your web experience.
</p>
</div>
-->
<!-- Add your site or application content here -->
<header class="clearfix vertical-padding">
<h1 class="logo xlarge-push-left large-push-left">
<a href="https://github.com/knsv/mermaid" >mermaid</a>
<small>Diagrams and flowcharts from textsimilar to markdown</small>
</h1>

</header>
<section class="column-group gutters article">
<div class="xlarge-80 large-80 medium-70 small-100 tiny-100">
<article id="main">
<h1 id="demos">Demos</h1>
<h2 id="basic-flowchart">Basic flowchart</h2>
<pre><code>%% Example diagram
graph LR
A -- Link text --> B
A[Square Rect] --> C((Round Rect))
B --> D{Rhombus}
C --> D</code></pre><div class="mermaid">graph LR
A -- Link text --> B
A[Square Rect] --> C((Round Rect))
B --> D{Rhombus}
C --> D</div><h2 id="larger-flowchart-with-some-styling">Larger flowchart with some styling</h2>
<pre><code>%% Code for flowchart below
graph TB
sq[Square shape] --> ci((Circle shape))

od>Odd shape]-- Two line&lt;br>edge comment --> ro
di{Diamond with &lt;br/> line break} --> ro(Rounded&lt;br>square&lt;br>shape)

%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with linebreak&lt;br>in an Odd shape]

di-->ro2(Rounded square shape)

%% Comments after double percent signs
e((Inner / circle&lt;br>and some odd &lt;br>special characters)) --> f(,.?!+-*ز)

cyr[Cyrillic]-->cyr2((Circle shape Начало));

classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green
class di orange</code></pre><div class="mermaid">graph TB
sq[Square shape] --> ci((Circle shape))

od>Odd shape]-- Two line<br>edge comment --> ro
di{Diamond with <br/> line break} --> ro(Rounded<br>square<br>shape)

%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with linebreak<br>in an Odd shape]

di-->ro2(Rounded square shape)

%% Comments after double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)

cyr[Cyrillic]-->cyr2((Circle shape Начало));

classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green
class di orange</div><h2 id="basic-sequence-diagram">Basic sequence diagram</h2>
<pre><code>%% Sequence diagram code
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long&lt;br/>long time, so long&lt;br/>that the text does&lt;br/>not fit on a row.

Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?</code></pre><div class="mermaid">sequenceDiagram
Alice->> Bob: Hello Bob, how are you?
Bob-->> John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!

Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?</div><h2 id="loops-alt-and-opt">Loops, alt and opt</h2>
<pre><code>%% Sequence diagram code
sequenceDiagram
loop Daily query
Alice-&gt;&gt;Bob: Hello Bob, how are you?
alt is sick
Bob-&gt;&gt;Alice: Not so good :(
else is well
Bob-&gt;&gt;Alice: Feeling fresh like a daisy
end

opt Extra response
Bob-&gt;&gt;Alice: Thanks for asking
end
end</code></pre><div class="mermaid">sequenceDiagram
loop Daily query
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end

opt Extra response
Bob->>Alice: Thanks for asking
end
end</div><h2 id="message-to-self-in-loop">Message to self in loop</h2>
<pre><code>%% Sequence diagram code
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts&lt;br/>prevail...
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!</code></pre><div class="mermaid">sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts<br/>prevail...
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!</div>
</article>
</div>
<section class="xlarge-20 large-20 medium-30 small-100 tiny-100">

<a href="https://github.com/knsv/mermaid" class="github-button">Star</a>
<a href="https://github.com/knsv/mermaid" class="github-button">Fork</a>
<a href="https://github.com/knsv/mermaid/archive/master.zip" class="github-button">Download</a>
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
<a href="https://travis-ci.org/knsv/mermaid"><img src="https://travis-ci.org/knsv/mermaid.svg?branch=master" alt="Build Status"></a>
<a href="https://codeclimate.com/github/knsv/mermaid"><img src="https://codeclimate.com/github/knsv/mermaid/badges/gpa.svg" alt="Code Climate"></a>
<nav id="sidenav" class="ink-navigation ink-sticky bottom-space"
data-bottom-element="#sticky-stop">
<ul class="menu vertical grey" id="sections">
<li class="heading active"><a href="#">Index:</a></li>
</ul>
</nav>
</section>
</section>
<div id="sticky-stop">&nbsp;</div>
</div>
<footer class="clearfix">
<div class="ink-grid">
<p class="note"><br/>These pages are generated from markdown source files. <a href="https://raw.githubusercontent.com/knsv/mermaid/gh-pages/docs/flowchart.md">flowchart.md</a> is an example of a markdown file which includes mermaid source.</p>
</div>
</footer>
</body>
</html>


1 change: 1 addition & 0 deletions development.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@
<li><a href="flowchart.html">Flowchart</a></li>
<li><a href="sequenceDiagram.html">Sequence Diagram</a></li>
<li><a href="mermaidCLI.html">mermaid CLI</a></li>
<li><a href="demos.html">Demos</a></li>
<li class="active"><a href="development.html">Development</a></li>
</ul>
</nav>
Expand Down
Loading

0 comments on commit 2e12192

Please sign in to comment.