From c3dfea5c7b782e034237f569e2068eb8d4959ff6 Mon Sep 17 00:00:00 2001 From: gkchic Date: Wed, 31 Dec 2014 14:26:00 +0100 Subject: [PATCH 1/4] Colour changes Changes in background colors --- tpl/ink.html | 25 ++++++++----------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/tpl/ink.html b/tpl/ink.html index 02319f966b..1dfc44d2eb 100644 --- a/tpl/ink.html +++ b/tpl/ink.html @@ -12,8 +12,7 @@ - - + @@ -83,6 +82,8 @@ table, th, td { border: 1px solid #8b8989; + border-spacing: 2px; + border-collapse: collapse; } .date { @@ -99,7 +100,7 @@ margin-bottom: 10; } footer { - background: #cdc5bf; + background: #E6E6E6; } + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ +

+ mermaid + Diagrams and flowcharts from textsimilar to markdown +

+ + + +
+ +
+
+
+

Updating the documentation

+

Getting the development environment up

+
    +
  1. Fork the gh-pages branch in the the mermaid repository
    2. +
  2. Do npm install
    3. +
+

Working with the documentaion

+

The html files are generated from the markdown files in the docs folder.

+

Thus ... One important thing to remember. Do not edit the html files directly! Those changes will be overwritten +when the site is re-generated.

+

There are some commands that are important in working with the documentation:

+
gulp site

This command generates html files from the markdown files in the docs folder. If you do a small fix to a markdown file, +remember to run this command before submitting your changes as they will not be reflected in the html files if you don't.

+
gulp www

This command starts a small, mini, express server for viewing the documentation site.

+

Committing the changes

+

Do a pull request and for merging the changes to the site.

+

Things to be done in order to add a new diagram type

+

Step 1: Grammar & Parsing

+

Grammar

+

This would be to define a jison grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.

+

For instance:

+
    +
  • the flowchart starts with the keyword graph.
    • +
  • the sequence diagram starts with the keyword sequenceDiagram
    • +
+

Store data found during parsing

+

There are some jison specific sub steps here where the parser stores the data encountered when parsing the diagram, this data is later used by the renderer. You can during the parsing call a object provided to the parser by the user of the parser. This object can be called during parsing for storing data.

+
statement
+    : 'participant' actor  { $$='actor'; }
+    | signal               { $$='signal'; }
+    | note_statement       { $$='note';  }
+    | 'title' message      { yy.setTitle($2);  }
+    ;

In the extract of the grammar above, it is defined that a call to the setTitle method in the data object will be done when parsing and the title keyword is encountered.

+

Step 2: Rendering

+

Write a renderer that given the data found during parsing renders the diagram. To look at an example look at sequendeRenderer.js rather then the flowchart renderer as this is a more generic example.

+

Place the renderer in the diagram folder.

+

Step 3: Detection of the new diagram type

+

The second thing to do is to add the capability to detect the new new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.

+

Step 4: The final piece - triggering the rendering

+

At this point when mermaid is trying to render the diagram it will detect it as being of the new type but there will be no match when trying to render the diagram. To fix this add a new case in the switch statement in main.js:init this should match the diagram type returned from step num 2. The code in this new case statement should call the renderer for the diagram type with the data found by the parser as an argument

+

Usage of the parser as a separate module

+

Setup

+
var graph = require('./graphDb');
+var flow = require('./parser/flow');
+flow.parser.yy = graph;

Parsing

+
flow.parser.parse(text);

Data extraction

+
// Javascript example
+graph.getDirection();
+graph.getVertices();
+graph.getEdges();

The parser is also exposed in the mermaid api by calling:

+
var parser = mermaid.getParser();

Note that the parse needs a graph object to store the data as per:

+
flow.parser.yy = graph;

Look at graphDb.js for more details on that object.

+ +
+
+
+ +
+
+
 
+ +
+ + + \ No newline at end of file diff --git a/docs/development.md b/docs/development.md new file mode 100644 index 0000000000..bf96722e41 --- /dev/null +++ b/docs/development.md @@ -0,0 +1,100 @@ +# Updating the documentation + +## Getting the development environment up +1. Fork the gh-pages branch in the the mermaid repository +2. Do npm install + +## Working with the documentaion + +The html files are generated from the markdown files in the docs folder. + +Thus ... One important thing to remember. * Do not edit the html files directly! * Those changes will be overwritten +when the site is re-generated. + +There are some commands that are important in working with the documentation: +``` +gulp site +``` + +This command generates html files from the markdown files in the docs folder. If you do a small fix to a markdown file, +remember to run this command before submitting your changes as they will not be reflected in the html files if you don't. + +``` +gulp www +``` + +This command starts a small, mini, express server for viewing the documentation site. + +## Committing the changes + +Do a pull request and for merging the changes to the site. + +# Things to be done in order to add a new diagram type +## Step 1: Grammar & Parsing +### Grammar +This would be to define a jison grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2. + +For instance: + +* the flowchart starts with the keyword graph. +* the sequence diagram starts with the keyword sequenceDiagram + +### Store data found during parsing +There are some jison specific sub steps here where the parser stores the data encountered when parsing the diagram, this data is later used by the renderer. You can during the parsing call a object provided to the parser by the user of the parser. This object can be called during parsing for storing data. + +``` +statement + : 'participant' actor { $$='actor'; } + | signal { $$='signal'; } + | note_statement { $$='note'; } + | 'title' message { yy.setTitle($2); } + ; +``` + +In the extract of the grammar above, it is defined that a call to the setTitle method in the data object will be done when parsing and the title keyword is encountered. + +## Step 2: Rendering +Write a renderer that given the data found during parsing renders the diagram. To look at an example look at sequendeRenderer.js rather then the flowchart renderer as this is a more generic example. + +Place the renderer in the diagram folder. + +## Step 3: Detection of the new diagram type +The second thing to do is to add the capability to detect the new new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type. + +## Step 4: The final piece - triggering the rendering +At this point when mermaid is trying to render the diagram it will detect it as being of the new type but there will be no match when trying to render the diagram. To fix this add a new case in the switch statement in main.js:init this should match the diagram type returned from step num 2. The code in this new case statement should call the renderer for the diagram type with the data found by the parser as an argument + +# Usage of the parser as a separate module + +## Setup +``` +var graph = require('./graphDb'); +var flow = require('./parser/flow'); +flow.parser.yy = graph; +``` + +## Parsing + +``` +flow.parser.parse(text); +``` + +## Data extraction + +``` +// Javascript example +graph.getDirection(); +graph.getVertices(); +graph.getEdges(); +``` + +The parser is also exposed in the mermaid api by calling: +``` +var parser = mermaid.getParser(); +``` +Note that the parse needs a graph object to store the data as per: +``` +flow.parser.yy = graph; +``` + +Look at graphDb.js for more details on that object. \ No newline at end of file diff --git a/docs/flowchart.md b/docs/flowchart.md new file mode 100644 index 0000000000..c493a7f977 --- /dev/null +++ b/docs/flowchart.md @@ -0,0 +1,222 @@ +#Flowcharts - Basic Syntax +## Graph +This statement declares a new graph and the direction of the graph layout. + +``` +%% Example code +graph TD +``` + +This declares a graph oriented from top to bottom. + +![Example 3](http://www.sveido.com/mermaid/img/ex3.png) + +``` +%% Example code +graph LR +``` + +This declares a graph oriented from left to right. + +Possible directions are: + +* TB - top bottom +* BT - bottom top +* RL - right left +* LR - left right +* TD - same as TB + +![Example 4](http://www.sveido.com/mermaid/img/ex4.png) + +## Nodes + +### A node (default) +``` +id1 +``` +``` +graph LR + id1 +``` +Note that the id is what is displayed in the box. + +### A node with text +It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text +found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The +one previously defined will be used when rendering the box. + +``` +id1[This is the text in the box] +``` + +``` +graph LR + id1[This is the text in the box] +``` + + +### A node with round edges +``` +id1(This is the text in the box); +``` + +``` +graph LR + id1(This is the text in the box) +``` + +### A node in the form of a circle +``` + id1((This is the text in the circle)); +``` + +``` +graph LR + id1(This is the text in the circle) +``` + +### A node in an asymetric shape +``` + id1>This is the text in the box] +``` + +``` +graph LR + id1>This is the text in the box] +``` + +### A node (rhombus) +``` + id1{This is the text in the box} +``` + +``` +graph LR + id1{This is the text in the box} +``` + +## Links between nodes + +Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link. + +### A link with arrow head +``` +A-->B +``` +``` +graph LR; + A-->B +``` + +### An open link + +``` +A --- B +``` + +``` +graph LR; + A --- B +``` + +### Text on links + +``` +A-- This is the text -- B +``` +or +``` +A---|This is the text|B; +``` + +``` +graph LR; + A---|This is the text|B; +``` + + +## Interaction + +It is possible to bind a click event to a node: + +``` +click nodeId callback +``` + +* nodeId is the id of the node +* callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter. +## Styling and classes + +### Styling links +It is possible to style links, for instance you might want to style a link that is going backwards in the flow. As links +has no ids in the same way as nodes, some other way of deciding what link the style should be attached to is required. +Instead of ids the order number of when the link was defined in the graph is used. In the example below the style +defined in the linkStyle statement will belong to the fourth link in the graph: + +``` +linkStyle 3 stroke:#ff3,stroke-width:4px; +``` + +### Styling a node +It is possible to apply specific styles such as a thicker border or a different background color to a node. + +``` +%% Example code +graph LR + id1(Start)-->id2(Stop) + style id1 fill:#f9f,stroke:#333,stroke-width:4px; + style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5; +``` +``` +graph LR + id1(Start)-->id2(Stop) + style id1 fill:#f9f,stroke:#333,stroke-width:4px + style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5 +``` + +#### Classes +More convenient then defining the style everytime is to define a class of styles and attach this class to the nodes that +should have a different look. + +a class definition looks like the example below: + +``` + classDef className fill:#f9f,stroke:#333,stroke-width:4px; +``` + +Attachment of a class to a node is done as per below: + +``` + class nodeId1 className; +``` + +It is also possible to attach a class to a list of nodes in one statement: + +``` + class nodeId1,nodeId2 className; +``` + + +#### Default class + +If a class is named default it will be assigned to all classes without specific class definitions. + +``` + classDef default fill:#f9f,stroke:#333,stroke-width:4px; +``` + +## Graph declarations with spaces between vertices and link and without semicolon + +* In graph declarations, the statements can now end without a semicolon also. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph. + +* A single space is allowed between a vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduce to improve readability. + +Below is the new declaration of the graph which is also valid along with the old declaration of the graph as described in the graph example on the home wiki page. + +``` +graph LR + A[Hard edge] -->|Link text| B(Round edge) + B --> C{Decision} + C -->|One| D[Result one] + C -->|Two| E[Result two] + \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index 31c6970b8d..908be55427 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,6 +1,4 @@ ---- -apa:gorilla ---- + mermaid [![Build Status](https://travis-ci.org/knsv/mermaid.svg?branch=master)](https://travis-ci.org/knsv/mermaid) [![Code Climate](https://codeclimate.com/github/knsv/mermaid/badges/gpa.svg)](https://codeclimate.com/github/knsv/mermaid) ======= @@ -12,24 +10,26 @@ This is why mermaid was born, a simple markdown-like script language for generat The code below would render the following image + -
CodeRendered diagram
+
 graph TD;
     A-->B;
     A-->C;
     B-->D;
     C-->D;
+
-would render this lovely chart: - Example 1 
+
 sequenceDiagram
     participant Alice
     participant Bob
@@ -41,80 +41,30 @@ sequenceDiagram
     John-->Alice: Great!
     John->Bob: How about you?
     Bob-->John: Jolly good!
+
-would render this lovely chart: - Example 2
-A page with a live example can be seen [here](http://www.sveido.com/mermaid/demo/html/web.html). You can also look at mermaid in action using [jsbin](http://jsbin.com/faxunexeku/1/edit?html,output). If you want a live demo, there is an editor provided in the mermaid project or you can simply look at this [great editor](http://danielmschmidt.github.io/mermaid-demo/) - - -# [The main documentation is located in the wiki](https://github.com/knsv/mermaid/wiki) - - - -# Another graph example - -``` -graph LR; - A[Hard edge]-->|Link text|B(Round edge); - B-->C{Decision}; - C-->|One|D[Result one]; - C-->|Two|E[Result two]; -``` - -Below is the new declaration of the graph which since 0.2.16 also is valid along with the old declaration of the graph as described in the graph example on the home wiki page. - -``` -graph LR - A[Hard edge] -->|Link text| B(Round edge) - B --> C{Decision} - C -->|One| D[Result one] - C -->|Two| E[Result two] -``` - +Play with mermaid using this [editor](http://danielmschmidt.github.io/mermaid-demo/). You can also look at mermaid in action using [jsbin](http://jsbin.com/faxunexeku/1/edit?html,output). -![Example 2](http://www.sveido.com/mermaid/img/ex2.png) - - -# mermaid CLI - -Installing mermaid globally (`npm install -g mermaid`) will expose the `mermaid` command to your environment, allowing you to generate PNGs from any file containing mermaid markup via the command line. - -**Note:** The `mermaid` command requires [PhantomJS](http://phantomjs.org/) (version `^1.9.0`) to be installed and available in your *$PATH*, or you can specify it's location with the `-e` option. For most environments, `npm install -g phantomjs` will satisfy this requirement. - -## Usage - -``` -$ mermaid --help - -Usage: mermaid [options] ... - -file The mermaid description file to be rendered - -Options: - -s --svg Output SVG instead of PNG (experimental) - -p --png If SVG was selected, and you also want PNG, set this flag - -o --outputDir Directory to save files, will be created automatically, defaults to `cwd` - -e --phantomPath Specify the path to the phantomjs executable - -h --help Show this message - -v --verbose Show logging - --version Print version and quit -``` - -## CLI Known Issues - -- SVG output currently does some replacement on text, as mermaid's SVG output is only appropriate for browsers. Text color and background color is not yet replicated; please use PNGs for most purposes until this is resolved. -- SVG output is decidedly non-standard. It works, but may cause issues in some viewers. +## Further reading +* [Usage](http://knsv.github.io/mermaid/usage.html) +* [Flowchart syntax](http://knsv.github.io/mermaid/flowchart.html) +* [Sequence diagram syntax](http://knsv.github.io/mermaid/sequenceDiagram.html) +* [Mermaid client](http://knsv.github.io/mermaid/mermaidCLI.html) # Credits -Many thanks to the [d3](http://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries! Thanks also to the [js-sequence-diagram](http://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. +Many thanks to the [d3](http://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing +the graphical layout and drawing libraries! Thanks also to the +[js-sequence-diagram](http://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the +sequence diagrams. *Mermaid was created by Knut Sveidqvist for easier documentation.* + +Knut has not done all work by him self, here is the full list of the projects [contributors](https://github.com/knsv/mermaid/graphs/contributors). diff --git a/docs/mermaidCLI.md b/docs/mermaidCLI.md new file mode 100644 index 0000000000..1911fca874 --- /dev/null +++ b/docs/mermaidCLI.md @@ -0,0 +1,29 @@ +# mermaid CLI + +Installing mermaid globally (`npm install -g mermaid`) will expose the `mermaid` command to your environment, allowing you to generate PNGs from any file containing mermaid markup via the command line. + +**Note:** The `mermaid` command requires [PhantomJS](http://phantomjs.org/) (version `^1.9.0`) to be installed and available in your *$PATH*, or you can specify it's location with the `-e` option. For most environments, `npm install -g phantomjs` will satisfy this requirement. + +## Usage + +``` +$ mermaid --help + +Usage: mermaid [options] ... + +file The mermaid description file to be rendered + +Options: + -s --svg Output SVG instead of PNG (experimental) + -p --png If SVG was selected, and you also want PNG, set this flag + -o --outputDir Directory to save files, will be created automatically, defaults to `cwd` + -e --phantomPath Specify the path to the phantomjs executable + -h --help Show this message + -v --verbose Show logging + --version Print version and quit +``` + +## CLI Known Issues + +- SVG output currently does some replacement on text, as mermaid's SVG output is only appropriate for browsers. Text color and background color is not yet replicated; please use PNGs for most purposes until this is resolved. +- SVG output is decidedly non-standard. It works, but may cause issues in some viewers. diff --git a/docs/usage.md b/docs/usage.md new file mode 100644 index 0000000000..0b510bf23b --- /dev/null +++ b/docs/usage.md @@ -0,0 +1,60 @@ +#Installation + +Either use the npm or bower package managers as per below: + +``` +bower install mermaid --save-dev +``` + +``` +npm install mermaid --save-dev +``` + +Or download javascript files: + +* [mermaid including dependencies](https://cdn.rawgit.com/knsv/mermaid/0.3.0/dist/mermaid.full.js) + +This file bundles mermaid with d3 and dagre-d3. + +* [mermaid without dependencies](https://cdn.rawgit.com/knsv/mermaid/0.3.0/dist/mermaid.slim.js) + +With this file you will need to include d3 and dagre-d3 yourself. + +** Important: ** +> It's best to use a specific tag or commit hash in the URL (not a branch). Files are cached permanently after the first request. + +Read more about that at [https://rawgit.com/](https://rawgit.com/) + +# Usage + +Include mermaid on your web page: + +``` +<script src="mermaid.full.min.js"></script> + +``` + +Further down on your page mermaid will look for tags with ```class="mermaid"```. From these tags mermaid will try to +read the chart definiton which will be replaced with the svg chart. + + +A chart defined like this: + +``` +<div class="mermaid"> + CHART DEFINITION GOES HERE +</div> + +``` + +Would end up like this: +``` +<div class="mermaid" id="mermaidChart0"> + <svg> + Chart ends up here + </svg> +</div> + +``` +An id is also added to mermaid tags without id. + diff --git a/flowchart.html b/flowchart.html new file mode 100644 index 0000000000..c0bd7b6de4 --- /dev/null +++ b/flowchart.html @@ -0,0 +1,320 @@ + + + + + + + Article page + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ +

+ mermaid + Diagrams and flowcharts from textsimilar to markdown +

+ + + +
+ +
+
+
+

Flowcharts - Basic Syntax

+

Graph

+

This statement declares a new graph and the direction of the graph layout.

+
%% Example code
+graph TD

This declares a graph oriented from top to bottom.

+

Example 3

+
%% Example code
+graph LR

This declares a graph oriented from left to right.

+

Possible directions are:

+
    +
  • TB - top bottom
    • +
  • BT - bottom top
    • +
  • RL - right left
    • +
  • LR - left right
    • +
  • TD - same as TB
    • +
+

Example 4

+

Nodes

+

A node (default)

+
id1
graph LR + id1

Note that the id is what is displayed in the box.

+

A node with text

+

It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text +found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The +one previously defined will be used when rendering the box.

+
id1[This is the text in the box]
graph LR + id1[This is the text in the box]

A node with round edges

+
id1(This is the text in the box);
graph LR + id1(This is the text in the box)

A node in the form of a circle

+
    id1((This is the text in the circle));
graph LR + id1(This is the text in the circle)

A node in an asymetric shape

+
    id1>This is the text in the box]
graph LR + id1>This is the text in the box]

