mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Remove mermaid CLI from main project. Release 7.1.0

This commit is contained in:
Tyler Long 2017-09-14 11:26:21 +08:00
parent a4348f1963
commit 77f1a8ecac
66 changed files with 109 additions and 4620 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitattributes vendored
View File

@ -1 +0,0 @@
*.js text eol=lf

8
.gitignore vendored
View File

@ -1,10 +1,6 @@
.DS_Store
node_modules
coverage
test/tmp_*
test/fixtures/samples/*.actual*
node_modules/
coverage/
dist/*.js
dist/themes/*.css

2
LICENSE
View File

@ -1,6 +1,6 @@
The MIT License (MIT)
Copyright (c) 2014 Knut Sveidqvist
Copyright (c) 2014 - 2017 Knut Sveidqvist
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal

22
README.md
View File

@ -4,7 +4,7 @@
[![Code Climate](https://codeclimate.com/github/knsv/mermaid/badges/gpa.svg)](https://codeclimate.com/github/knsv/mermaid)
[![Join the chat at https://gitter.im/knsv/mermaid](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/knsv/mermaid?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
![](./img/header.png)
![banner](./img/header.png)
Generation of diagrams and flowcharts from text in a similar manner as markdown.
@ -142,7 +142,7 @@ https://unpkg.com/mermaid@<version>/dist/
Replace `<version>` with expected version number.
Example: https://unpkg.com/mermaid@7.0.4/dist/
Example: https://unpkg.com/mermaid@7.1.0/dist/
### Node.js
@ -151,13 +151,16 @@ yarn add mermaid
```
## Further reading
## Documentation
* [Usage](https://mermaidjs.github.io/usage.html)
* [Flowchart syntax](https://mermaidjs.github.io/flowchart.html)
* [Sequence diagram syntax](https://mermaidjs.github.io/sequenceDiagram.html)
* [Mermaid CLI](https://mermaidjs.github.io/mermaidCLI.html)
* [Demos](https://mermaidjs.github.io/demos.html)
https://mermaidjs.github.io
## Sibling projects
- [mermaid CLI](https://github.com/mermaidjs/mermaid.cli)
- [mermaid live editor](https://github.com/mermaidjs/mermaid-live-editor)
- [mermaid webpack demo](https://github.com/mermaidjs/mermaid-webpack-demo)
# Request for assistance
@ -170,7 +173,6 @@ As part of this team you would get write access to the repository and would
represent the project when answering questions and issues.
Together we could continue the work with things like:
* port the code to es6
* adding more typers of diagrams like mindmaps, ert digrams etc
* improving existing diagrams
@ -214,6 +216,8 @@ Manual test in browser:
## Release
For those who have the permission to do so:
Update version number in `package.json`.
npm publish

25
bin/mermaid.js
View File

@ -1,25 +0,0 @@
#!/usr/bin/env node
import chalk from 'chalk'
import cli from '../lib/cli'
import lib from '../lib'
cli.parse(process.argv.slice(2), function (err, message, options) {
if (err) {
console.error(
chalk.bold.red('\nYou had errors in your syntax. Use --help for further information.')
)
err.forEach(function (e) {
console.error(e.message)
})
return
} else if (message) {
console.log(message)
return
}
lib.process(options.files, options, process.exit)
})

197
lib/cli.js
View File

@ -1,197 +0,0 @@
import fs from 'fs'
import chalk from 'chalk'
import which from 'which'
import parseArgs from 'minimist'
import semver from 'semver'
import path from 'path'
import { exec } from 'child_process'
import phantom from 'phantomjs'
import pkg from '../package.json'
var PHANTOM_VERSION = '^2.1.15'
var info = chalk.blue.bold
function Cli (options) {
this.options = {
alias: {
help: 'h',
png: 'p',
outputDir: 'o',
outputSuffix: 'O',
svg: 's',
verbose: 'v',
phantomPath: 'e',
sequenceConfig: 'c',
ganttConfig: 'g',
css: 't',
width: 'w'
},
'boolean': ['help', 'png', 'svg', 'verbose'],
'string': ['outputDir', 'outputSuffix']
}
this.errors = []
this.message = null
this.helpMessage = [
info('Usage: mermaid [options] <file>...'),
'',
'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`',
" -O --outputSuffix Suffix to output filenames in front of '.svg' or '.png', defaults to ''",
' -e --phantomPath Specify the path to the phantomjs executable',
' -t --css Specify the path to a CSS file to be included when processing output',
' -c --sequenceConfig Specify the path to the file with the configuration to be applied in the sequence diagram',
' -g --ganttConfig Specify the path to the file with the configuration to be applied in the gantt diagram',
' -h --help Show this message',
' -v --verbose Show logging',
' -w --width width of the generated png (number)',
' --version Print version and quit'
]
return this
}
Cli.prototype.parse = function (argv, next) {
this.errors = [] // clear errors
var options = parseArgs(argv, this.options)
if (options.version) {
this.message = '' + pkg.version
next(null, this.message)
} else if (options.help) {
this.message = this.helpMessage.join('\n')
next(null, this.message)
} else {
options.files = options._
if (!options.files.length) {
this.errors.push(new Error('You must specify at least one source file.'))
}
// ensure that parameter-expecting options have parameters
;['outputDir', 'outputSuffix', 'phantomPath', 'sequenceConfig', 'ganttConfig', 'css'].forEach(function (i) {
if (typeof options[i] !== 'undefined') {
if (typeof options[i] !== 'string' || options[i].length < 1) {
this.errors.push(new Error(i + ' expects a value.'))
}
}
}.bind(this))
// set svg/png flags appropriately
if (options.svg && !options.png) {
options.png = false
} else {
options.png = true
}
if (options.sequenceConfig) {
try {
fs.accessSync(options.sequenceConfig, fs.R_OK)
} catch (err) {
this.errors.push(err)
}
} else {
options.sequenceConfig = null
}
if (options.ganttConfig) {
try {
fs.accessSync(options.ganttConfig, fs.R_OK)
} catch (err) {
this.errors.push(err)
}
} else {
options.ganttConfig = null
}
if (options.css) {
try {
fs.accessSync(options.css, fs.R_OK)
} catch (err) {
this.errors.push(err)
}
} else {
options.css = path.join(__dirname, '..', 'dist', 'mermaid.css')
}
// set svg/png flags appropriately
if (!options.width) {
options.width = 1200
}
this.checkPhantom = createCheckPhantom(options.phantomPath)
this.checkPhantom(function (err, path) {
if (err) {
this.errors.push(err)
}
options.phantomPath = path
next(
this.errors.length > 0 ? this.errors : null
, this.message
, options
)
}.bind(this))
}
}
function createCheckPhantom (_phantomPath) {
var phantomPath = _phantomPath
return function checkPhantom (_next) {
var next = _next || function () { }
var err
if (typeof phantomPath === 'undefined') {
try {
phantomPath = phantom.path
} catch (e) {
try {
phantomPath = which.sync('phantomjs')
} catch (e) {
if (!phantomPath) {
phantomPath = null
err = new Error(
[
'Cannot find phantomjs in your PATH. If phantomjs is installed',
"you may need to specify its path manually with the '-e' option.",
"Run this executable with '--help' or view the README for more",
'details.'
].join('\n')
)
next(err)
return
}
}
}
}
// If we have phantompath, see if its version satisfies our requirements
exec('"' + phantomPath + '" --version', function (err, stdout, stderr) {
if (err) {
next(new Error('Could not find phantomjs at the specified path.'))
} else if (!semver.satisfies(stdout, PHANTOM_VERSION)) {
next(new Error(
'mermaid requires phantomjs ' +
PHANTOM_VERSION +
' to be installed, found version ' +
stdout
))
} else {
next(null, phantomPath)
}
})
}
}
const cli = (function () {
return new Cli()
}())
export default cli

42
lib/index.js
View File

@ -1,42 +0,0 @@
import path from 'path'
import mkdirp from 'mkdirp'
import { spawn } from 'child_process'
var phantomscript = path.join(__dirname, 'phantomscript.js')
function processMermaid (files, _options, _next) {
var options = _options || {}
var outputDir = options.outputDir || process.cwd()
var outputSuffix = options.outputSuffix || ''
var next = _next || function () { }
var phantomArgs = [
phantomscript,
outputDir,
options.png,
options.svg,
options.css,
options.sequenceConfig,
options.ganttConfig,
options.verbose,
options.width,
outputSuffix
]
files.forEach(function (file) {
phantomArgs.push(file)
})
mkdirp(outputDir, function (err) {
if (err) {
throw err
}
var phantom = spawn(options.phantomPath, phantomArgs)
phantom.on('exit', next)
phantom.stderr.pipe(process.stderr)
phantom.stdout.pipe(process.stdout)
})
}
export default { process: processMermaid }

230
lib/phantomscript.js
View File

@ -1,230 +0,0 @@
/**
* Credits:
* - SVG Processing from the NYTimes svg-crowbar, under an MIT license
* https://github.com/NYTimes/svg-crowbar
* - Thanks to the grunticon project for some guidance
* https://github.com/filamentgroup/grunticon
*/
import system from 'system'
import fs from 'fs'
import webpage from 'webpage'
window.phantom.onError = function (msg, trace) {
var msgStack = ['PHANTOM ERROR: ' + msg]
if (trace && trace.length) {
msgStack.push('TRACE:')
trace.forEach(function (t) {
msgStack.push(
' -> ' +
(t.file || t.sourceURL) +
': ' +
t.line +
(t.function ? ' (in function ' + t.function + ')' : '')
)
})
}
system.stderr.write(msgStack.join('\n'))
window.phantom.exit(1)
}
var page = webpage.create()
var files = system.args.slice(10, system.args.length)
var width = system.args[8]
if (typeof width === 'undefined' || width === 'undefined') {
width = 1200
}
var options = {
outputDir: system.args[1],
png: system.args[2] === 'true',
svg: system.args[3] === 'true',
css: fs.read(system.args[4]),
sequenceConfig: system.args[5] !== 'null' ? JSON.parse(fs.read(system.args[5])) : {},
ganttConfig: system.args[6] !== 'null' ? JSON.parse(fs.read(system.args[6])) : {},
verbose: system.args[7] === 'true',
width: width,
outputSuffix: system.args[9]
}
var log = logger(options.verbose)
options.sequenceConfig.useMaxWidth = false
page.content = [
'<html>',
'<head>',
'<style type="text/css">body {background:white;font-family: Arial;}',
options.css,
'</style>',
'</head>',
'<body>',
'</body>',
'</html>'
].join('\n')
page.injectJs('../dist/mermaid.js')
page.onConsoleMessage = function (msg, lineNum, sourceId) {
log('CONSOLE: ' + msg + ' (from line #' + lineNum + ' in "' + sourceId + '")')
}
log('Num files to execute : ' + files.length)
files.forEach(function (file) {
var contents = fs.read(file)
var filename = file.split(fs.separator).slice(-1)
var oParser = new window.DOMParser()
var oDOM
var svgContent
log('ready to execute: ' + file)
// this JS is executed in this statement is sandboxed, even though it doesn't
// look like it. we need to serialize then unserialize the svgContent that's
// taken from the DOM
svgContent = page.evaluate(executeInPage, {
contents: contents,
ganttConfig: options.ganttConfig,
sequenceConfig: options.sequenceConfig,
confWidth: options.width
})
oDOM = oParser.parseFromString(svgContent, 'text/xml')
resolveSVGElement(oDOM.firstChild)
setSVGStyle(oDOM.firstChild, options.css)
var outputPath = options.outputDir + fs.separator + filename + options.outputSuffix
if (options.png) {
page.viewportSize = {
width: ~~oDOM.documentElement.attributes.getNamedItem('width').value,
height: ~~oDOM.documentElement.attributes.getNamedItem('height').value
}
page.render(outputPath + '.png')
log('saved png: ' + outputPath + '.png')
}
if (options.svg) {
var serialize = new window.XMLSerializer()
fs.write(outputPath + '.svg'
, serialize.serializeToString(oDOM) + '\n'
, 'w'
)
log('saved svg: ' + outputPath + '.svg')
}
})
window.phantom.exit()
function logger (_verbose) {
var verbose = _verbose
return function (_message, _level) {
var level = _level
var message = _message
var log
log = level === 'error' ? system.stderr : system.stdout
if (verbose) {
log.write(message + '\n')
}
}
}
function resolveSVGElement (element) {
var prefix = {
xmlns: 'http://www.w3.org/2000/xmlns/',
xlink: 'http://www.w3.org/1999/xlink',
svg: 'http://www.w3.org/2000/svg'
}
element.setAttribute('version', '1.1')
// removing attributes so they aren't doubled up
element.removeAttribute('xmlns')
element.removeAttribute('xlink')
// These are needed for the svg
if (!element.hasAttributeNS(prefix.xmlns, 'xmlns')) {
element.setAttributeNS(prefix.xmlns, 'xmlns', prefix.svg)
}
if (!element.hasAttributeNS(prefix.xmlns, 'xmlns:xlink')) {
element.setAttributeNS(prefix.xmlns, 'xmlns:xlink', prefix.xlink)
}
}
function setSVGStyle (svg, css) {
if (!css || !svg) { return }
var styles = svg.getElementsByTagName('style')
if (!styles || styles.length === 0) { return }
styles[0].textContent = css
}
// The sandboxed function that's executed in-page by phantom
function executeInPage (data) {
var xmlSerializer = new window.XMLSerializer()
var contents = data.contents
var sequenceConfig = JSON.stringify(data.sequenceConfig)
var ganttConfig = JSON.stringify(data.ganttConfig).replace(/"(function.*})"/, '$1')
var svg
var svgValue
var boundingBox
var width
var height
var confWidth = data.confWidth
var toRemove = document.getElementsByClassName('mermaid')
if (toRemove && toRemove.length) {
for (var i = 0, len = toRemove.length; i < len; i++) {
toRemove[i].parentNode.removeChild(toRemove[i])
}
}
var el = document.createElement('div')
el.className = 'mermaid'
el.appendChild(document.createTextNode(contents))
document.body.appendChild(el)
var config = {
sequenceDiagram: JSON.parse(sequenceConfig),
flowchart: { useMaxWidth: false },
logLevel: 1
}
window.mermaid.initialize(config)
var sc = document.createElement('script')
sc.appendChild(document.createTextNode('mermaid.ganttConfig = ' + ganttConfig + ';'))
document.body.appendChild(sc)
window.mermaid.init()
svg = document.querySelector('svg')
boundingBox = svg.getBoundingClientRect() // the initial bonding box of the svg
width = boundingBox.width * 1.5 // adding the scale factor for consistency with output in chrome browser
height = boundingBox.height * 1.5 // adding the scale factor for consistency with output in chrome browser
var scalefactor = confWidth / (width - 8)
// resizing the body to fit the svg
document.body.setAttribute(
'style'
, 'width: ' + (confWidth - 8) + '; height: ' + (height * scalefactor) + ';'
)
// resizing the svg via css for consistent display
svg.setAttribute(
'style'
, 'width: ' + (confWidth - 8) + '; height: ' + (height * scalefactor) + ';'
)
// set witdth and height attributes used to set the viewport when rending png image
svg.setAttribute(
'width'
, confWidth
)
svg.setAttribute(
'height'
, height * scalefactor
)
svgValue = xmlSerializer.serializeToString(svg) + '\n'
return svgValue
}

