marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-26 19:56:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

Adding some test pages

Browse Source
This commit is contained in:
Knut Sveidqvist
2019-08-20 20:07:12 +02:00
parent 980749536b
commit a3142aad69
8 changed files with 100 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored
View File

@@ -3,5 +3,6 @@
"typescript.reportStyleChecksAsWarnings": false, "typescript.reportStyleChecksAsWarnings": false,
"typescript.validate.enable": false, "typescript.validate.enable": false,
"javascript.validate.enable": false, "javascript.validate.enable": false,
"editor.formatOnSave": false "editor.formatOnSave": false,
"standard.enable": true
} }

5
dist/index.html vendored
View File

@@ -13,6 +13,9 @@
</style> </style>
</head> </head>
<body> <body>
<div class="mermaid">
info
</div>
<div class="mermaid"> <div class="mermaid">
gantt gantt
title Exclusive end dates (Manual date should end on 3d) title Exclusive end dates (Manual date should end on 3d)
@@ -415,7 +418,7 @@ Class08 <--> C2: Cool label
theme: 'forest', theme: 'forest',
// themeCSS: '.node rect { fill: red; }', // themeCSS: '.node rect { fill: red; }',
logLevel: 3, logLevel: 3,
flowchart: { curve: 'linear' }, flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' }, gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 }, sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated // sequenceDiagram: { actorMargin: 300 } // deprecated

4
docs/index.html
View File

@@ -7,8 +7,8 @@
<meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs."> <meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
<script src="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <!-- <script src="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> -->
<!-- <script src="//localhost:9000/mermaid.js"></script> --> <script src="//localhost:9000/mermaid.js"></script>
<style> <style>
.markdown-section { .markdown-section {
max-width: 1200px; max-width: 1200px;

2
docs/mermaidAPI.md
View File

@@ -69,7 +69,7 @@ on the edges.
### curve ### curve
**Default value linear**. How mermaid renders curves for flowcharts. Possibel values are basis, linear and cardinal. **Default value linear**.
## sequence ## sequence

62
e2e/platform/click.html
View File

@@ -9,13 +9,67 @@
<body> <body>
<div id="FirstLine" class="mermaid"> <div id="FirstLine" class="mermaid">
graph TB graph TB
FullFirstSquad-->StripedFirstSquad Function-->URL
click FullFirstSquad showFullFirstSquad "show <strong>details</strong>" click Function clickByFlow "Add a div"
click URL "https://mermaidjs.github.io/" "Visit <strong>mermaid docs</strong>"
</div> </div>
<div class="mermaid">
gantt
dateFormat YYYY-MM-DD
axisFormat %d/%m
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
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 Clickable
Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10
Calling a Callback (look at the console log) :cl2, after cl1, 3d
click cl1 href "https://mermaidjs.github.io/"
click cl2 call clickByGantt("test", test, test)
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h
</div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
function showFullFirstSquad(elemName) { function clickByFlow(elemName) {
console.log('show ' + elemName); const div = document.createElement('div')
div.className = 'created-by-click'
div.style = 'padding: 20px; background: green; color: white;'
div.innerText = 'Clicked By Flow'
document.getElementsByTagName('body')[0].appendChild(div)
}
function clickByGantt(elemName) {
const div = document.createElement('div')
div.className = 'created-by-gant-click'
div.style = 'padding: 20px; background: green; color: white;'
div.innerText = 'Clicked By Gant'
document.getElementsByTagName('body')[0].appendChild(div)
} }
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 }); mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
</script> </script>

26
e2e/platform/info.html Normal file
View File

@@ -0,0 +1,26 @@
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
/>
</head>
<body>
<h1>info below</h1>
<div class="mermaid">info</div>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
flowchart: { curve: 'linear' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
</script>
</body>
</html>

5
e2e/platform/viewer.js
View File

@@ -1,5 +1,5 @@
import { Base64 } from 'js-base64' import { Base64 } from 'js-base64'
import mermaid from '../../dist/mermaid.core' import mermaid2 from '../../src/mermaid'
/** /**
* ##contentLoaded * ##contentLoaded
@@ -37,9 +37,8 @@ const contentLoadedApi = function () {
// div.innerHTML = graphObj.code // div.innerHTML = graphObj.code
document.getElementsByTagName('body')[0].appendChild(div) document.getElementsByTagName('body')[0].appendChild(div)
global.mermaid.initialize(graphObj.mermaid) global.mermaid.initialize(graphObj.mermaid)
console.log('apa')
mermaid.render('newid', graphObj.code, (svgCode, bindFunctions) => { mermaid2.render('newid', graphObj.code, (svgCode, bindFunctions) => {
div.innerHTML = svgCode div.innerHTML = svgCode
bindFunctions(div) bindFunctions(div)

4
src/mermaidAPI.js
View File

@@ -105,7 +105,7 @@ const config = {
htmlLabels: true, htmlLabels: true,
/** /**
* **Default value linear**. * How mermaid renders curves for flowcharts. Possibel values are basis, linear and cardinal. **Default value linear**.
*/ */
curve: 'linear' curve: 'linear'
}, },
@@ -301,6 +301,8 @@ function parse (text) {
break break
case 'info': case 'info':
logger.debug('info info info') logger.debug('info info info')
console.warn('In API', pkg.version)
parser = infoParser parser = infoParser
parser.parser.yy = infoDb parser.parser.yy = infoDb
break break