A node (rhombus)

+
    id1{This is the text in the box}
graph LR + id1{This is the text in the box}
+

Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.

+ +
A-->B
graph LR; + A-->B
+
A --- B
graph LR; + A --- B

Text on links

+
A-- This is the text -- B

or

+
A---|This is the text|B;
graph LR; + A---|This is the text|B;

Interaction

+

It is possible to bind a click event to a node:

+
click nodeId callback
    +
  • nodeId is the id of the node
    • +
  • callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.

    Styling and classes

    +
    • +
+ +

It is possible to style links, for instance you might want to style a link that is going backwards in the flow. As links +has no ids in the same way as nodes, some other way of deciding what link the style should be attached to is required. +Instead of ids the order number of when the link was defined in the graph is used. In the example below the style +defined in the linkStyle statement will belong to the fourth link in the graph:

+
linkStyle 3 stroke:#ff3,stroke-width:4px;

Styling a node

+

It is possible to apply specific styles such as a thicker border or a different background color to a node.

+
%% Example code
+graph LR
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px;
+    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5;
graph LR + id1(Start)-->id2(Stop) + style id1 fill:#f9f,stroke:#333,stroke-width:4px + style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5

Classes

+

More convenient then defining the style everytime is to define a class of styles and attach this class to the nodes that +should have a different look.