25
package.json
View File

@ -1,6 +1,6 @@
{
"name": "mermaid",
"version": "7.0.18",
"version": "7.1.0",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"main": "dist/mermaid.core.js",
"keywords": [
@ -12,9 +12,6 @@
"class diagram",
"git graph"
],
"bin": {
"mermaid": "./bin/mermaid.js"
},
"scripts": {
"build": "node -r babel-register ./node_modules/.bin/webpack --progress --colors",
"build:watch": "yarn build --watch",
@ -22,7 +19,6 @@
"upgrade": "yarn upgrade --latest && yarn remove d3 && yarn add d3@3.5.17",
"lint": "standard",
"karma": "node -r babel-register node_modules/.bin/karma start karma.conf.js --single-run",
"jest": "jest --coverage --runInBand",
"test": "yarn lint && yarn karma",
"jison": "node -r babel-register node_modules/.bin/gulp jison",
"prepublishOnly": "yarn build && yarn release && yarn test"
@ -40,26 +36,19 @@
]
},
"dependencies": {
"chalk": "^2.1.0",
"d3": "3.5.17",
"dagre-d3-renderer": "^0.4.24",
"dagre-layout": "^0.8.0",
"he": "^1.1.1",
"lodash": "^4.17.4",
"minimist": "^1.2.0",
"mkdirp": "^0.5.1",
"moment": "^2.18.1",
"semver": "^5.4.1",
"which": "^1.3.0"
"moment": "^2.18.1"
},
"devDependencies": {
"async": "^2.5.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-lodash": "^3.2.11",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"clone": "^2.1.1",
"codeclimate-test-reporter": "^0.5.0",
"css-loader": "^0.28.7",
"css-to-string-loader": "^0.1.3",
@ -70,7 +59,6 @@
"inject-loader": "^3.0.1",
"jasmine": "^2.8.0",
"jasmine-es6": "^0.4.1",
"jest": "^21.0.2",
"jison": "^0.4.18",
"karma": "^1.7.1",
"karma-chrome-launcher": "^2.2.0",
@ -79,21 +67,14 @@
"karma-webpack": "^2.0.4",
"less": "^2.7.2",
"less-loader": "^4.0.5",
"phantomjs-prebuilt": "^2.1.15",
"puppeteer": "^0.10.2",
"rimraf": "^2.6.2",
"standard": "^10.0.3",
"style-loader": "^0.18.2",
"webpack": "^3.5.6",
"webpack-node-externals": "^1.6.0"
},
"files": [
"bin",
"dist",
"lib",
"src"
],
"jest": {
"testRegex": "test/cli_test-.+?\\.js"
}
]
}

158
test/cli_test-output.js
View File

@ -1,158 +0,0 @@
/* eslint-env jest */
/* eslint-env jasmine */
import fs from 'fs'
import path from 'path'
import async from 'async'
import clone from 'clone'
import rimraf from 'rimraf'
import mermaidCli from '../lib'
const fileTestMermaid = path.join('test', 'fixtures', 'test.mermaid')
const isWin = /^win/.test(process.platform)
let phantomCmd
if (isWin) {
phantomCmd = 'node_modules/.bin/phantomjs.cmd'
} else {
phantomCmd = 'node_modules/.bin/phantomjs'
}
const singleFile = {
files: [fileTestMermaid],
outputDir: path.join(process.cwd(), 'test/tmp_single'),
phantomPath: path.join(process.cwd(), phantomCmd),
width: 1200,
css: path.join(__dirname, '..', 'dist', 'mermaid.css'),
sequenceConfig: null,
ganttConfig: null
}
const multiFile = {
files: [path.join('test', 'fixtures', 'test.mermaid'),
path.join('test', 'fixtures', 'test2.mermaid'),
path.join('test', 'fixtures', 'gantt.mermaid'),
path.join('test', 'fixtures', 'sequence.mermaid')
],
outputDir: 'test/tmp_multi',
phantomPath: path.join(process.cwd(), phantomCmd),
width: 1200,
css: path.join(__dirname, '..', 'dist', 'mermaid.css'),
sequenceConfig: null,
ganttConfig: null
}
beforeEach(() => {
jasmine.DEFAULT_TIMEOUT_INTERVAL = 64000
})
test('output of single png', function (done) {
expect.assertions(3)
const expected = ['test.mermaid.png']
const opt = clone(singleFile)
opt.outputDir += '_png'
opt.png = true
mermaidCli.process(opt.files, opt, function (code) {
expect(code).toBe(0)
verifyFiles(expected, opt.outputDir, done)
})
})
test('output of multiple png', function (done) {
expect.assertions(3)
const expected = ['test.mermaid.png', 'test2.mermaid.png',
'gantt.mermaid.png', 'sequence.mermaid.png']
const opt = clone(multiFile)
opt.outputDir += '_png'
opt.png = true
mermaidCli.process(opt.files, opt, function (code) {
expect(code).toBe(0)
verifyFiles(expected, opt.outputDir, done)
})
})
test('output of single svg', function (done) {
expect.assertions(3)
const expected = ['test.mermaid.svg']
const opt = clone(singleFile)
opt.outputDir += '_svg'
opt.svg = true
mermaidCli.process(opt.files, opt, function (code) {
expect(code).toBe(0)
verifyFiles(expected, opt.outputDir, done)
})
})
test('output of multiple svg', function (done) {
expect.assertions(3)
const expected = ['test.mermaid.svg', 'test2.mermaid.svg',
'gantt.mermaid.svg', 'sequence.mermaid.svg']
const opt = clone(multiFile)
opt.outputDir += '_svg'
opt.svg = true
mermaidCli.process(opt.files, opt, function (code) {
expect(code).toBe(0)
verifyFiles(expected, opt.outputDir, done)
})
})
test('output including CSS', function (done) {
expect.assertions(5)
const expected = ['test.mermaid.png']
const opt = clone(singleFile)
const opt2 = clone(singleFile)
opt.png = true
opt.outputDir += '_css_png'
opt2.png = true
opt2.outputDir += '_css_png'
mermaidCli.process(opt.files, opt, function (code) {
expect(code).toBe(0)
const filename = path.join(opt.outputDir, path.basename(expected[0]))
const one = fs.statSync(filename)
opt2.css = path.join('test', 'fixtures', 'test.css')
mermaidCli.process(opt2.files, opt2, function (code) {
expect(code).toBe(0)
const two = fs.statSync(filename)
expect(one.size).not.toBe(two.size)
verifyFiles(expected, opt.outputDir, done)
})
})
})
function verifyFiles (expected, dir, done) {
async.each(
expected, function (file, cb) {
const filename = path.join(dir, path.basename(file))
fs.stat(filename, function (err, stat) {
cb(err)
})
}, function (err) {
expect(err).toBeFalsy()
const deleteTmps = true
const _rimraf = deleteTmps ? rimraf : function (dir, f) { f(0) }
_rimraf(dir, function (rmerr) {
expect(rmerr).toBeFalsy()
done()
})
}
)
}

126
test/cli_test-parser.js
View File

@ -1,126 +0,0 @@
/* eslint-env jest */
/* eslint-env jasmine */
import cli from '../lib/cli'
beforeEach(() => {
jasmine.DEFAULT_TIMEOUT_INTERVAL = 64000
})
test('parses multiple files', function (done) {
expect.assertions(3)
const argv = ['example/file1.mermaid', 'file2.mermaid', 'file3.mermaid']
const expected = ['example/file1.mermaid', 'file2.mermaid', 'file3.mermaid']
cli.parse(argv, function (err, msg, opt) {
expect(!err).toBeTruthy()
expect(opt.files.length).toBe(3)
expect(opt.files).toEqual(expected)
done()
})
})
test('defaults to png', function (done) {
expect.assertions(3)
const argv = ['example/file1.mermaid']
cli.parse(argv, function (err, msg, opt) {
expect(!err).toBeTruthy()
expect(opt.png).toBeTruthy()
expect(opt.svg).toBeFalsy()
done()
})
})
test('setting svg unsets png', function (done) {
expect.assertions(3)
const argv = ['example/file1.mermaid', '-s']
cli.parse(argv, function (err, msg, opt) {
expect(!err).toBeTruthy()
expect(opt.svg).toBeTruthy()
expect(opt.png).toBeFalsy()
done()
})
})
test('setting png and svg is allowed', function (done) {
expect.assertions(3)
const argv = ['example/file1.mermaid', '-s', '-p']
cli.parse(argv, function (err, msg, opt) {
expect(!err).toBeTruthy()
expect(opt.png).toBeTruthy()
expect(opt.svg).toBeTruthy()
done()
})
})
test('setting an output directory succeeds', function (done) {
expect.assertions(2)
const argv = ['example/file1.mermaid', '-o', 'example/']
cli.parse(argv, function (err, msg, opt) {
expect(!err).toBeTruthy()
expect(opt.outputDir).toBe('example/')
done()
})
})
test('not setting a css source file uses a default style', function (done) {
expect.assertions(2)
const argv = ['example/file1.mermaid']
cli.parse(argv, function (err, msg, opt) {
expect(!err).toBeTruthy()
expect(opt.css).toBeTruthy()
done()
})
})
test('setting a css source file succeeds', function (done) {
expect.assertions(2)
const argv = ['example/file1.mermaid', '-t', 'test/fixtures/test.css']
cli.parse(argv, function (err, msg, opt) {
expect(!err).toBeTruthy()
expect(opt.css).toBeTruthy()
done()
})
})
test('setting an output directory incorrectly causes an error', function (done) {
expect.assertions(1)
const argv = ['-o']
cli.parse(argv, function (err) {
expect(err).toBeTruthy()
done()
})
})
test('a callback function is called after parsing', function (done) {
expect.assertions(3)
const argv = ['example/file1.mermaid']
cli.parse(argv, function (err, msg, opts) {
expect(!err).toBeTruthy()
expect(true).toBeTruthy()
expect(argv).toEqual(opts.files)
done()
})
})

138
test/cli_test-samples.js
View File

@ -1,138 +0,0 @@
/* eslint-env jest */
/* eslint-env jasmine */
import path from 'path'
import rimraf from 'rimraf'
import { exec } from 'child_process'
const localSearchPath = './node_modules/.bin' + path.delimiter + process.env.PATH
const testDir = 'test/fixtures/samples/'.replace('/', path.sep)
const phantomjs = 'node_modules/.bin/phantomjs '.replace('/', path.sep)
const loadHtmlSaveScreenshotPngScripts = testDir + path.sep + 'load_html_save_screenshot_png.js'
rimraf.sync(testDir + '*.actual.*')
function prependOutputArgs (args) {
return '--outputDir=' + testDir + ' --outputSuffix=.actual' + args
}
function execMermaid (args, verify) {
const cmd = 'bin/mermaid.js ' + args
execCmd(cmd, verify)
}
function execPhantomjsToLoadHtmlSaveScreenshotPng (html, verify) {
const cmd = (phantomjs + ' ' + loadHtmlSaveScreenshotPngScripts +
' ' + html + ' ' + html + '.actual.png')
execCmd(cmd, verify)
}
function execCmd (cmd, verify) {
console.log('cmd: ', cmd)
exec(cmd,
{ env: Object.assign({}, process.env, { PATH: localSearchPath }) },
function (error, stdout, stderr) {
console.log('error:', error, '\nstdout:\n', stdout, '\nstderr:\n', stderr)
verify(error, stdout, stderr)
})
}
function verifyNoError (done) {
return function (error, stdout, stderr) {
expect(!error).toBeTruthy()
expect(stderr).toBeFalsy()
done()
}
}
function verifyError (done) {
return function (error, stdout, stderr) {
expect(!error).toBeTruthy()
expect(stderr).toBeTruthy()
done()
}
}
beforeEach(() => {
jasmine.DEFAULT_TIMEOUT_INTERVAL = 64000
})
test('mermaid cli help', function (done) {
expect.assertions(2)
const args = ['--help']
execMermaid(args.join(' '), verifyNoError(done))
})
test('mermaid cli help', function (done) {
expect.assertions(2)
const args = ['--badopt']
execMermaid(args.join(' '), verifyError(done))
});
['', 'fo', 'tspan', 'old'].forEach(function (textPlacement) {
test('sequence svg text placement: ' + textPlacement, function (done) {
expect.assertions(2)
const args = ['--svg',
'--outputDir=' + testDir,
'--outputSuffix=' + (textPlacement ? '_' + textPlacement : '') + '.actual',
textPlacement ? '--sequenceConfig=' + testDir + 'sequence_text_' + textPlacement + '.cfg' : '',
testDir + 'sequence_text.mmd'
]
execMermaid(args.join(' '), verifyNoError(done))
})
})
test('sequence png', function (done) {
expect.assertions(2)
const args = ['--png',
testDir + 'sequence_text.mmd'
]
execMermaid(prependOutputArgs(args.join(' ')), verifyNoError(done))
})
test('flowchart svg text', function (done) {
expect.assertions(2)
const args = ['--svg',
'--css=dist/mermaid.css',
'--width=500',
testDir + 'flowchart_text.mmd'
]
execMermaid(prependOutputArgs(args.join(' ')), verifyNoError(done))
});
['svg', 'png'].forEach(function (format) {
test('flowchart ' + format + 'text2', function (done) {
expect.assertions(2)
const args = ['--' + format,
'--css=dist/mermaid.forest.css',
'--width=500',
testDir + 'flowchart_text2.mmd'
]
execMermaid(prependOutputArgs(args.join(' ')), verifyNoError(done))
})
})
test('gantt axis formatter svg', function (done) {
expect.assertions(2)
const args = ['--svg',
'--css=dist/mermaid.css',
'--width=500',
'--ganttConfig=' + testDir + 'gantt_axis_formatter.cfg',
testDir + 'gantt_axis_formatter.mmd'
]
execMermaid(prependOutputArgs(args.join(' ')), verifyNoError(done))
})
test('gitgraph sample svg', function (done) {
expect.assertions(2)
const args = ['-s', '-v',
'--width=500',
testDir + 'gitgraph.mmd'
]
execMermaid(prependOutputArgs(args.join(' ')), verifyNoError(done))
})
test('load sample.html in phantomjs and save screenshot png', function (done) {
expect.assertions(2)
execPhantomjsToLoadHtmlSaveScreenshotPng(testDir + 'samples.html',
verifyNoError(done))
})

29
test/examples/advancedBasteTag.html
View File

@ -1,29 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../../dist/mermaid.css">
<base href="XXX"/>
<script src="../../dist/mermaid.js"></script>
</head><body>
<script>
mermaid.initialize({
arrowMarkerAbsolute:true
});
</script>
<div class="mermaid">
graph LR;
A-->B;
B-->C;
</div>
<div class="mermaid">
sequenceDiagram
Merchant->>Customer: foo
Note right of Person: Bob thinks a long long time, so long that the text does not fit In a row. Bob thinks a long long time, so long that the text does not fit In a row. Bob thinks a long long time, so long that the text does not fit In a row. Bob thinks a long long time, so long that the text does not fit In a row.
Person-->>Customer: bar
Note left of Person: Foo checks up on him
</div>
</body></html>

24
test/examples/apiTest.html
View File

@ -1,24 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="../../dist/mermaidAPI.js"></script>
<script>
mermaidAPI.initialize({
startOnLoad:true,
logLevel:2
});
$(function(){
var graphDefinition = 'graph TB\na-->b';
console.log(mermaidAPI.render(graphDefinition));
console.log(mermaidAPI.render('id',graphDefinition));
});
</script>
</head>
<body>
</body>
</html>

121
test/examples/calie.html
View File

@ -1,121 +0,0 @@
<html>
<head>
<script type="text/javascript">
// Your Client ID can be retrieved from your project in the Google
// Developer Console, https://console.developers.google.com
var CLIENT_ID = '<YOUR_CLIENT_ID>';
var SCOPES = ["https://www.googleapis.com/auth/calendar.readonly"];
/**
* Check if current user has authorized this application.
*/
function checkAuth() {
gapi.auth.authorize(
{
'client_id': CLIENT_ID,
'scope': SCOPES.join(' '),
'immediate': true
}, handleAuthResult);
}
/**
* Handle response from authorization server.
*
* @param {Object} authResult Authorization result.
*/
function handleAuthResult(authResult) {
var authorizeDiv = document.getElementById('authorize-div');
if (authResult && !authResult.error) {
// Hide auth UI, then load client library.
authorizeDiv.style.display = 'none';
loadCalendarApi();
} else {
// Show auth UI, allowing the user to initiate authorization by
// clicking authorize button.
authorizeDiv.style.display = 'inline';
}
}
/**
* Initiate auth flow in response to user clicking authorize button.
*
* @param {Event} event Button click event.
*/
function handleAuthClick(event) {
gapi.auth.authorize(
{client_id: CLIENT_ID, scope: SCOPES, immediate: false},
handleAuthResult);
return false;
}
/**
* Load Google Calendar client library. List upcoming events
* once client library is loaded.
*/
function loadCalendarApi() {
gapi.client.load('calendar', 'v3', listUpcomingEvents);
}
/**
* Print the summary and start datetime/date of the next ten events in
* the authorized user's calendar. If no events are found an
* appropriate message is printed.
*/
function listUpcomingEvents() {
var request = gapi.client.calendar.events.list({
'calendarId': 'primary',
'timeMin': (new Date()).toISOString(),
'showDeleted': false,
'singleEvents': true,
'maxResults': 10,
'orderBy': 'startTime'
});
request.execute(function(resp) {
var events = resp.items;
appendPre('Upcoming events:');
if (events.length > 0) {
for (i = 0; i < events.length; i++) {
var event = events[i];
var when = event.start.dateTime;
if (!when) {
when = event.start.date;
}
appendPre(event.summary + ' (' + when + ')')
}
} else {
appendPre('No upcoming events found.');
}
});
}
/**
* Append a pre element to the body containing the given message
* as its text node.
*
* @param {string} message Text to be placed in pre element.
*/
function appendPre(message) {
var pre = document.getElementById('output');
var textContent = document.createTextNode(message + '\n');
pre.appendChild(textContent);
}
</script>
<script src="https://apis.google.com/js/client.js?onload=checkAuth">
</script>
</head>
<body>
<div id="authorize-div" style="display: none">
<span>Authorize access to Google Calendar API</span>
<!--Button for the user to click to initiate auth sequence -->
<button id="authorize-button" onclick="handleAuthClick(event)">
Authorize
</button>
</div>
<pre id="output"></pre>
</body>
</html>

36
test/examples/circleColorByClassDef.html
View File