+

a class definition looks like the example below:

+
    classDef className fill:#f9f,stroke:#333,stroke-width:4px;

Attachment of a class to a node is done as per below:

+
    class nodeId1 className;

It is also possible to attach a class to a list of nodes in one statement:

+
    class nodeId1,nodeId2 className;

Default class

+

If a class is named default it will be assigned to all classes without specific class definitions.

+
    classDef default fill:#f9f,stroke:#333,stroke-width:4px;
+
    +

  • In graph declarations, the statements can now end without a semicolon also. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.

    +
    • +

  • A single space is allowed between a vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduce to improve readability.

    +
    • +
+

Below is the new declaration of the graph which is also valid along with the old declaration of the graph as described in the graph example on the home wiki page.

+

``` +graph LR + A[Hard edge] -->|Link text| B(Round edge) + B --> C{Decision} + C -->|One| D[Result one] + C -->|Two| E[Result two]

+ +
+
+
+ +
+
+
 
+ +
+
+
+


These pages are generated from markdown source files. flowchart.md is an example of a markdown file which includes mermaid source.

+
+
+ + \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 5f0c865025..2e66ba650d 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -18,7 +18,7 @@ gulp.task('indexSite', function() { })); }); -gulp.task('www',['indexSite'], function() { +gulp.task('site',['indexSite'], function() { var renderer = new marked.Renderer(); renderer.table = function (header, body) { return "" +header + body+ "
"; @@ -29,7 +29,7 @@ gulp.task('www',['indexSite'], function() { return '
'+code+'
'; } else{ - return "
"+code+'
'; + return '
'+code+'
'; } }; // Compile a template for rendering each page @@ -74,3 +74,15 @@ gulp.task('www',['indexSite'], function() { // Output to build directory .pipe(gulp.dest('./')); }); + +gulp.task('www', ['site'], function() { + console.log('Starting webserver. Running at: http://127.0.0.1:3000/'); + console.log('Hold ctrl+c to quit.'); + var express = require('express'); + var app = express(); + + app.use('/dist/', express.static('./dist')); + app.use('/', express.static('./')); + + app.listen(process.env.PORT || 3000); +}); \ No newline at end of file diff --git a/index.html b/index.html index d105e1c0f4..d37837ee18 100644 --- a/index.html +++ b/index.html @@ -2,172 +2,240 @@ - - - Article page - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + Article page + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
- - - - -
- -

- mermaidDiagrams and flowcharts from textsimilar to markdown -

- - - -
- -
-
-
-

mermaid Build Status Code Climate

+ + + + +
+ +

+ mermaid + Diagrams and flowcharts from textsimilar to markdown +

+ + + +
+ +
+
+
+

mermaid Build Status Code Climate

Generation of diagrams and flowcharts from text in a similar manner as markdown.

Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?

This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.

The code below would render the following image

+
CodeRendered diagram
+
 graph TD;
     A-->B;
     A-->C;
     B-->D;
     C-->D;
+
-would render this lovely chart: - Example 1 
+
 sequenceDiagram
     participant Alice
     participant Bob
@@ -179,106 +247,49 @@ 
here. You can also look at mermaid in action using jsbin. If you want a live demo, there is an editor provided in the mermaid project or you can simply look at this great editor

-
The main documentation is located in the wiki

-
Another graph example

-
graph LR;
-    A[Hard edge]-->|Link text|B(Round edge);
-    B-->C{Decision};
-    C-->|One|D[Result one];
-    C-->|Two|E[Result two];
Below is the new declaration of the graph which since 0.2.16  also is valid along with the old declaration of the graph as described in the graph example on the home wiki page.

-
graph LR
-    A[Hard edge] -->|Link text| B(Round edge)
-    B --> C{Decision}
-    C -->|One| D[Result one]
-    C -->|Two| E[Result two]
Example 2

-
mermaid CLI

-
Installing mermaid globally (npm install -g mermaid) will expose the mermaid command to your environment, allowing you to generate PNGs from any file containing mermaid markup via the command line.

-
Note: The mermaid command requires PhantomJS (version ^1.9.0) to be installed and available in your $PATH, or you can specify it's location with the -e option. For most environments, npm install -g phantomjs will satisfy this requirement.

-
Usage

-
$ mermaid --help
-
-Usage: mermaid [options] ...
-
-file    The mermaid description file to be rendered
-
-Options:
-  -s --svg          Output SVG instead of PNG (experimental)
-  -p --png          If SVG was selected, and you also want PNG, set this flag
-  -o --outputDir    Directory to save files, will be created automatically, defaults to `cwd`
-  -e --phantomPath  Specify the path to the phantomjs executable
-  -h --help         Show this message
-  -v --verbose      Show logging
-  --version         Print version and quit
CLI Known Issues

+
Play with mermaid using this editor. You can also look at mermaid in action using jsbin.

+
Further reading

 
    
-
  • SVG output currently does some replacement on text, as mermaid's SVG output is only appropriate for browsers. Text color and background color is not yet replicated; please use PNGs for most purposes until this is resolved.
    • 
-
  • SVG output is decidedly non-standard. It works, but may cause issues in some viewers.
    • 
+
  • Usage
    • 
+
  • Flowchart syntax
    • 
+
  • Sequence diagram syntax
    • 
+
  • Mermaid client
    • 
 

 
Credits

-
Many thanks to the d3 and dagre-d3 projects for providing the graphical layout and drawing libraries! Thanks also to the js-sequence-diagram project for usage of the grammar for the sequence diagrams.

+
Many thanks to the d3 and dagre-d3 projects for providing
+the graphical layout and drawing libraries! Thanks also to the
+js-sequence-diagram project for usage of the grammar for the
+sequence diagrams.

 
Mermaid was created by Knut Sveidqvist for easier documentation.

-
-      
-    
-    

-      
+
Knut has not done all work by him self, here is the full list of the projects contributors.

+
+            
+        
+        

+            
+        

     

-  
-  
 

-
-  

-    

-      
heading

-      
-      
"Red is not the right word," was the reply. "The plague was scarlet.  The whole face and body turned scarlet in an hour's time. Don't I  know? Didn't I see enough of it? And I am telling you it was scarlet  because—well, because it was scarlet. There is no other word for it."

-    

-    

-      
heading

-      
-      
"Red is not the right word," was the reply. "The plague was scarlet.  The whole face and body turned scarlet in an hour's time. Don't I  know? Didn't I see enough of it? And I am telling you it was scarlet  because—well, because it was scarlet. There is no other word for it."

-    

-    

-      
heading

-      
-      
"Red is not the right word," was the reply. "The plague was scarlet.  The whole face and body turned scarlet in an hour's time. Don't I  know? Didn't I see enough of it? And I am telling you it was scarlet  because—well, because it was scarlet. There is no other word for it."

-    

-    

-      
heading

-      
-      
"Red is not the right word," was the reply. "The plague was scarlet.  The whole face and body turned scarlet in an hour's time. Don't I  know? Didn't I see enough of it? And I am telling you it was scarlet  because—well, because it was scarlet. There is no other word for it."

-    

-    

-      
heading

-      
-      
"Red is not the right word," was the reply. "The plague was scarlet.  The whole face and body turned scarlet in an hour's time. Don't I  know? Didn't I see enough of it? And I am telling you it was scarlet  because—well, because it was scarlet. There is no other word for it."

-    

-  

+    
 

+
 
 

-  

-    
-    
Identification of the owner of the copyright, either by name, abbreviation, or other designation by which it is generally known.

-  

+    

+        

These pages are generated from markdown source files. flowchart.md is an example of a markdown file which includes mermaid source.

+    

 

 
 
\ No newline at end of file
diff --git a/js/highlight.pack.js b/js/highlight.pack.js
new file mode 100644
index 0000000000..9e45f84cad
--- /dev/null
+++ b/js/highlight.pack.js
@@ -0,0 +1,2 @@
+/**/
+!function(e){"undefined"!=typeof exports?e(exports):(window.hljs=e({}),"function"==typeof define&&define.amd&&define([],function(){return window.hljs}))}(function(e){function n(e){return e.replace(/&/gm,"&").replace(//gm,">")}function t(e){return e.nodeName.toLowerCase()}function r(e,n){var t=e&&e.exec(n);return t&&0==t.index}function a(e){var n=(e.className+" "+(e.parentNode?e.parentNode.className:"")).split(/\s+/);return n=n.map(function(e){return e.replace(/^lang(uage)?-/,"")}),n.filter(function(e){return N(e)||/no(-?)highlight/.test(e)})[0]}function o(e,n){var t={};for(var r in e)t[r]=e[r];if(n)for(var r in n)t[r]=n[r];return t}function i(e){var n=[];return function r(e,a){for(var o=e.firstChild;o;o=o.nextSibling)3==o.nodeType?a+=o.nodeValue.length:1==o.nodeType&&(n.push({event:"start",offset:a,node:o}),a=r(o,a),t(o).match(/br|hr|img|input/)||n.push({event:"stop",offset:a,node:o}));return a}(e,0),n}function c(e,r,a){function o(){return e.length&&r.length?e[0].offset!=r[0].offset?e[0].offset"}function c(e){l+=""}function u(e){("start"==e.event?i:c)(e.node)}for(var s=0,l="",f=[];e.length||r.length;){var g=o();if(l+=n(a.substr(s,g[0].offset-s)),s=g[0].offset,g==e){f.reverse().forEach(c);do u(g.splice(0,1)[0]),g=o();while(g==e&&g.length&&g[0].offset==s);f.reverse().forEach(i)}else"start"==g[0].event?f.push(g[0].node):f.pop(),u(g.splice(0,1)[0])}return l+n(a.substr(s))}function u(e){function n(e){return e&&e.source||e}function t(t,r){return RegExp(n(t),"m"+(e.cI?"i":"")+(r?"g":""))}function r(a,i){if(!a.compiled){if(a.compiled=!0,a.k=a.k||a.bK,a.k){var c={},u=function(n,t){e.cI&&(t=t.toLowerCase()),t.split(" ").forEach(function(e){var t=e.split("|");c[t[0]]=[n,t[1]?Number(t[1]):1]})};"string"==typeof a.k?u("keyword",a.k):Object.keys(a.k).forEach(function(e){u(e,a.k[e])}),a.k=c}a.lR=t(a.l||/\b[A-Za-z0-9_]+\b/,!0),i&&(a.bK&&(a.b="\\b("+a.bK.split(" ").join("|")+")\\b"),a.b||(a.b=/\B|\b/),a.bR=t(a.b),a.e||a.eW||(a.e=/\B|\b/),a.e&&(a.eR=t(a.e)),a.tE=n(a.e)||"",a.eW&&i.tE&&(a.tE+=(a.e?"|":"")+i.tE)),a.i&&(a.iR=t(a.i)),void 0===a.r&&(a.r=1),a.c||(a.c=[]);var s=[];a.c.forEach(function(e){e.v?e.v.forEach(function(n){s.push(o(e,n))}):s.push("self"==e?a:e)}),a.c=s,a.c.forEach(function(e){r(e,a)}),a.starts&&r(a.starts,i);var l=a.c.map(function(e){return e.bK?"\\.?("+e.b+")\\.?":e.b}).concat([a.tE,a.i]).map(n).filter(Boolean);a.t=l.length?t(l.join("|"),!0):{exec:function(){return null}}}}r(e)}function s(e,t,a,o){function i(e,n){for(var t=0;t";return o+=e+'">',o+n+i}function d(){if(!w.k)return n(y);var e="",t=0;w.lR.lastIndex=0;for(var r=w.lR.exec(y);r;){e+=n(y.substr(t,r.index-t));var a=g(w,r);a?(B+=a[1],e+=p(a[0],n(r[0]))):e+=n(r[0]),t=w.lR.lastIndex,r=w.lR.exec(y)}return e+n(y.substr(t))}function h(){if(w.sL&&!R[w.sL])return n(y);var e=w.sL?s(w.sL,y,!0,L[w.sL]):l(y);return w.r>0&&(B+=e.r),"continuous"==w.subLanguageMode&&(L[w.sL]=e.top),p(e.language,e.value,!1,!0)}function v(){return void 0!==w.sL?h():d()}function b(e,t){var r=e.cN?p(e.cN,"",!0):"";e.rB?(M+=r,y=""):e.eB?(M+=n(t)+r,y=""):(M+=r,y=t),w=Object.create(e,{parent:{value:w}})}function m(e,t){if(y+=e,void 0===t)return M+=v(),0;var r=i(t,w);if(r)return M+=v(),b(r,t),r.rB?0:t.length;var a=c(w,t);if(a){var o=w;o.rE||o.eE||(y+=t),M+=v();do w.cN&&(M+=""),B+=w.r,w=w.parent;while(w!=a.parent);return o.eE&&(M+=n(t)),y="",a.starts&&b(a.starts,""),o.rE?0:t.length}if(f(t,w))throw new Error('Illegal lexeme "'+t+'" for mode "'+(w.cN||"")+'"');return y+=t,t.length||1}var x=N(e);if(!x)throw new Error('Unknown language: "'+e+'"');u(x);for(var w=o||x,L={},M="",k=w;k!=x;k=k.parent)k.cN&&(M=p(k.cN,"",!0)+M);var y="",B=0;try{for(var C,j,I=0;;){if(w.t.lastIndex=I,C=w.t.exec(t),!C)break;j=m(t.substr(I,C.index-I),C[0]),I=C.index+j}m(t.substr(I));for(var k=w;k.parent;k=k.parent)k.cN&&(M+="");return{r:B,value:M,language:e,top:w}}catch(A){if(-1!=A.message.indexOf("Illegal"))return{r:0,value:n(t)};throw A}}function l(e,t){t=t||E.languages||Object.keys(R);var r={r:0,value:n(e)},a=r;return t.forEach(function(n){if(N(n)){var t=s(n,e,!1);t.language=n,t.r>a.r&&(a=t),t.r>r.r&&(a=r,r=t)}}),a.language&&(r.second_best=a),r}function f(e){return E.tabReplace&&(e=e.replace(/^((<[^>]+>|\t)+)/gm,function(e,n){return n.replace(/\t/g,E.tabReplace)})),E.useBR&&(e=e.replace(/\n/g,"
")),e}function g(e,n,t){var r=n?x[n]:t,a=[e.trim()];return e.match(/(\s|^)hljs(\s|$)/)||a.push("hljs"),r&&a.push(r),a.join(" ").trim()}function p(e){var n=a(e);if(!/no(-?)highlight/.test(n)){var t;E.useBR?(t=document.createElementNS("http://www.w3.org/1999/xhtml","div"),t.innerHTML=e.innerHTML.replace(/\n/g,"").replace(//g,"\n")):t=e;var r=t.textContent,o=n?s(n,r,!0):l(r),u=i(t);if(u.length){var p=document.createElementNS("http://www.w3.org/1999/xhtml","div");p.innerHTML=o.value,o.value=c(u,i(p),r)}o.value=f(o.value),e.innerHTML=o.value,e.className=g(e.className,n,o.language),e.result={language:o.language,re:o.r},o.second_best&&(e.second_best={language:o.second_best.language,re:o.second_best.r})}}function d(e){E=o(E,e)}function h(){if(!h.called){h.called=!0;var e=document.querySelectorAll("pre code");Array.prototype.forEach.call(e,p)}}function v(){addEventListener("DOMContentLoaded",h,!1),addEventListener("load",h,!1)}function b(n,t){var r=R[n]=t(e);r.aliases&&r.aliases.forEach(function(e){x[e]=n})}function m(){return Object.keys(R)}function N(e){return R[e]||R[x[e]]}var E={classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:void 0},R={},x={};return e.highlight=s,e.highlightAuto=l,e.fixMarkup=f,e.highlightBlock=p,e.configure=d,e.initHighlighting=h,e.initHighlightingOnLoad=v,e.registerLanguage=b,e.listLanguages=m,e.getLanguage=N,e.inherit=o,e.IR="[a-zA-Z][a-zA-Z0-9_]*",e.UIR="[a-zA-Z_][a-zA-Z0-9_]*",e.NR="\\b\\d+(\\.\\d+)?",e.CNR="(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",e.BNR="\\b(0b[01]+)",e.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",e.BE={b:"\\\\[\\s\\S]",r:0},e.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[e.BE]},e.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[e.BE]},e.PWM={b:/\b(a|an|the|are|I|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such)\b/},e.CLCM={cN:"comment",b:"//",e:"$",c:[e.PWM]},e.CBCM={cN:"comment",b:"/\\*",e:"\\*/",c:[e.PWM]},e.HCM={cN:"comment",b:"#",e:"$",c:[e.PWM]},e.NM={cN:"number",b:e.NR,r:0},e.CNM={cN:"number",b:e.CNR,r:0},e.BNM={cN:"number",b:e.BNR,r:0},e.CSSNM={cN:"number",b:e.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0},e.RM={cN:"regexp",b:/\//,e:/\/[gimuy]*/,i:/\n/,c:[e.BE,{b:/\[/,e:/\]/,r:0,c:[e.BE]}]},e.TM={cN:"title",b:e.IR,r:0},e.UTM={cN:"title",b:e.UIR,r:0},e});hljs.registerLanguage("coffeescript",function(e){var c={keyword:"in if for while finally new do return else break catch instanceof throw try this switch continue typeof delete debugger super then unless until loop of by when and or is isnt not",literal:"true false null undefined yes no on off",reserved:"case default function var void with const let enum export import native __hasProp __extends __slice __bind __indexOf",built_in:"npm require console print module global window document"},n="[A-Za-z$_][0-9A-Za-z$_]*",t={cN:"subst",b:/#\{/,e:/}/,k:c},r=[e.BNM,e.inherit(e.CNM,{starts:{e:"(\\s*/)?",r:0}}),{cN:"string",v:[{b:/'''/,e:/'''/,c:[e.BE]},{b:/'/,e:/'/,c:[e.BE]},{b:/"""/,e:/"""/,c:[e.BE,t]},{b:/"/,e:/"/,c:[e.BE,t]}]},{cN:"regexp",v:[{b:"///",e:"///",c:[t,e.HCM]},{b:"//[gim]*",r:0},{b:/\/(?![ *])(\\\/|.)*?\/[gim]*(?=\W|$)/}]},{cN:"property",b:"@"+n},{b:"`",e:"`",eB:!0,eE:!0,sL:"javascript"}];t.c=r;var i=e.inherit(e.TM,{b:n}),s="(\\(.*\\))?\\s*\\B[-=]>",o={cN:"params",b:"\\([^\\(]",rB:!0,c:[{b:/\(/,e:/\)/,k:c,c:["self"].concat(r)}]};return{aliases:["coffee","cson","iced"],k:c,i:/\/\*/,c:r.concat([{cN:"comment",b:"###",e:"###",c:[e.PWM]},e.HCM,{cN:"function",b:"^\\s*"+n+"\\s*=\\s*"+s,e:"[-=]>",rB:!0,c:[i,o]},{b:/[:\(,=]\s*/,r:0,c:[{cN:"function",b:s,e:"[-=]>",rB:!0,c:[o]}]},{cN:"class",bK:"class",e:"$",i:/[:="\[\]]/,c:[{bK:"extends",eW:!0,i:/[:="\[\]]/,c:[i]},i]},{cN:"attribute",b:n+":",e:":",rB:!0,rE:!0,r:0}])}});hljs.registerLanguage("xml",function(){var t="[A-Za-z0-9\\._:-]+",e={b:/<\?(php)?(?!\w)/,e:/\?>/,sL:"php",subLanguageMode:"continuous"},c={eW:!0,i:/]+/}]}]}]};return{aliases:["html","xhtml","rss","atom","xsl","plist"],cI:!0,c:[{cN:"doctype",b:"",r:10,c:[{b:"\\[",e:"\\]"}]},{cN:"comment",b:"",r:10},{cN:"cdata",b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"tag",b:"|$)",e:">",k:{title:"style"},c:[c],starts:{e:"",rE:!0,sL:"css"}},{cN:"tag",b:"|$)",e:">",k:{title:"script"},c:[c],starts:{e:"",rE:!0,sL:"javascript"}},e,{cN:"pi",b:/<\?\w+/,e:/\?>/,r:10},{cN:"tag",b:"",c:[{cN:"title",b:/[^ \/><\n\t]+/,r:0},c]}]}});hljs.registerLanguage("markdown",function(){return{aliases:["md","mkdown","mkd"],c:[{cN:"header",v:[{b:"^#{1,6}",e:"$"},{b:"^.+?\\n[=-]{2,}$"}]},{b:"<",e:">",sL:"xml",r:0},{cN:"bullet",b:"^([*+-]|(\\d+\\.))\\s+"},{cN:"strong",b:"[*_]{2}.+?[*_]{2}"},{cN:"emphasis",v:[{b:"\\*.+?\\*"},{b:"_.+?_",r:0}]},{cN:"blockquote",b:"^>\\s+",e:"$"},{cN:"code",v:[{b:"`.+?`"},{b:"^( {4}|	)",e:"$",r:0}]},{cN:"horizontal_rule",b:"^[-\\*]{3,}",e:"$"},{b:"\\[.+?\\][\\(\\[].*?[\\)\\]]",rB:!0,c:[{cN:"link_label",b:"\\[",e:"\\]",eB:!0,rE:!0,r:0},{cN:"link_url",b:"\\]\\(",e:"\\)",eB:!0,eE:!0},{cN:"link_reference",b:"\\]\\[",e:"\\]",eB:!0,eE:!0}],r:10},{b:"^\\[.+\\]:",rB:!0,c:[{cN:"link_reference",b:"\\[",e:"\\]:",eB:!0,eE:!0,starts:{cN:"link_url",e:"$"}}]}]}});hljs.registerLanguage("bash",function(e){var t={cN:"variable",v:[{b:/\$[\w\d#@][\w\d_]*/},{b:/\$\{(.*?)\}/}]},s={cN:"string",b:/"/,e:/"/,c:[e.BE,t,{cN:"variable",b:/\$\(/,e:/\)/,c:[e.BE]}]},a={cN:"string",b:/'/,e:/'/};return{aliases:["sh","zsh"],l:/-?[a-z\.]+/,k:{keyword:"if then else elif fi for while in do done case esac function",literal:"true false",built_in:"break cd continue eval exec exit export getopts hash pwd readonly return shift test times trap umask unset alias bind builtin caller command declare echo enable help let local logout mapfile printf read readarray source type typeset ulimit unalias set shopt autoload bg bindkey bye cap chdir clone comparguments compcall compctl compdescribe compfiles compgroups compquote comptags comptry compvalues dirs disable disown echotc echoti emulate fc fg float functions getcap getln history integer jobs kill limit log noglob popd print pushd pushln rehash sched setcap setopt stat suspend ttyctl unfunction unhash unlimit unsetopt vared wait whence where which zcompile zformat zftp zle zmodload zparseopts zprof zpty zregexparse zsocket zstyle ztcp",operator:"-ne -eq -lt -gt -f -d -e -s -l -a"},c:[{cN:"shebang",b:/^#![^\n]+sh\s*$/,r:10},{cN:"function",b:/\w[\w\d_]*\s*\(\s*\)\s*\{/,rB:!0,c:[e.inherit(e.TM,{b:/\w[\w\d_]*/})],r:0},e.HCM,e.NM,s,a,t]}});hljs.registerLanguage("ruby",function(e){var b="[a-zA-Z_]\\w*[!?=]?|[-+~]\\@|<<|>>|=~|===?|<=>|[<>]=?|\\*\\*|[-/+%^&*~`|]|\\[\\]=?",r="and false then defined module in return redo if BEGIN retry end for true self when next until do begin unless END rescue nil else break undef not super class case require yield alias while ensure elsif or include attr_reader attr_writer attr_accessor",c={cN:"yardoctag",b:"@[A-Za-z]+"},a={cN:"value",b:"#<",e:">"},s={cN:"comment",v:[{b:"#",e:"$",c:[c]},{b:"^\\=begin",e:"^\\=end",c:[c],r:10},{b:"^__END__",e:"\\n$"}]},n={cN:"subst",b:"#\\{",e:"}",k:r},t={cN:"string",c:[e.BE,n],v:[{b:/'/,e:/'/},{b:/"/,e:/"/},{b:/`/,e:/`/},{b:"%[qQwWx]?\\(",e:"\\)"},{b:"%[qQwWx]?\\[",e:"\\]"},{b:"%[qQwWx]?{",e:"}"},{b:"%[qQwWx]?<",e:">"},{b:"%[qQwWx]?/",e:"/"},{b:"%[qQwWx]?%",e:"%"},{b:"%[qQwWx]?-",e:"-"},{b:"%[qQwWx]?\\|",e:"\\|"},{b:/\B\?(\\\d{1,3}|\\x[A-Fa-f0-9]{1,2}|\\u[A-Fa-f0-9]{4}|\\?\S)\b/}]},i={cN:"params",b:"\\(",e:"\\)",k:r},d=[t,a,s,{cN:"class",bK:"class module",e:"$|;",i:/=/,c:[e.inherit(e.TM,{b:"[A-Za-z_]\\w*(::\\w+)*(\\?|\\!)?"}),{cN:"inheritance",b:"<\\s*",c:[{cN:"parent",b:"("+e.IR+"::)?"+e.IR}]},s]},{cN:"function",bK:"def",e:" |$|;",r:0,c:[e.inherit(e.TM,{b:b}),i,s]},{cN:"constant",b:"(::)?(\\b[A-Z]\\w*(::)?)+",r:0},{cN:"symbol",b:e.UIR+"(\\!|\\?)?:",r:0},{cN:"symbol",b:":",c:[t,{b:b}],r:0},{cN:"number",b:"(\\b0[0-7_]+)|(\\b0x[0-9a-fA-F_]+)|(\\b[1-9][0-9_]*(\\.[0-9_]+)?)|[0_]\\b",r:0},{cN:"variable",b:"(\\$\\W)|((\\$|\\@\\@?)(\\w+))"},{b:"("+e.RSR+")\\s*",c:[a,s,{cN:"regexp",c:[e.BE,n],i:/\n/,v:[{b:"/",e:"/[a-z]*"},{b:"%r{",e:"}[a-z]*"},{b:"%r\\(",e:"\\)[a-z]*"},{b:"%r!",e:"![a-z]*"},{b:"%r\\[",e:"\\][a-z]*"}]}],r:0}];n.c=d,i.c=d;var l="[>?]>",u="[\\w#]+\\(\\w+\\):\\d+:\\d+>",N="(\\w+-)?\\d+\\.\\d+\\.\\d(p\\d+)?[^>]+>",o=[{b:/^\s*=>/,cN:"status",starts:{e:"$",c:d}},{cN:"prompt",b:"^("+l+"|"+u+"|"+N+")",starts:{e:"$",c:d}}];return{aliases:["rb","gemspec","podspec","thor","irb"],k:r,c:[s].concat(o).concat(d)}});hljs.registerLanguage("javascript",function(r){return{aliases:["js"],k:{keyword:"in if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const class",literal:"true false null undefined NaN Infinity",built_in:"eval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError Number Math Date String RegExp Array Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray ArrayBuffer DataView JSON Intl arguments require module console window document"},c:[{cN:"pi",r:10,v:[{b:/^\s*('|")use strict('|")/},{b:/^\s*('|")use asm('|")/}]},r.ASM,r.QSM,r.CLCM,r.CBCM,r.CNM,{b:"("+r.RSR+"|\\b(case|return|throw)\\b)\\s*",k:"return throw case",c:[r.CLCM,r.CBCM,r.RM,{b:/;/,r:0,sL:"xml"}],r:0},{cN:"function",bK:"function",e:/\{/,eE:!0,c:[r.inherit(r.TM,{b:/[A-Za-z$_][0-9A-Za-z$_]*/}),{cN:"params",b:/\(/,e:/\)/,c:[r.CLCM,r.CBCM],i:/["'\(]/}],i:/\[|%/},{b:/\$[(.]/},{b:"\\."+r.IR,r:0}]}});hljs.registerLanguage("json",function(e){var t={literal:"true false null"},i=[e.QSM,e.CNM],l={cN:"value",e:",",eW:!0,eE:!0,c:i,k:t},c={b:"{",e:"}",c:[{cN:"attribute",b:'\\s*"',e:'"\\s*:\\s*',eB:!0,eE:!0,c:[e.BE],i:"\\n",starts:l}],i:"\\S"},n={b:"\\[",e:"\\]",c:[e.inherit(l,{cN:null})],i:"\\S"};return i.splice(i.length,0,c,n),{c:i,k:t,i:"\\S"}});hljs.registerLanguage("http",function(){return{i:"\\S",c:[{cN:"status",b:"^HTTP/[0-9\\.]+",e:"$",c:[{cN:"number",b:"\\b\\d{3}\\b"}]},{cN:"request",b:"^[A-Z]+ (.*?) HTTP/[0-9\\.]+$",rB:!0,e:"$",c:[{cN:"string",b:" ",e:" ",eB:!0,eE:!0}]},{cN:"attribute",b:"^\\w",e:": ",eE:!0,i:"\\n|\\s|=",starts:{cN:"string",e:"$"}},{b:"\\n\\n",starts:{sL:"",eW:!0}}]}});hljs.registerLanguage("css",function(e){var c="[a-zA-Z-][a-zA-Z0-9_-]*",a={cN:"function",b:c+"\\(",rB:!0,eE:!0,e:"\\("};return{cI:!0,i:"[=/|']",c:[e.CBCM,{cN:"id",b:"\\#[A-Za-z0-9_-]+"},{cN:"class",b:"\\.[A-Za-z0-9_-]+",r:0},{cN:"attr_selector",b:"\\[",e:"\\]",i:"$"},{cN:"pseudo",b:":(:)?[a-zA-Z0-9\\_\\-\\+\\(\\)\\\"\\']+"},{cN:"at_rule",b:"@(font-face|page)",l:"[a-z-]+",k:"font-face page"},{cN:"at_rule",b:"@",e:"[{;]",c:[{cN:"keyword",b:/\S+/},{b:/\s/,eW:!0,eE:!0,r:0,c:[a,e.ASM,e.QSM,e.CSSNM]}]},{cN:"tag",b:c,r:0},{cN:"rules",b:"{",e:"}",i:"[^\\s]",r:0,c:[e.CBCM,{cN:"rule",b:"[^\\s]",rB:!0,e:";",eW:!0,c:[{cN:"attribute",b:"[A-Z\\_\\.\\-]+",e:":",eE:!0,i:"[^\\s]",starts:{cN:"value",eW:!0,eE:!0,c:[a,e.CSSNM,e.QSM,e.ASM,e.CBCM,{cN:"hexcolor",b:"#[0-9A-Fa-f]+"},{cN:"important",b:"!important"}]}}]}]}]}});
\ No newline at end of file
diff --git a/mermaidCLI.html b/mermaidCLI.html
new file mode 100644
index 0000000000..9c87fec588
--- /dev/null
+++ b/mermaidCLI.html
@@ -0,0 +1,256 @@
+
+
+
+
+    
+    
+    Article page
+    
+    
+    
+    
+    
+    
+
+
+    
+
+    
+        
+        
+        
+        
+        
+        
+        
+
+        
+        
+        
+
+        
+        
+
+
+        
+        
+        
+
+        
+        
+        
+
+        
+        
+        
+        
+        
+
+
+        
+        
+
+
+
+
+

+
+    
+
+    
+
+    

+
+        

+            mermaid
+            Diagrams and flowcharts from textsimilar to markdown
+        

+
+        
+
+    

+
+    

+        

+            

+                
mermaid CLI

+
Installing mermaid globally (npm install -g mermaid) will expose the mermaid command to your environment, allowing you to generate PNGs from any file containing mermaid markup via the command line.

+
Note: The mermaid command requires PhantomJS (version ^1.9.0) to be installed and available in your $PATH, or you can specify it's location with the -e option. For most environments, npm install -g phantomjs will satisfy this requirement.

+
Usage

+
$ mermaid --help
+
+Usage: mermaid [options] ...
+
+file    The mermaid description file to be rendered
+
+Options:
+  -s --svg          Output SVG instead of PNG (experimental)
+  -p --png          If SVG was selected, and you also want PNG, set this flag
+  -o --outputDir    Directory to save files, will be created automatically, defaults to `cwd`
+  -e --phantomPath  Specify the path to the phantomjs executable
+  -h --help         Show this message
+  -v --verbose      Show logging
+  --version         Print version and quit
CLI Known Issues

+
    
+
  • SVG output currently does some replacement on text, as mermaid's SVG output is only appropriate for browsers. Text color and background color is not yet replicated; please use PNGs for most purposes until this is resolved.
    • 