@ -1,36 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../dist/mermaid.css"/>
<script src="../../dist/mermaid.js"></script>
<style>
.cluster {
fill: #fcac93;
rx:4px;
stroke: grey;
}
.cssClass > rect{
fill:#FF0000;
stroke:#FFFF00;
stroke-width:4px;
}
</style>
<link rel="stylesheet" href="../../dist/mermaid.forest.css"/>
</head>
<body>
<h1>classDef for circle and elipse</h1>
A node and D node should be green.
<div class="mermaid" id="i211">
graph LR;
A((start))-->B(step1);
B-->C[step2];
C-->D{step3};
D-->D2(-step3.5-);
D2-->E[end];
classDef green fill:#9f6,stroke:#333,stroke-width:1px;
class A,B,C,D,D2,E green;
</div>
</body>
</html>

79
test/examples/classDiagram.html
View File

@ -1,79 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../../dist/mermaid.js"></script>
<link rel="stylesheet" href="../../dist/mermaid.css"/>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
.cluster {
fill: #fcac93;
rx: 4px;
stroke: grey;
}
.cssClass > rect {
fill: #FF0000;
stroke: #FFFF00;
stroke-width: 4px;
}
</style>
<link rel="stylesheet" href="../../dist/mermaid.forest.css"/>
</head>
<body style="height:100%">
<h1>Rendering</h1>
A should have a red background with styling from class.
<script>
mermaidAPI.initialize({
startOnLoad: true,
logLevel: 5
});
</script>
<div class="mermaid" style="height:500px;">
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Coola label
</div>
<svg id="mermaidChart10" style="display:none" width="100%" height="500" xmlns="http://www.w3.org/2000/svg">
<style type="text/css" title="mermaid-svg-internal-css">/* */
text {
font-family: 'trebuchet ms', verdana, arial;
font-size: 14px;
}
text {
font-family: 'trebuchet ms', verdana, arial;
font-size: 14px;
}
/* */
</style>
<g transform="translate(0,0)">
<rect x="0" y="0" fill="yellow" width="115.5625" height="26.65625"></rect>
<text x="10" y="17" fill="darkblue" class="classText">AveryLongClass</text>
</g>
<g transform="translate(200,0)">
<rect rx="0" ry="0" fill="grey" width="115.5625" height="26.65625"></rect>
<text x="10" y="17" fill="darkblue" class="classText">AveryLongClass</text>
</g>
</svg>
</body>
</html>

51
test/examples/cssClasses.html
View File

@ -1,51 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../dist/mermaid.css"/>
<script src="../../dist/mermaid.js"></script>
<style>
.cluster {
fill: #fcac93;
rx:4px;
stroke: grey;
}
.cssClass > rect{
fill:#FF0000;
stroke:#FFFF00;
stroke-width:4px;
}
</style>
<link rel="stylesheet" href="../../dist/mermaid.forest.css"/>
</head>
<body>
<h1>Css classes</h1>
A should have a red background with styling from class.
<div class="mermaid" id="i211">
graph LR;
A-->B[AAA<span>BBB</span>];
B-->D;
class A cssClass;
</div>
A should have a red background with styling from style definition.
<div class="mermaid" id="i212">
graph LR;
A-->B[AAA<span>BBB</span>];
B-->D;
style A fill:#FF0000,stroke:#FFFF00,stroke-width:4px;
</div>
A should have orange background with styling from local class definition definition.
<div class="mermaid" id="i213">
graph LR;
A-->B[AAA<span>BBB</span>];
B-->D;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class A orange;
linkStyle 0 stroke:#ff3,stroke-width:4px;
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
</div>
</body>
</html>

29
test/examples/entityCodes.html
View File

@ -1,29 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../dist/mermaid.css"/>
<script src="../../dist/mermaid.js"></script>
<style>
body{
background-color: #89896f;
}
</style>
</head>
<body>
<h1>Qutotes to callbacks</h1>
<div class="mermaid" id="i211">
graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
B -->C["#9829; ;^; #60;"]
</div>
<div class="mermaid" id="i211">
sequenceDiagram
Ali#45;ce->>John: Hello John, how are you? #60;
John-->>Alice: Great!#quot;
</div>
</body>
</html>

32
test/examples/fontAwesome.html
View File

@ -1,32 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../dist/mermaid.css"/>
<script src="../../dist/mermaid.js"></script>
<style>
body{
background-color: #89896f;
}
</style>
</head>
<body>
<h1><i class="fa fa-camera-retro"></i> Font awesome support!</h1>
<div class="mermaid" id="i211">
graph LR
A["A double quote:#quot;"] -->B["fa:fa-twitter nu springer vi"]
B -->C[fa:fa-ban nu springer vi]
C--> D(fa:fa-spinner);
D--> E(En fa:fa-camera-retro kanske?);
</div>
<div class="mermaid" id="i211">
sequenceDiagram
Ali#45;ce->>John: Hello John, how are you? #60;
John-->>Alice: Great!#quot;
</div>
</body>
</html>

29
test/examples/ganttSideSpan.html
View File

@ -1,29 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../dist/mermaid.css"/>
<script src="../../dist/mermaid.js"></script>
<script>
mermaid.initialize({
gantt: {
leftPadding: 400
}
});
</script>
</head>
<body>
<div class="mermaid" id="i211">
gantt
dateFormat YYYY-MM-DD
title My Project
section Long Long Long Long Task Name
Completed task :done, des1, 2016-04-25, 2016-05-21
Active task :active, des1, 2016-04-25, 2016-04-30
Future task : des1, 2016-04-25, 2016-05-30
</div>
</body>
</html>

23
test/examples/htmlLabelsFalse.html
View File

@ -1,23 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../../dist/mermaid.css">
<base href="XXX"/>
<script src="../../dist/mermaid.js"></script>
</head><body>
<script>
mermaid.initialize({
flowchart:{
htmlLabels:false
}
});
</script>
<h1>The nodes should not be false</h1>
<div class="mermaid">
graph LR;
A["fa:fa-twitter nu springer vi"]-- I am a<br/>text label -->B["Node<br/>B"];
B-->C[Node C];
</div>
</body></html>

69
test/examples/interactionAndTooltips.html
View File

@ -1,69 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../dist/mermaid.css"/>
<script src="../../dist/mermaid.js"></script>
<style>
body{
background-color: #89896f;
}
</style>
<script>
function callback(id){
alert(id);
}
function callback2(id){
alert('x'+id);
}
function onNodeClick(nodeId){
alert(nodeId);
}
mermaid.initialize({logLevel:1});
</script>
</head>
<body>
<h1>Links to callbacks</h1>
A has a tooltip and a callback <br/>
B has a link and a tooltip <br/>
C has a long tooltip <br/>
<div class="mermaid" id="i211">
graph LR;
A-->B;
B-->C;
click A callback "Tooltip"
click B "http://www.github.com" "This is a link"
click C callback "Tooltip quite long tooltip. So long that several rows are required... Not just two rows..."
</div>
<h1>Links to urls</h1>
A second diagram that should have its own callback on A even though the node has the same id.
<div class="mermaid" id="i213">
graph LR;
A-->B
B-->C
click A callback2 "Tooltip3"
</div>
<h1>Issue #272</h1>
<div class="mermaid" id="i213">
graph LR;
A((start))-->B(step1);
B-->C[step2];
C-->D{step3};
D-->E[end];
classDef green fill:#9f6,stroke:#333,stroke-width:1px;
class A,B,C,D,E green;
click B onNodeClick "tooltip"
</div>
</body>
</html>

40
test/examples/issue311_doubleRender.html
View File

@ -1,40 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="../../dist/mermaid.css"/>
<script src="../../dist/mermaidAPI.js"></script>
<script>
mermaidAPI.initialize({
startOnLoad: false,
logLevel: 1
});
$(function(){
// Example of using the API
var insertSvg = function(svgCode, bindFunctions){
// Rendering is completed so something with the svgCode
var element = document.querySelector("#resDiv");
element.innerHTML = svgCode;
};
var graphDefinition = 'graph TB\na-->b';
var graphDefinition2 = 'graph TB\nc-->d';
var element = document.querySelector("#resDiv");
var graph = mermaidAPI.render( 'graphDiv', graphDefinition, insertSvg, element);
element = document.querySelector("#resDiv");
graph = mermaidAPI.render( 'graphDiv', graphDefinition2, insertSvg, element);
});
</script>
</head>
<body>
<div id="resDiv"></div>
</body>
</html>

44
test/examples/issue_210.html
View File

@ -1,44 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../../dist/mermaid.js"></script>
<script>
var config = {
startOnLoad: true,
callback:function(id){
console.log(id,' rendered');
},
flowchart:{
useMaxWidth:true,
htmlLabels:true
}
};
mermaid.initialize(config);
</script>
<script>
function coolAction(){
console.log('Got callback in user defined function');
}
</script>
<style>
.cluster {
fill: #fcac93;
stroke: grey;
}
</style>
<link rel="stylesheet" href="../../dist/mermaid.forest.css"/>
</head>
<body>
<h1>Issue 210</h1>
A should have a red background.
<div class="mermaid" id="i211">
graph LR;
A-->B[AAA<span>BBB</span>];
B-->D;
classDef test fill:#FF0000,stroke:#FFFF00,stroke-width:4px;
class A test;
</div>
</body>
</html>

46
test/examples/issue_211.html
View File

@ -1,46 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../../dist/mermaid.js"></script>
<script>
var config = {
startOnLoad: true,
callback:function(id){
console.log(id,' rendered');
},
flowchart:{
useMaxWidth:true,
htmlLabels:true
}
};
mermaid.initialize(config);
</script>
<script>
function coolAction(){
console.log('Got callback in user defined function');
}
</script>
<style>
.cluster {
fill: #fcac93;
stroke: grey;
}
</style>
<link rel="stylesheet" href="../../dist/mermaid.forest.css"/>
</head>
<body>
<h1>Issue 211</h1>
<div class="mermaid" id="i211">
graph TD
subgraph A
B
subgraph C
D
end
end
</div>
</body>
</html>

31
test/examples/labelOutOfNode.html
View File

@ -1,31 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../../dist/mermaid.css">
<style>
.node text {
font-size: 14px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serf;
}
</style>
<script src="../../dist/mermaid.js"></script>
</head><body>
<script>
mermaid.initialize({
flowchart:{
useMaxWidth:true,
htmlLabels:false
},
startOnLoad:true
});
</script>
<h1>The text should be inside the boxes</h1>
<div class="mermaid" id="i211">
graph TD;
A[TESTTESTTESTTESTTESTTESTTEST];
A --> B[testtesttesttesttesttesttesttesttesttesttest];
</div>
</body></html>

31
test/examples/leadingComments.html
View File

@ -1,31 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../dist/mermaid.css"/>
<script src="../../dist/mermaid.js"></script>
<style>
body{
background-color: #89896f;
}
</style>
</head>
<body>
<h1>The diagrams below have leading comments</h1>
<div class="mermaid" id="i211">
%% Example diagram
graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
B -->C["#9829; ;^; #60;"]
</div>
<div class="mermaid" id="i211">
%% Example diagram
sequenceDiagram
Ali#45;ce->>John: Hello John, how are you? #60;
John-->>Alice: Great!#quot;
</div>
</body>
</html>

146
test/examples/seq.html
View File