+
  • SVG output is decidedly non-standard. It works, but may cause issues in some viewers.
    • 
+

+
+            

+        

+        

+            
+        

+    

+    
 

+
+

+

+    

+        

These pages are generated from markdown source files. flowchart.md is an example of a markdown file which includes mermaid source.

+    

+

+
+
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000000..e6835ded4c
--- /dev/null
+++ b/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "mermaid-pages",
+  "version": "0.3.0",
+  "description": "Markdownish syntax for generating flowcharts",
+  "main": "src/main.js",
+  "bin": {
+    "mermaid": "./bin/mermaid.js"
+  },
+  "scripts": {
+    "test": "gulp test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/knsv/mermaid"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "chalk": "^0.5.1",
+    "dagre-d3": "~0.3.2",
+    "he": "^0.5.0",
+    "minimist": "^1.1.0",
+    "mkdirp": "^0.5.0",
+    "semver": "^4.1.1",
+    "which": "^1.0.8"
+  },
+  "devDependencies": {
+    "event-stream": "^3.2.0",
+    "express": "^4.10.6",
+    "front-matter": "^0.2.0",
+    "gulp": "~3.8.9",
+    "gulp-data": "^1.1.1",
+    "gulp-ext-replace": "~0.1.0",
+    "gulp-shell": "^0.2.10",
+    "hogan.js": "^3.0.2",
+    "marked": "^0.3.2",
+    "path": "^0.4.9"
+  }
+}
diff --git a/sequenceDiagram.html b/sequenceDiagram.html
index 362aae9b37..d1861aea61 100644
--- a/sequenceDiagram.html
+++ b/sequenceDiagram.html
@@ -2,154 +2,223 @@
 
 
 