@ -1,146 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../../dist/mermaid.js"></script>
<link rel="stylesheet" href="../../dist/mermaid.css"/>
<script>
mermaid.initialize({
sequenceDiagram:{
mirrorActors:false,
height:35,
topPadding:125,
useMaxWidth:false
},
logLevel:1
});
//mermaid.sequenceConfig = '{"diagramMarginX":50,"diagramMarginY":10,"actorMargin":50,"width":150,"height":45,"boxMargin":10,"boxTextMargin":5,"noteMargin":10,"messageMargin":35, "mirrorActors":true}';
//mermaid.sequenceConfig = JSON.parse('{"diagramMarginX":50,"diagramMarginY":10,"actorMargin":50,"width":150,"height":165,"boxMargin":10,"boxTextMargin":5,"noteMargin":10,"messageMargin":35}');
</script>
<script>
function apa(){
console.log('CLICKED');
}
</script>
</head>
<body>
<h1>Autowrap</h1>
<div class="mermaid">
sequenceDiagram
Merchant->>Customer: "foo#b"
Note left of Person:One row for the a
Note right of Person: Bob thinks a long long time, so long that the text does not fit In a row. Bob thinks a long long time, so long that the text does not fit In a row. Bob thinks a long long time, so long that the text does not fit In a row. Bob thinks a long long time, so long that the text does not fit In a row.
Person-->>Customer: bar
Note left of Person: Foo checks up on him
</div>
<div class="mermaid">
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--xAlice: I am good thanks!
Bob-xJohn: I am good thanks!
Note right of John: Bob thinks a long long time, so long that the text does not fit In a row. Bob thinks a long long time, so long that the text does not fit In a row. Bob thinks a long long time, so long that the text does not fit In a row. Bob thinks a long long time, so long that the text does not fit In a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
</div>
<h1>No line breaks</h1>
<div class="mermaid">
sequenceDiagram;Alice->>Bob: Hello Bob, how are you?;Bob-->Bob: Hmmm?;Bob-->Alice: Ok;
</div>
<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>
<h1>Message types</h1>
<div class="mermaid">
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--xAlice: I am good thanks!
Bob-xJohn: 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>
<h1>Loops, alt and opt</h1>
<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>
<h1>Message to self in loop</h1>
<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>
<h1>Bounding test & async message to self</h1>
<div class="mermaid">
sequenceDiagram
participant Alice
participant Bob
participant John the Long
Alice->Bob: Hello Bob, how are you?
loop Outer loop
Note left of Alice: Bob thinks about <br/> things <br/> to think about
Bob-xBob: I am good thanks!
loop Inner loop
Bob->>John the Long: How about you John?
Note right of John the Long: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit.
end
end
Bob-->>Alice: Checking with John...
Alice->>John the Long: Yes... John, how are you?
John the Long-->>Alice: Super!
</div>
<h1>Parallel</h1>
<div class="mermaid">
sequenceDiagram
par Parallel one
Alice->>Bob: Hello Bob, how are you?
Bob-->>Alice: I am good thanks!
and Parallel two
Alice->>Bob: Are you OK?
Bob-->>Alice: Fine!
and Parallel three
Alice->>Bob: What do you think about it?
Bob-->>Alice: It's good!
end
</div>
<br/>
</body>
</html>

34
test/examples/simpleBasteTag.html
View File

@ -1,34 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../../dist/mermaid.css">
<base href="http://127.0.0.1:8080/"/>
<script src="../../dist/mermaid.js"></script>
</head><body>
<script>
var config = {
startOnLoad:true,
arrowMarkerAbsolute:true
};
mermaid.initialize(config);
</script>
<div class="mermaid">
graph LR;
A-->B;
B-->C;
</div>
<div class="mermaid">
info
</div>
<div class="mermaid">
sequenceDiagram
Merchant->>Customer: foo
Note right of Person: Bob thinks a long long time, so long that the text does not fit In a row. Bob thinks a long long time, so long that the text does not fit In a row. Bob thinks a long long time, so long that the text does not fit In a row. Bob thinks a long long time, so long that the text does not fit In a row.
Person-->>Customer: bar
Note left of Person: Foo checks up on him
</div>
</body></html>

34
test/examples/syntaxErrorHandling.html
View File

@ -1,34 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../dist/mermaid.css"/>
<script>
</script>
<script src="../../dist/mermaid.js"></script>
<style>
body{
background-color: white;
}
</style>
</head>
<body>
<h1><i class="fa fa-camera-retro"></i> Font awesome support!</h1>
<div class="mermaid" id="i211">
groph LR
A["A double quote:#quot;"] -->B["fa:fa-twitter nu springer vi"]
B -->C[fa:fa-ban nu springer vi]
C--> D(fa:fa-spinner);
D--> E(En fa:fa-camera-retro kanske?);
</div>
<div class="mermaid" id="i212">
sequenceDiagram
Ali#45;ce->>John: Hello John, how are you? #60;
John-->>Alice: Great!#quot;
</div>
</body>
</html>

9
test/fconf.json
View File

@ -1,9 +0,0 @@
{
startOnLoad:true,
htmlLabels:true,
callback:function(id){
console.log(id,' rendered');
},
flowchart:{
useMaxWidth:false,
};

8
test/fixtures/gantt.mermaid vendored
View File

@ -1,8 +0,0 @@
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d

4
test/fixtures/samples/flowchart_text.mmd vendored
View File

@ -1,4 +0,0 @@
graph TD
A[label]
B[very very very long long long long-long-long text]
A--test-->B

5
test/fixtures/samples/flowchart_text2.mmd vendored
View File

@ -1,5 +0,0 @@
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;

11
test/fixtures/samples/gantt_axis_formatter.cfg vendored
View File

@ -1,11 +0,0 @@
{
"titleTopMargin":25,
"barHeight":20,
"barGap":4,
"topPadding":50,
"sidePadding":75,
"gridLineStartPadding":35,
"fontSize":11,
"numberSectionStyles":3,
"axisFormatter": [["%-m/%-d", "function (d){return d.getDay() == 1;}"]]
}

8
test/fixtures/samples/gantt_axis_formatter.mmd vendored
View File

@ -1,8 +0,0 @@
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d

19
test/fixtures/samples/gitgraph.mmd vendored
View File

@ -1,19 +0,0 @@
gitGraph BT:
options
{
"nodeSpacing": 150
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
reset newbranch^^
commit
commit

16
test/fixtures/samples/load_html_save_screenshot_png.js vendored
View File

@ -1,16 +0,0 @@
// usage: ../../../node_modules/.bin/phantomjs <html> <png>
import system from 'system'
import webpage from 'webpage'
const html = system.args[1]
const png = system.args[2]
console.log('png:', png)
const page = webpage.create()
page.open(html)
page.onLoadFinished = function () {
page.render(png)
global.phantom.exit()
}

103
test/fixtures/samples/samples.html vendored
View File

@ -1,103 +0,0 @@
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../../dist/mermaid.css"/>
<script src="../../../dist/mermaid.js"></script>
<script>
var config = {
startOnLoad:true,
callback:function(id){
console.log(id,' rendered');
},
flowchart:{
useMaxWidth:false,
htmlLabels:true
},
sequenceDiagram: {
"textPlacement": "tspan"
},
gantt: {
"titleTopMargin":25,
"barHeight":20,
"barGap":4,
"topPadding":50,
"sidePadding":75,
"gridLineStartPadding":35,
"fontSize":11,
"numberSectionStyles":3,
"axisFormatter": [["%-m/%-d", function (d){return d.getDay() == 1;}]]
},
logLevel:5
};
mermaid.initialize(config);
</script>
</head><body>
<h3>flow chart</h3>
<div class="mermaid" id="flow_chart_1">
graph TD
A[label]
B[very very very long long long long-long-long text]
A--test-->B
</div>
<div class="mermaid" id="flow_chart_2">
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
</div>
<h3>sequence diagram</h3>
<div class="mermaid" id="sequence_diagram_1">
sequenceDiagram
participant A as actor
participant B as very very very long long long long-long-long text
A->>B: hi
B-->A:
B->>A: hello
</div>
<h3>gantt chart</h3>
<div class="mermaid" id="gantt_axis_formatter">
gantt
dateFormat YYYY-MM-DD
title gantt chart
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
</div>
<h3>git graph</h3>
<div class="mermaid" id="git_graph_1">
gitGraph BT:
options
{
"nodeSpacing": 150
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
reset newbranch^^
commit
commit
</div>
</body></html>

2
test/fixtures/samples/sequence_err.mmd vendored
View File

@ -1,2 +0,0 @@
sequenceDiagram
bad

6
test/fixtures/samples/sequence_text.mmd vendored
View File

@ -1,6 +0,0 @@
sequenceDiagram
participant A as actor
participant B as very very very long long long long-long-long text
A->>B: hi
B-->A:
B->>A: hello

3
test/fixtures/samples/sequence_text_fo.cfg vendored
View File

@ -1,3 +0,0 @@
{
"textPlacement": "fo"
}

3
test/fixtures/samples/sequence_text_old.cfg vendored
View File

@ -1,3 +0,0 @@
{
"textPlacement": "old"
}

3
test/fixtures/samples/sequence_text_tspan.cfg vendored
View File

@ -1,3 +0,0 @@
{
"textPlacement": "tspan"
}

8
test/fixtures/sequence.mermaid vendored
View File

@ -1,8 +0,0 @@
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->>Alice: I am good thanks!
Bob-->>John the Long: How about you John?
Bob-->>Alice: Checking with John...
Alice->>John the Long: Yes... John, how are you?
John the Long-->Alice: Better than you!

1
test/fixtures/test.css vendored
View File

@ -1 +0,0 @@
body { background: #ff0000; }

5
test/fixtures/test.mermaid vendored
View File

@ -1,5 +0,0 @@
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;

7
test/fixtures/test2.mermaid vendored
View File

@ -1,7 +0,0 @@
graph LR;
A[Hard edge]-->|Link text|B(Round edge);
B-->C{Decision};
C-->|One|D[Result one];
C-->|Two|E[Result two];
classDef pink fill:#f9f,stroke:#333,stroke-width:4px;
class C pink;

154
test/gantt.html
View File

@ -1,154 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../dist/mermaid.js"></script>
<link rel="stylesheet" href="../dist/mermaid.forest.css"/>
<script>
mermaid.initialize({
gantt: {
titleTopMargin:25,
barHeight:20,
barGap:4,
topPadding:50,
leftPadding:75,
gridLineStartPadding:5,
fontSize:11,
numberSectionStyles:3,
axisFormatter: [
// Within a day
["X%I:%M", function (d) {
return d.getHours();
}],
// Monday a week
["w. %U", function (d) {
return d.getDay() == 1;
}],
// Day within a week (not monday)
["%a %d", function (d) {
return d.getDay() && d.getDate() != 1;
}],
// within a month
["%b %d", function (d) {
return d.getDate() != 1;
}],
// Month
["%m-%y", function (d) {
return d.getMonth();
}]
]
}
});
</script>
</head>
<body>
<h1>scale tests</h1>
<h2>less then a day</h2>
<div class="mermaid">
gantt
dateFormat YYYY-MM-DD H:mm
title Adding GANTT diagram functionality to mermaid
section Design
Design jison grammar :done, crit, des1, 2014-01-06 1:30,4h
Create example text :done, after des1,6h
</div>
<h2>less then a week</h2>
<div class="mermaid">
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid2
section Design
Design jison grammar :done, crit, des1, 2014-01-06,2d
Create example text :done, after des1,3d
</div>
<h2>less then a month</h2>
<div class="mermaid">
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section Design
Design jison grammar :done, crit, des1, 2015-01-05,2d
Create example text :done, after des1, 2w
</div>
<h2>less then a year</h2>
<div class="mermaid">
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section Design
Design1:done, crit, des1, 2014-01-22,4w
Design2:after des1, 3w
Design3:3w
Design4:3w
Design5:18d
Design6:2w
Implementation1:3w
Implementation2:3w
</div>
<h1>Other tests</h1>
<div class="mermaid">
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section Design
Design jison grammar :done, crit, des1, 2014-01-06, 2014-01-09
Create example text :done, des2, 2014-01-06, 3d
Bounce gantt example with users :active, crit, des3, after des2, 5d
section Implementation
update build script :2014-01-06,24h
Implement parser and jison :after des1, 2d
Create tests for parser :active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid core bore tore gore bore lore :1d
section Documentation
Describe gantt syntax :active,a1, 2014-01-10, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :after a1 , 48h
</div>
Text before. Bla b la bla. Look at the diagram below:
<div class="mermaid">
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 3d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
section Another2
another task : 24d
section Another3
another task : 24d
section Another4
another task : 24d
section Another5
another task : 24d
section Another6
another task : 24d
section Another7
another task : 24d
section Another8
another task : 24d
section Another9
another task : 24d
</div>
As you can see, bla bla bla.
<div class="mermaid">
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 3h
</div>
</body>
</html>

10
test/gconf.json
View File

@ -1,10 +0,0 @@
{
"titleTopMargin":25,
"barHeight":20,
"barGap":4,
"topPadding":50,
"leftPadding":75,
"gridLineStartPadding":35,
"fontSize":11,
"numberSectionStyles":3
}

24
test/index.html
View File

@ -1,24 +0,0 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
<script src="nav.js"></script>
</head>
<body style="height:1000px" ng-app="navApp">
<div ng-controller="NavAppCtrl">
<ul style="width:4%;float:left;" >
<li ng-repeat="item in items"><a ng-click="go(item.url)">{{item.name}}</a></li>
</ul>
<iframe src="{{frameUrl}}" style="float:right;width:90%;height:1000px;"></iframe>
</div>
</body>
</html>

176
test/mix-dark-theme.html
View File

@ -1,176 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../dist/mermaid.js"></script>
<link rel="stylesheet" href="../dist/mermaid.dark.css"/>
<script>
var mermaid_config = {
startOnLoad:true,
htmlLabels:true
}
mermaid.sequenceConfig = {
diagramMarginX:50,
diagramMarginY:10,
boxTextMargin:5,
noteMargin:10,
messageMargin:35,
mirrorActors:true,
width:150,
// Height of actor boxes
height:30
};
mermaid.ganttConfig = {
titleTopMargin:25,
barHeight:20,
barGap:4,
topPadding:50,
leftPadding:100,
gridLineStartPadding:35,
fontSize:11,
numberSectionStyles:4,
axisFormatter: [
// Within a day
["%I:%M", function (d) {
return d.getHours();
}],
// Monday a week
["w. %U", function (d) {
return d.getDay() == 1;
}],
// Day within a week (not monday)
["%a %d", function (d) {
return d.getDay() && d.getDate() != 1;
}],
// within a month
["%b %d", function (d) {
return d.getDate() != 1;
}],
// Month
["%m-%y", function (d) {
return d.getMonth();
}]
]
};
mermaid.startOnLoad=true;
</script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Simulate Darker Themed Page -->
<style>
body {
background: #323D47;
font-family: sans-serif;
}
</style>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="mermaid">graph LR
subgraph old sys 1
a1(new client)-->b1(sys1 server)
oc1(Old client)-->b2
end
subgraph old sys 2
a2(new client)-->b2(sys2 server)
oc2(Old client)-->b2
end
subgraph old sys 3
a3(new client)-->b3(sys3 server)
end
subgraph New sys
a1
a2
a3
end
</div>
<hr/>
<div class="mermaid">
graph LR;
A[Now with default style on links]--v-->B{a = '1,2'}
B-->|v|C[v]
B-- ... default style on links -->Z>My default thing this]
C-->D{condition};
linkStyle 0 stroke-width:2px,fill:none,stroke:steelblue;
linkStyle default stroke-width:2px,fill:none,stroke:crimson;
</div>
<hr/>
<div class="mermaid">
graph LR
A[Square Rect] -- Link text --> B((Circle))
A[Square Rect]--v-->D((Circle))
A --> C(Round Rect)
B == testing ==> D{Rhombus}
C-.->D
</div>
<hr/>
<div class="mermaid">
sequenceDiagram
participant Alice
participant Bob
participant John the Long
Alice->>Bob: Hello Bob, how are you?
loop Outer loop
Note left of Alice: Bob thinks about <br/> things <br/> to think about
Bob-xBob: I am good thanks!
loop Inner loop
Bob->>John the Long: How about you John?
Note right of John the Long: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit.
end
end
Bob-->>Alice: Checking with John...
Alice->>John the Long: Yes... John, how are you?
John the Long-->>Alice: Super!
</div>
<hr/>
<div class="mermaid">
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h
</div>
<div class="mermaid">
info
</div>
</body>
</html>

167
test/mix.html
View File

@ -1,167 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../dist/mermaid.forest.css"/>
<script src="../dist/mermaid.js"></script>
<script>
var mermaid_config = {
startOnLoad:true,
htmlLabels:true
}
mermaid.sequenceConfig = {
diagramMarginX:50,
diagramMarginY:10,
boxTextMargin:5,
noteMargin:10,
messageMargin:35,
mirrorActors:true,
width:150,
// Height of actor boxes
height:30
};
mermaid.ganttConfig = {
titleTopMargin:25,
barHeight:20,
barGap:4,
topPadding:50,
leftPadding:100,
gridLineStartPadding:35,
fontSize:11,
numberSectionStyles:4,
axisFormatter: [
// Within a day
["%I:%M", function (d) {
return d.getHours();
}],
// Monday a week
["w. %U", function (d) {
return d.getDay() == 1;
}],
// Day within a week (not monday)
["%a %d", function (d) {
return d.getDay() && d.getDate() != 1;
}],
// within a month
["%b %d", function (d) {
return d.getDate() != 1;
}],
// Month
["%m-%y", function (d) {
return d.getMonth();
}]
]
};
mermaid.startOnLoad=true;
</script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="mermaid">graph LR
subgraph old sys 1
a1(new client)-->b1(sys1 server)
oc1(Old client)-->b2
end
subgraph old sys 2
a2(new client)-->b2(sys2 server)
oc2(Old client)-->b2
end
subgraph old sys 3
a3(new client)-->b3(sys3 server)
end
subgraph New sys
a1
a2
a3
end
</div>
<hr/>
<div class="mermaid">
graph LR;
A[Now with default style on links]--v-->B{a = '1,2'}
B-->|v|C[v]
B-- ... default style on links -->Z>My default thing this]
C-->D{condition};
linkStyle 0 stroke-width:2px,fill:none,stroke:blue;
linkStyle default stroke-width:2px,fill:none,stroke:red;
</div>
<hr/>
<div class="mermaid">
graph LR
A[Square Rect] -- Link text --> B((Circle))
A[Square Rect]--v-->D((Circle))
A --> C(Round Rect)
B == testing ==> D{Rhombus}
C-.->D
</div>
<hr/>
<div class="mermaid">
sequenceDiagram
participant Alice
participant Bob
participant John the Long
Alice->>Bob: Hello Bob, how are you?
loop Outer loop
Note left of Alice: Bob thinks about <br/> things <br/> to think about
Bob-xBob: I am good thanks!
loop Inner loop
Bob->>John the Long: How about you John?
Note right of John the Long: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit.
end
end
Bob-->>Alice: Checking with John...
Alice->>John the Long: Yes... John, how are you?
John the Long-->>Alice: Super!
</div>
<hr/>
<div class="mermaid">
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h
</div>
<div class="mermaid">
info
</div>
</body>
</html>

20
test/nav.js
View File

@ -1,20 +0,0 @@
var navApp = window.angular.module('navApp', [])
navApp.controller('NavAppCtrl', function ($scope) {
$scope.items = [
{
'name': 'Ett',
'url': 'cases/ett.html'
},
{
'name': 'Two',
'url': 'cases/two.html'
}
]
$scope.frameUrl = 'web.html'
$scope.go = function (url) {
window.alert(url)
}
})

3
test/sconf.json
View File

@ -1,3 +0,0 @@
{
"mirrorActors": false
}

80
test/seq.css
View File

@ -1,80 +0,0 @@
body {
background: #fcfcfe;
font-family: Helvetica;
}
.actor {
stroke: #CCCCFF;
fill: #ECECFF;
}
text.actor {
fill:black;
stroke:none;
font-family: Helvetica;
}
.actor-line {
stroke:grey;
}
.messageLine0 {
stroke-width:1.5;
stroke-dasharray: "2 2";
marker-end:"url(#arrowhead)";
stroke:black;
}
.messageLine1 {
stroke-width:1.5;
stroke-dasharray: "2 2";
stroke:black;
}
#arrowhead {
fill:black;
}
.messageText {
fill:black;
stroke:none;
font-family: 'trebuchet ms', verdana, arial;
font-size:14px;
}
.labelBox {
stroke: #CCCCFF;
fill: #ECECFF;
}
.labelText {
fill:black;
stroke:none;
font-family: 'trebuchet ms', verdana, arial;
}
.loopText {
fill:black;
stroke:none;
font-family: 'trebuchet ms', verdana, arial;
}
.loopLine {
stroke-width:2;
stroke-dasharray: "2 2";
marker-end:"url(#arrowhead)";
stroke: #CCCCFF;
}
.note {
stroke: #decc93;
stroke: #CCCCFF;
fill: #fff5ad;
}
.noteText {
fill:black;
stroke:none;
font-family: 'trebuchet ms', verdana, arial;
font-size:14px;
}

286
test/web.html
View File

@ -1,286 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../dist/mermaid.forest.css"/>
<script src="../dist/mermaid.js"></script>
<script>
var config = {
startOnLoad:true,
callback:function(id){
console.log(id,' rendered');
},
flowchart:{
useMaxWidth:false,
htmlLabels:true
},
logLevel:5
};
mermaid.initialize(config);
</script>
<script>
function coolAction(){
console.log('Got callback in user defined function');
}
</script>
<style>
.cluster {
fill: #fcac93;
rx:4px;
stroke: grey;
}
</style>
</head>
<body>
<h1>Issue 141!!!</h1>
<div style="width:200px">
<div class="mermaid" id="i141">
graph LR
%% Example diagram
A[Square Rect] -- Link text --> B((Circle));
A --> C(Round Rect)
A --> E(- Elipse -)
click A coolAction
B --> D{Rhombus}
C --> D
A("test(vcc) a a ") --> B
snda
</div>
</div>
<h1>Issue 140</h1>
<div class="mermaid" id="i140">
graph TB
subgraph old_sys_2
a2(new client)-->b2
oc2(Old client)-->b2
a3(test)-->b2
end
subgraph old_sys_1
a1(new client)-->b1(sys1 server)
oc1(Old client)-->b2(test)
end
</div> <h1>Issue 140</h1>
<div class="mermaid" id="i140">
graph LR
A-->B
B-->C
C-->A
D-->C
</div>
</div>
<div class="mermaid" id="ettan">
graph LR;
A[Now with default style on links]--v-->B{a = '1,2'}
B-->|v|C[v]
B-- ... default style on links -->Z[My default thing this]
C-->D{condition};
linkStyle 0 stroke-width:2px,fill:none,stroke:blue;
linkStyle default stroke-width:2px,fill:none,stroke:red;
</div>
<h1>Issue 2</h1>
<div class="mermaid">
graph LR
A[Square Rect] -- Link text --> B((Circle))
A[Square Rect]--v-->D((Circle))
A --> C(Round Rect)
B == testing ==> D{Rhombus}
C-.->D
</div>
<h1>Issue </h1>
<div class="mermaid">
graph TD
question1{Gas tank less than 1/8?}
action1[Fill tank to 100%]
question1-- Yes -->action1
</div>
<h1>Shapes</h1>
<div class="mermaid">
graph TD;
A[Default style on nodes]-->B;
A-->C;
A-->D;
B-->D;
A-->|Link text|B
classDef default fill:#f96,stroke:#333,stroke-width:2px;
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
class B green;
</div>
<h1>Sub graphs</h1>
<div class="mermaid">graph LR
subgraph old sys 1
a1(new client)-->b1(sys1 server)
oc1(Old client)-->b2
end
subgraph old sys 2
a2(new client)-->b2(sys2 server)
oc2(Old client)-->b2
end
subgraph old sys 3
a3(new client)-->b3(sys3 server)
end
subgraph New sys
a1
a2
a3
end
</div>
<div class="mermaid">graph TB
subgraph one
a1-->a2
end
</div>
<div class="mermaid">graph TB
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
c1-->a2
</div>
<div class="mermaid">
graph TB
subgraph Tjo
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)
di-->ro2(Rounded square shape)
end
%% Notice that no text in shape are added here instead that is appended further down
subgraph Go go
e --> od3>Really long text with linebreak<br>in an Odd shape]
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
cyr[Cyrillic]-->cyr2((Circle shape Начало))
end
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px,font-size:50%,font-style:bold;
class sq,e green
class di orange
</div>
<div class="mermaid">
graph TB
subgraph f
sq[Square shape]-->ci((Circle shape))
od>Odd shape]---|Two line<br>edge comment|ro
end
subgraph dfdg
od2>Really long text in an Odd shape]-->od3>Really long text with linebreak<br>in an Odd shape]
di{Diamond is broken}-->ro(Rounded squar shape)
di-->ro2(Rounded square shape)
end
</div>
<div class="mermaid">
graph LR;
A(Central Message Router);
B(R TD);
C(XYZ);
D(S Writer);
A-->|R TD Router|B;
B-->C;
C-->|XYZ Router|D;
</div>
<h1>Sequence diagrams </h1>
<div class="mermaid">
sequenceDiagram
participant Alice
Note left of Alice: Bob thinks about <br/> things <br/> to think about
</div>
<div class="mermaid">
sequenceDiagram
participant Alice
participant Bob
participant John
Alice->>Bob: Hello Bob, how are you?
Note left of Alice: Bob thinks about <br/> things <br/> to think about
Bob-->>Alice: I am good thanks!
loop Multiple status checks
Bob--xJohn: How about you John?
Note right of John: Bob thinks
end
Bob--xAlice: Checking with John...
Alice->John the Long: Yes... John, how are you?
John the Long-->Alice: Better then you!!
</div>
<div class="mermaid">
sequenceDiagram
loop Daily query
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
end
</div>
<div class="mermaid">
graph LR;
A[Start]-->B{a = '1,2'}
B-->|True|C[test = 1]
B-->|False|Z[Store]
C-->D{condition};
D-->|True|E[test = 2];
D-->|False|F[test = 3];
E-->G{condition2 = ''};
F-->G;
G-->|True|H[test = 4];
G-->|False|I[test = 5];
H-->J{condition3};
I-->J;
J-->|True|K[test = 6];
J-->|False|L;
K-->L[Print];
L-->M[Any Action];
M-->N[Any Other Action];
N-->Z;
linkStyle 11 stroke-width:2px,fill:none,stroke:red;
</div>
<h1>Dot syntax (experimental)</h1>
<pre>
digraph
{
a -> b -> c -- d -> e;
a -- e;
}
</pre>
<div class="mermaid">
digraph
{
a -> b -> c -- d -> e;
a -- e;
}
</div>
</body>
</html>