-  
-  
-  Article page
-  
-  
-  
-  
-  
-  
-
-  
-
-  
-  
-  
-  
-  
-  
-  
-  
-
-  
-  
-  
-
-  
-  
-
-  
-  
-  
-
-  
-  
-  
-  
-  
-
-
-  
-  
+    
+    
+    Article page
+    
+    
+    
+    
+    
+    
+
+
+    
+
+    
+        
+        
+        
+        
+        
+        
+        
+
+        
+        
+        
+
+        
+        
+
+
+        
+        
+        
+
+        
+        
+        
+
+        
+        
+        
+        
+        
+
+
+        
+        
 
 
 
 
 

 
-  
-
-  
-
-  

-
-    

-      mermaidDiagrams and flowcharts from textsimilar to markdown
-    

-
-    
-
-  

-
-  

-    

-      

-        
Sequence diagrams

+    
+
+    
+
+    

+
+        

+            mermaid
+            Diagrams and flowcharts from textsimilar to markdown
+        

+
+        
+
+    

+
+    

+        

+            

+                
Sequence diagrams

 

 
A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.

 

 
Mermaid can render sequence diagrams. The code snippet below:

-
%% Example of sequence diagram
+
%% Example of sequence diagram
 sequenceDiagram
     Alice->John: Hello John, how are you?