136
test/web_interpolate.html
View File

@ -1,136 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../dist/mermaid.forest.css"/>
<script src="../dist/mermaid.js"></script>
<script>
var config = {
startOnLoad:true,
callback:function(id){
console.log(id,' rendered');
},
flowchart:{
useMaxWidth:false,
htmlLabels:true
},
logLevel:5
};
mermaid.initialize(config);
</script>
</head>
<body>
<h1>Line Interpolation Linear (default)</h1>
<div class="mermaid" id="linear">
graph TB
A --> B
B --> C
C --> D
D --> A
</div>
<h1>Line Interpolation Basis</h1>
<div class="mermaid" id="basis">
graph TB
linkStyle default interpolate basis fill:none;
A --> B
B --> C
C --> D
D --> A
</div>
<h1>Line Interpolation Step-After</h1>
<div class="mermaid" id="step-after">
graph TB
linkStyle default interpolate step-after fill:none;
A --> B
B --> C
C --> D
D --> A
</div>
<h1>Hierarchy Using Defaults</h1>
<div class="mermaid" id="default-hier">
graph TB
A --> B
A --> C
A --> D
A --> E
B --> B1
B --> B2
</div>
<h1>Hierarchy Using step-after</h1>
<div class="mermaid" id="hierarchy">
graph TB
linkStyle default interpolate step-after fill:none;
A --> B
A --> C
A --> D
A --> E
B --> B1
B --> B2
</div>
<h1>LR Hierarchy Using step-before</h1>
<div>step-after works here too</div>
<div class="mermaid" id="hierarchy">
graph LR
linkStyle default interpolate step-before fill:none;
A --> B
A --> C
A --> D
A --> E
B --> B1
B --> B2
</div>
<h1>Line Interpolation Cardinal</h1>
<div class="mermaid" id="cardinal">
graph TB
linkStyle default interpolate cardinal fill:none;
A --> B
A --> C
A --> D
D --> A
</div>
<h1>Line Interpolation Monotone</h1>
<div>Monotone is monotonic in y, so it only looks good LR</div>
<div class="mermaid" id="monotone">
graph LR
linkStyle default interpolate monotone fill:none;
A --> B
B --> C
C --> D
D --> A
</div>
<h1>Mixing Line Interpolation Types</h1>
<div>Specify the link number; the link must be defined first</div>
<div class="mermaid" id="mixed">
graph TB
A -- basis --> B
A -- linear --> C
C -- step-after --> D
D -- cardinal --> A
linkStyle 0 interpolate basis fill:none;
linkStyle 1 interpolate linear fill:none;
linkStyle 2 interpolate step-after fill:none;
linkStyle 3 interpolate cardinal fill:none;
</div>
</body>
</html>

141
test/web_render.html
View File

@ -1,141 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../dist/mermaid.forest.css"/>
<scrpt src="../node_modules/d3/d3.js"></scrpt>
<script src="../dist/mermaid.js"></script>
<scrpt src="../dist/mermaid.full.js"></scrpt>
<style type="text/css">
html {
font-family: 'trebuchet ms', verdana, arial;
color: #333333;
}
</style>
<script>
//browserify --entry src/mermaid.js -u d3 -o ./dist/mermaid.brow.slim.js
var mermaid_config = {
startOnLoad:true
}
mermaid.ganttConfig = {
titleTopMargin:25,
barHeight:20,
barGap:4,
topPadding:50,
leftPadding:75,
gridLineStartPadding:35,
fontSize:11,
numberSectionStyles:3,
axisFormatter: [
// Within a day
["%I:%M", function (d) {
return d.getHours();
}],
// Monday a week
["w. %U", function (d) {
return d.getDay() == 1;
}],
// Day within a week (not monday)
["%a %d", function (d) {
return d.getDay() && d.getDate() != 1;
}],
// within a month
["%b %d", function (d) {
return d.getDate() != 1;
}],
// Month
["%m-%y", function (d) {
return d.getMonth();
}]
]
};
</script>
<script>
function apa(){
console.log('CLICKED');
}
</script>
<lnk rel="stylesheet" href="seq.css"/>
</head>
<body>
<div class="mermaid">
graph TB
subgraph LevelAB1s
subgraph LevelAB1C1
d1-->d2
end
subgraph X
x["nX"]-- "link" -->x2["nX2 您好"]
end
end
</div>
<div class="mermaid">graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end</div>
<div class="mermaid">
graph TB
subgraph A
subgraph AA
aa1 --> aa2
aa1 --> aa3
subgraph New top
nt1 --> nt2
nt1 --> nt3
end
end
subgraph AB
ab1 --> ab2
ab1 --> ab3
end
end
</div>
<div class="mermaid">
sequenceDiagram
A->> B: Query
B->> C: Forward query
Note right of C: Thinking...
C->> B: Response
B->> A: Forward response
</div>
<div class="mermaid">
graph TB
ab1 -- tjojho --> ab3
</div>
<div class="mermaid">
gantt
dateFormat yyyy-mm-dd
title Adding gantt diagram functionality to mermaid
section Design
Design jison grammar :des1, 2014-01-01, 2014-01-04
Create example text :des2, 2014-01-01, 3d
Bounce gantt example with users :des3, after des2, 5d
section Implementation
update build script :2014-01-02,1h
Implement parser and jison :after des1, 2d
Create tests for parser :3d
Create renderer :5d
Create tests for renderer :2d
Add to mermaid core :1d
section Documentation
Describe gantt syntax :a1, 2014-01-01, 3d
Add gantt diagram to demo page :after a1 , 2h
Add gantt to diagram to demo page :after a1 , 2h </div>
</body>
</html>

145
test/web_style.html
View File