-    John-->Alice: Great!
Renders to the diagram below:

+    John-->Alice: Great!
Renders to the diagram below:

 
sequenceDiagram
     Alice->John: Hello John, how are you?
     John-->Alice: Great!
Syntax

@@ -158,48 +227,48 @@ 
Participants

 rendered in order of appearance in the diagram source text. Sometimes you might want to show the participants in a
 different order then when the first message from the actor appears. Then it is possible to introduce the actor
 explicitly in by doing this decing the order of appearance.

-
%% Example of sequence diagram
+
%% Example of sequence diagram
 sequenceDiagram
     participant John
     participant Alice
     Alice->John: Hello John, how are you?
-    John-->Alice: Great!
Renders to the diagram below:

+    John-->Alice: Great!
Renders to the diagram below:

 
sequenceDiagram
     participant John
     participant Alice
     Alice->John: Hello John, how are you?
     John-->Alice: Great!
Messages

 
Messages can be of two displayed either solid or with a dotted line.

-
[Actor][Arrow][Actor]:Message text
There are two types of arrows currently supported:

+
[Actor][Arrow][Actor]:Message text
There are two types of arrows currently supported:

 
-> which will render a solid line

 
--> which will render a dotted line

 
Notes

 
It is possible to add notes to a sequence diagram. This is done by the notation
 Note [right|left] of [Actor]: Text in note content

 
See the example below:

-
%% Example of sequence diagram
+
%% Example of sequence diagram
 sequenceDiagram
     participant John
-    Note right of John: Text in note
Renders to the diagram below:

+    Note right of John: Text in note
Renders to the diagram below:

 
sequenceDiagram
     participant John
     Note right of John: Text in note
It is possible to break text into different rows by using <br/> as a line breaker.

-
%% Example of sequence diagram
+
%% Example of sequence diagram
 sequenceDiagram
     participant John
-    Note right of John: Text in note<br/>spanning several<br/>rows.
sequenceDiagram
+    Note right of John: Text in note<br/>spanning several<br/>rows.
sequenceDiagram
     participant John
     Note right of John: Text in note
spanning several
rows.
Loops

 
It is possible to express loops in a sequence diagram. This is done by the notation

-
loop Loop text
+
loop Loop text
 ... statements ...
-end
See the example below

-
%% Example of sequence diagram
+end
See the example below

+
%% Example of sequence diagram
 sequenceDiagram
     Alice->John: Hello John, how are you?
     loop Reply every minute
         John-->Alice: Great!
-    end
sequenceDiagram
+    end
sequenceDiagram
     Alice->John: Hello John, how are you?
     loop Every minute
         John-->Alice: Great!
@@ -259,7 +328,7 @@ 
Classes used
Styles for the text on in the note boxes.

Sample stylesheet

-
+

 body {
     background: white;
 }
@@ -338,57 +407,25 @@ 
Classes used

     stroke:none;
     font-family: 'trebuchet ms', verdana, arial;
     font-size:14px;
-}

-
-
-
- +} +
+
+
+ +
- -
 
- -
-
-

heading

- -

"Red is not the right word," was the reply. "The plague was scarlet. The whole face and body turned scarlet in an hour's time. Don't I know? Didn't I see enough of it? And I am telling you it was scarlet because—well, because it was scarlet. There is no other word for it."

-
-
-

heading

- -

"Red is not the right word," was the reply. "The plague was scarlet. The whole face and body turned scarlet in an hour's time. Don't I know? Didn't I see enough of it? And I am telling you it was scarlet because—well, because it was scarlet. There is no other word for it."

-
-
-

heading

- -

"Red is not the right word," was the reply. "The plague was scarlet. The whole face and body turned scarlet in an hour's time. Don't I know? Didn't I see enough of it? And I am telling you it was scarlet because—well, because it was scarlet. There is no other word for it."

-
-
-

heading

- -

"Red is not the right word," was the reply. "The plague was scarlet. The whole face and body turned scarlet in an hour's time. Don't I know? Didn't I see enough of it? And I am telling you it was scarlet because—well, because it was scarlet. There is no other word for it."

-
-
-

heading

- -

"Red is not the right word," was the reply. "The plague was scarlet. The whole face and body turned scarlet in an hour's time. Don't I know? Didn't I see enough of it? And I am telling you it was scarlet because—well, because it was scarlet. There is no other word for it."

-
-
+
 
+
-
- -

Identification of the owner of the copyright, either by name, abbreviation, or other designation by which it is generally known.