@ -1,145 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../dist/mermaid.css"/>
<script src="../dist/mermaid.js"></script>
<script>
var mermaid_config = {
startOnLoad:true,
htmlLabels:false
}
</script>
<script>
function apa(){
console.log('CLICKED');
}
</script>
<style>
.node-square > rect {
stroke-width: 4px;
stroke: #339933;
fill: #999900;
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px; }
.node-circle > rect{ stroke-width: 0.5px; stroke: #339999; fill: #009900; }
.node-odd-override > polygon{ stroke-width: 3.5px; stroke: #339900; fill: #009999; }
.node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
</style>
</head>
<body>
<h1>Style</h1>
Styling is applied in the following order:
<ol>
<li>Node default style (see wiki)</li>
<li>CSS on the page</li>
<li>Class definitions inside the graph definition</li>
<li>Inline styling inside the graph definition</li>
</ol>
and the last styling applied is the resulting styling. For instance, "Class definitions inside the graph definition" overrides styling from "CSS on the page".
<h3>CSS in the page head:</h3>
<pre>
&lt;style&gt;
.node-square {
stroke-width: 4px;
stroke: #339933;
fill: #999900;
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px; }
.node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
.node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
.node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
&lt;/style&gt;
</pre>
<h3>Graph definition</h3>
<pre>
graph TD;
noc[No class&lt;br />using default];
cyr2((Class node-cyr-undefined&lt;br /&gt;is undefined, using default));
class cyr2 node-cyr-undefined;
ndef[Default style];
noc-->ndef;
cyr2-->ndef;
sq[Class node-square&lt;br /&gt;defined in page CSS];
class sq node-square;
ncss[Page CSS style];
sq--&gt;ncss;
cyr[Class node-cyr&lt;br /&gt;defined by classDef];
od2&gt;Class node-odd-override&lt;br /&gt;defined in page CSS&lt;br /&gt;and defined by classDef];
ncdef[classDef style];
od2-->ncdef;
cyr-->ncdef;
class cyr node-cyr;
class od2 node-odd-override;
classDef node-odd-override fill:#BB00BB,stroke:#666622;
classDef node-cyr fill:#BB0099,stroke:#666622;
e1[Class node-cyr&lt;br /&gt;defined by classDef&lt;br /&gt;and inline style];
class e1 node-e1;
style e1 fill:#FF0000;
e2&gt;Class node-odd-override&lt;br /&gt;defined in page CSS&lt;br /&gt;and defined by classDef&lt;br /&gt;and inline style];
class e2 node-e2;
style e2 fill:#FF0000;
e((Inline style in&lt;br /&gt;graph definition));
style e fill:#FF0000;
ninl[Inline style];
e-->ninl;
e1-->ninl;
e2-->ninl;
classDef node-e1 fill:#990066,stroke:#666622
classDef node-e2 fill:#990066,stroke:#666622
</pre>
<div class="mermaid">
graph TD;
noc[No class<br />using default];
cyr2((Class node-cyr-undefined<br />is undefined, using default));
class cyr2 node-cyr-undefined;
ndef[Default style];
noc-->ndef;
cyr2-->ndef;
sq[Class node-square<br />defined in page CSS];
class sq node-square;
ncss[Page CSS style];
sq-->ncss;
cyr[Class node-cyr<br />defined by classDef];
od2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef];
ncdef[classDef style];
od2-->|Simple edge label|ncdef;
cyr-->|Complex<br>multiline<br>edge label|ncdef;
class cyr node-cyr;
class od2 node-odd-override;
classDef node-odd-override fill:#BB00BB,stroke:#666622
classDef node-cyr fill:#BB0099,stroke:#666622
e1[Class node-cyr<br />defined by classDef<br />and inline style];
class e1 node-e1;
style e1 fill:#FF0000
e2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef<br />and inline style];
class e2 node-e2;
style e2 fill:#FF0000
e((Inline style in<br />graph definition));
style e fill:#FF0000
ninl[Inline style];
e-->ninl;
e1-->ninl;
e2-->ninl;
classDef node-e1 fill:#990066,stroke:#666622
classDef node-e2 fill:#990066,stroke:#666622
</div>
</body>
</html>

12
test/web_style.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

147
test/web_style_dagre.html
View File

@ -1,147 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../dist/d3.min.js"></script>
<script src="../../bjowes-dagre-d3/build/dagre-d3.js"></script>
<script src="../dist/mermaid.slim.js"></script> -
<!-- <script src="../dist/mermaid.full.min.js"></script> -->
<script>
var mermaid_config = {
startOnLoad:true
}
</script>
<script>
function apa(){
console.log('CLICKED');
}
</script>
<style>
.node-square {
stroke-width: 4px;
stroke: #339933;
fill: #999900;
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px; }
.node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
.node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
.node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
</style>
</head>
<body>
<h1>Style</h1>
Styling is applied in the following order:
<ol>
<li>Node default style (see wiki)</li>
<li>CSS on the page</li>
<li>Class definitions inside the graph definition</li>
<li>Inline styling inside the graph definition</li>
</ol>
and the last styling applied is the resulting styling. For instance, "Class definitions inside the graph definition" overrides styling from "CSS on the page".
<h3>CSS in the page head:</h3>
<pre>
&lt;style&gt;
.node-square {
stroke-width: 4px;
stroke: #339933;
fill: #999900;
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px; }
.node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
.node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
.node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
&lt;/style&gt;
</pre>
<h3>Graph definition</h3>
<pre>
graph TD;
noc[No class&lt;br />using default];
cyr2((Class node-cyr-undefined&lt;br /&gt;is undefined, using default));
class cyr2 node-cyr-undefined;
ndef[Default style];
noc-->ndef;
cyr2-->ndef;
sq[Class node-square&lt;br /&gt;defined in page CSS];
class sq node-square;
ncss[Page CSS style];
sq--&gt;ncss;
cyr[Class node-cyr&lt;br /&gt;defined by classDef];
od2&gt;Class node-odd-override&lt;br /&gt;defined in page CSS&lt;br /&gt;and defined by classDef];
ncdef[classDef style];
od2-->ncdef;
cyr-->ncdef;
class cyr node-cyr;
class od2 node-odd-override;
classDef node-odd-override fill:#BB00BB,stroke:#666622;
classDef node-cyr fill:#BB0099,stroke:#666622;
e1[Class node-cyr&lt;br /&gt;defined by classDef&lt;br /&gt;and inline style];
class e1 node-e1;
style e1 fill:#FF0000;
e2&gt;Class node-odd-override&lt;br /&gt;defined in page CSS&lt;br /&gt;and defined by classDef&lt;br /&gt;and inline style];
class e2 node-e2;
style e2 fill:#FF0000;
e((Inline style in&lt;br /&gt;graph definition));
style e fill:#FF0000;
ninl[Inline style];
e-->ninl;
e1-->ninl;
e2-->ninl;
classDef node-e1 fill:#990066,stroke:#666622;
classDef node-e2 fill:#990066,stroke:#666622;
</pre>
<div class="mermaid">
graph TD;
noc[No class<br />using default];
cyr2((Class node-cyr-undefined<br />is undefined, using default));
class cyr2 node-cyr-undefined;
ndef[Default style];
noc-->ndef;
cyr2-->ndef;
sq[Class node-square<br />defined in page CSS];
class sq node-square;
ncss[Page CSS style];
sq-->ncss;
cyr[Class node-cyr<br />defined by classDef];
od2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef];
ncdef[classDef style];
od2-->|Simple edge label|ncdef;
cyr-->|Complex<br>multiline<br>edge label|ncdef;
class cyr node-cyr;
class od2 node-odd-override;
classDef node-odd-override fill:#BB00BB,stroke:#666622;
classDef node-cyr fill:#BB0099,stroke:#666622;
e1[Class node-cyr<br />defined by classDef<br />and inline style];
class e1 node-e1;
style e1 fill:#FF0000;
e2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef<br />and inline style];
class e2 node-e2;
style e2 fill:#FF0000;
e((Inline style in<br />graph definition));
style e fill:#FF0000;
ninl[Inline style];
e-->ninl;
e1-->ninl;
e2-->ninl;
classDef node-e1 fill:#990066,stroke:#666622;
classDef node-e2 fill:#990066,stroke:#666622;
</div>
</body>
</html>

145
test/web_style_html_label.html
View File

@ -1,145 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../dist/mermaid.js"></script>
<script>
var mermaid_config = {
startOnLoad:true,
labelStyle:'hmtl'
}
</script>
<script>
function apa(){
console.log('CLICKED');
}
</script>
<style>
.node-square {
stroke-width: 4px;
stroke: #339933;
fill: #999900;
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px; }
.node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
.node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
.node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
</style>
</head>
<body>
<h1>Style</h1>
Styling is applied in the following order:
<ol>
<li>Node default style (see wiki)</li>
<li>CSS on the page</li>
<li>Class definitions inside the graph definition</li>
<li>Inline styling inside the graph definition</li>
</ol>
and the last styling applied is the resulting styling. For instance, "Class definitions inside the graph definition" overrides styling from "CSS on the page".
<h3>CSS in the page head:</h3>
<pre>
&lt;style&gt;
.node-square {
stroke-width: 4px;
stroke: #339933;
fill: #999900;
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px; }
.node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
.node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
.node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
&lt;/style&gt;
</pre>
<h3>Graph definition</h3>
<pre>
graph TD;
noc[No class&lt;br />using default];
cyr2((Class node-cyr-undefined&lt;br /&gt;is undefined, using default));
class cyr2 node-cyr-undefined;
ndef[Default style];
noc-->ndef;
cyr2-->ndef;
sq[Class node-square&lt;br /&gt;defined in page CSS];
class sq node-square;
ncss[Page CSS style];
sq--&gt;ncss;
cyr[Class node-cyr&lt;br /&gt;defined by classDef];
od2&gt;Class node-odd-override&lt;br /&gt;defined in page CSS&lt;br /&gt;and defined by classDef];
ncdef[classDef style];
od2-->ncdef;
cyr-->ncdef;
class cyr node-cyr;
class od2 node-odd-override;
classDef node-odd-override fill:#BB00BB,stroke:#666622;
classDef node-cyr fill:#BB0099,stroke:#666622;
e1[Class node-cyr&lt;br /&gt;defined by classDef&lt;br /&gt;and inline style];
class e1 node-e1;
style e1 fill:#FF0000;
e2&gt;Class node-odd-override&lt;br /&gt;defined in page CSS&lt;br /&gt;and defined by classDef&lt;br /&gt;and inline style];
class e2 node-e2;
style e2 fill:#FF0000;
e((Inline style in&lt;br /&gt;graph definition));
style e fill:#FF0000;
ninl[Inline style];
e-->ninl;
e1-->ninl;
e2-->ninl;
classDef node-e1 fill:#990066,stroke:#666622;
classDef node-e2 fill:#990066,stroke:#666622;
</pre>
<div class="mermaid">
graph TD;
noc[No class<br />using default];
cyr2((Class node-cyr-undefined<br />is undefined, using default));
class cyr2 node-cyr-undefined;
ndef[Default style];
noc-->ndef;
cyr2-->ndef;
sq[Class node-square<br />defined in page CSS];
class sq node-square;
ncss[Page CSS style];
sq-->ncss;
cyr[Class node-cyr<br />defined by classDef];
od2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef];
ncdef[classDef style];
od2-->|Simple edge label|ncdef;
cyr-->|Complex<br>multiline<br>edge label|ncdef;
class cyr node-cyr;
class od2 node-odd-override;
classDef node-odd-override fill:#BB00BB,stroke:#666622;
classDef node-cyr fill:#BB0099,stroke:#666622;
e1[Class node-cyr<br />defined by classDef<br />and inline style];
class e1 node-e1;
style e1 fill:#FF0000;
e2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef<br />and inline style];
class e2 node-e2;
style e2 fill:#FF0000;
e((Inline style in<br />graph definition));
style e fill:#FF0000;
ninl[Inline style];
e-->ninl;
e1-->ninl;
e2-->ninl;
classDef node-e1 fill:#990066,stroke:#666622;
classDef node-e2 fill:#990066,stroke:#666622;
</div>
</body>
</html>

15
todo.md
View File

@ -5,21 +5,18 @@
- Make node console output colors like Chrome console
- What's the correct way to change logLevel as an end user?
- mermaid.initialize({ logLevel: 1 })
- Replace CodeClimate with coveralls
- Replace CodeClimate with coveralls ?
- Get familar with jison
- git graph requires a blank line at the end. why?
- Move cli to mermaid-cli project ?
- think about it
- Remove 'lodash' as dependency
- https://github.com/lodash/babel-plugin-lodash
- https://www.npmjs.com/package/lodash-webpack-plugin
- Replace var with const/let
- Stops working for mermaid-live-editor since 7.0.9
- global.mermaid_config
- rewrite logger
- rewrite less code
- Don't generate temp_* folders in test/ folder
- Generate them into system temp folder instead
- Replace phantomjs with Chrome headless
- `yarn jest` is disabled
- Travis build failed
- d3 is possible to work with jsdom only.
- need to mock window size
- so mermaid could work without a browser at all
- But how to mesure font size? it's a problem.
- Setup code coverage

945
yarn.lock
View File

File diff suppressed because it is too large Load Diff