-
+
+


These pages are generated from markdown source files. flowchart.md is an example of a markdown file which includes mermaid source.

+
\ No newline at end of file diff --git a/tpl/ink.html b/tpl/ink.html index 1dfc44d2eb..75f8652e05 100644 --- a/tpl/ink.html +++ b/tpl/ink.html @@ -2,6 +2,8 @@ +<<<<<<< HEAD +<<<<<<< HEAD Article page @@ -122,12 +124,188 @@ }); }); +======= +======= +>>>>>>> upstream/gh-pages + + + Article page + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +<<<<<<< HEAD +>>>>>>> upstream/gh-pages +======= +>>>>>>> upstream/gh-pages
+<<<<<<< HEAD +<<<<<<< HEAD + + + +
+ +

+ mermaid + Diagrams and flowcharts from textsimilar to markdown +

+ + + +
+ +
+
+
+ {{{contents}}} +
+
+
+ +
+
+
 
+ +>>>>>>> upstream/gh-pages +======= + + + + +
+ +

+ mermaid + Diagrams and flowcharts from textsimilar to markdown +

+ + + +
+ +
+
+
+ {{{contents}}} +
+
+
+ +
+
+
 
+ +>>>>>>> upstream/gh-pages
-
- -

Identification of the owner of the copyright, either by name, abbreviation, or other designation by which it is generally known.

-
+
+


These pages are generated from markdown source files. flowchart.md is an example of a markdown file which includes mermaid source.

+
\ No newline at end of file diff --git a/usage.html b/usage.html new file mode 100644 index 0000000000..5c31651fc5 --- /dev/null +++ b/usage.html @@ -0,0 +1,263 @@ + + + + + + + Article page + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ +

+ mermaid + Diagrams and flowcharts from textsimilar to markdown +

+ + + +
+ +
+
+
+

Installation

+

Either use the npm or bower package managers as per below:

+
bower install mermaid --save-dev
npm install mermaid --save-dev

Or download javascript files:

+ +

This file bundles mermaid with d3 and dagre-d3.

+ +

With this file you will need to include d3 and dagre-d3 yourself.

+

Important:

+
+

It's best to use a specific tag or commit hash in the URL (not a branch). Files are cached permanently after the first request.

+
+

Read more about that at https://rawgit.com/

+

Usage

+

Include mermaid on your web page:

+
<script src="mermaid.full.min.js"></script>

Further down on your page mermaid will look for tags with class="mermaid". From these tags mermaid will try to +read the chart definiton which will be replaced with the svg chart.

+

A chart defined like this:

+
<div class="mermaid">
+    CHART DEFINITION GOES HERE
+</div>

Would end up like this:

+
<div class="mermaid" id="mermaidChart0">
+    <svg>
+        Chart ends up here
+    </svg>
+</div>

An id is also added to mermaid tags without id.

+ +
+
+
+ +
+
+
 
+ +
+
+
+


These pages are generated from markdown source files. flowchart.md is an example of a markdown file which includes mermaid source.

+
+
+ + \ No newline at end of file From 24c8e1e646db006b7ca92afacb55354f552f6eb2 Mon Sep 17 00:00:00 2001 From: gkchic Date: Mon, 5 Jan 2015 13:44:01 +0100 Subject: [PATCH 3/4] New content template New content template with top navigation --- gulpfile.js | 2 +- tpl/content.html | 211 ++++++++++++++ tpl/ink.html | 696 +++++++++++++++-------------------------------- tpl/ink_org.html | 196 +++++++++++++ 4 files changed, 628 insertions(+), 477 deletions(-) create mode 100644 tpl/content.html create mode 100644 tpl/ink_org.html diff --git a/gulpfile.js b/gulpfile.js index 2e66ba650d..fa696791e4 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -33,7 +33,7 @@ gulp.task('site',['indexSite'], function() { } }; // Compile a template for rendering each page - var template = hogan.compile(String(fs.readFileSync('tpl/ink.html'))); + var template = hogan.compile(String(fs.readFileSync('tpl/ink_org.html'))); return gulp.src('docs/**/*.md') diff --git a/tpl/content.html b/tpl/content.html new file mode 100644 index 0000000000..a6e4db4bdb --- /dev/null +++ b/tpl/content.html @@ -0,0 +1,211 @@ + + + + + +{{{title}}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+

+mermaid +Diagrams and flowcharts from textsimilar to markdown +

+ +
+
+
+
+{{{contents}}} +
+
+
+ +
+
+
 
+
+
+
+


These pages are generated from markdown source files. flowchart.md is an example of a markdown file which includes mermaid source.

+
+
+ + + + Status + API + Training + Shop + Blog + About + + © 2015 GitHub, Inc. + Terms + Privacy + Security + Contact + diff --git a/tpl/ink.html b/tpl/ink.html index 75f8652e05..a5f22b0f69 100644 --- a/tpl/ink.html +++ b/tpl/ink.html @@ -1,489 +1,233 @@ - - - - -<<<<<<< HEAD -<<<<<<< HEAD - - - Article page - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -======= -======= ->>>>>>> upstream/gh-pages - - - Article page - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -<<<<<<< HEAD ->>>>>>> upstream/gh-pages -======= ->>>>>>> upstream/gh-pages +2 contributors +Knut Sveidqvist gkchic +236 lines (196 sloc) 8.989 kb + + + + + +{{{title}}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - -
- -<<<<<<< HEAD -<<<<<<< HEAD - - - - -
- -

- mermaidDiagrams and flowcharts from textsimilar to markdown -

- - - -
- -
-
-
- {{{contents}}} -
-
-
- -
-
-
 
- -
-
-

heading

- -

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel tortor vel nisl vestibulum congue vel vel lectus. Cras vehicula metus nec nibh ornare, in ullamcorper ipsum sodales. Duis luctus tempus augue, sed facilisis sem semper non. Pellentesque elementum auctor lectus, a fringilla quam."

-
-
-

heading

- -

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel tortor vel nisl vestibulum congue vel vel lectus. Cras vehicula metus nec nibh ornare, in ullamcorper ipsum sodales. Duis luctus tempus augue, sed facilisis sem semper non. Pellentesque elementum auctor lectus, a fringilla quam."

-
-
-

heading

- -

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel tortor vel nisl vestibulum congue vel vel lectus. Cras vehicula metus nec nibh ornare, in ullamcorper ipsum sodales. Duis luctus tempus augue, sed facilisis sem semper non. Pellentesque elementum auctor lectus, a fringilla quam."

-
-
-======= - - - - -
- -

- mermaid - Diagrams and flowcharts from textsimilar to markdown -

- - - -
- -
-
-
- {{{contents}}} -
-
-
- -
-
-
 
- ->>>>>>> upstream/gh-pages -======= - - - - -
- -

- mermaid - Diagrams and flowcharts from textsimilar to markdown -

- - - -
- -
-
-
- {{{contents}}} -
-
-
- -
-
-
 
- ->>>>>>> upstream/gh-pages + + +
+

+mermaid +Diagrams and flowcharts from textsimilar to markdown +

+ +
+
+
+
+{{{contents}}} +
+
+
+ +
+
+
 
-
-


These pages are generated from markdown source files. flowchart.md is an example of a markdown file which includes mermaid source.

-
+
+


These pages are generated from markdown source files. flowchart.md is an example of a markdown file which includes mermaid source.

+
- \ No newline at end of file + + + Status + API + Training + Shop + Blog + About + + © 2015 GitHub, Inc. + Terms + Privacy + Security + Contact + diff --git a/tpl/ink_org.html b/tpl/ink_org.html new file mode 100644 index 0000000000..38fd6bf0ab --- /dev/null +++ b/tpl/ink_org.html @@ -0,0 +1,196 @@ + + + + + +{{{title}}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+

+mermaid +Diagrams and flowcharts from textsimilar to markdown +

+ +
+
+
+
+{{{contents}}} +
+
+
+ +
+
+
 
+
+
+
+


These pages are generated from markdown source files. flowchart.md is an example of a markdown file which includes mermaid source.

+
+
+ + \ No newline at end of file From 4f7f0cd7fc332d992f753c67f884dd31c84e1a70 Mon Sep 17 00:00:00 2001 From: gkchic Date: Mon, 5 Jan 2015 13:45:33 +0100 Subject: [PATCH 4/4] Reference to new content template Change link to refer to new content.html template file --- gulpfile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gulpfile.js b/gulpfile.js index fa696791e4..949c88c4c7 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -33,7 +33,7 @@ gulp.task('site',['indexSite'], function() { } }; // Compile a template for rendering each page - var template = hogan.compile(String(fs.readFileSync('tpl/ink_org.html'))); + var template = hogan.compile(String(fs.readFileSync('tpl/content.html'))); return gulp.src('docs/**/*.md')