forkless/mermaid-live-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:mermaid-js/mermaid-live-editor

Browse Source 
# Conflicts:
#	docs/bundle.js
#	package.json
#	yarn.lock
This commit is contained in:
Knut Sveidqvist
2020-02-16 14:30:02 +01:00
parent f9df44b744 ccf12b422f
commit 8425dd040b
7 changed files with 178 additions and 719 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Dockerfile
+18
View File
@@ -0,0 +1,18 @@
# Two-stage docker container for mermaid-js/mermaid-live-editor
# Build : docker build -t mermaid-js/mermaid-live-editor .
# Run : docker run --name mermaid-live-editor --publish 8080:80 mermaid-js/mermaid-live-editor
# Start : docker start mermaid-live-editor
# Use webbrowser : http://localhost:8080
# Stop : press ctrl + c
# or
# docker stop mermaid-live-editor
FROM node:13.6.0-alpine as mermaid-live-editor-builder
COPY --chown=node:node . /home
WORKDIR /home
RUN yarn install
RUN yarn build
FROM nginx:alpine as mermaid-live-editor-runner
COPY --from=mermaid-live-editor-builder --chown=nginx:nginx /home/docs /usr/share/nginx/html
docs/bundle.css
+9 -9
View File
@@ -1,4 +1,4 @@
#error.svelte-ardmue{background:darkred;color:white;flex:1;padding:10px}.invisible.svelte-ardmue{display:none}.visible.svelte-ardmue{display:block}
#error.svelte-1evofcp{background:darkred;color:white;flex:1;padding:10px}.invisible.svelte-1evofcp{display:none}.visible.svelte-1evofcp{display:block}
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
@@ -2471,11 +2471,11 @@
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0nMS4wJyBzdGFuZGFsb25lPSdubycgPz4KPHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249JzEuMScgd2lkdGg9JzEwcHgnIGhlaWdodD0nMTBweCc+Cgk8c3R5bGU+CiAgICBjaXJjbGUgewogICAgICBhbmltYXRpb246IGJhbGwgMC42cyBsaW5lYXIgaW5maW5pdGU7CiAgICB9CgogICAgY2lyY2xlOm50aC1jaGlsZCgyKSB7IGFuaW1hdGlvbi1kZWxheTogMC4wNzVzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDMpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjE1czsgfQogICAgY2lyY2xlOm50aC1jaGlsZCg0KSB7IGFuaW1hdGlvbi1kZWxheTogMC4yMjVzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDUpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjNzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDYpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjM3NXM7IH0KICAgIGNpcmNsZTpudGgtY2hpbGQoNykgeyBhbmltYXRpb24tZGVsYXk6IDAuNDVzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDgpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjUyNXM7IH0KCiAgICBAa2V5ZnJhbWVzIGJhbGwgewogICAgICBmcm9tIHsgb3BhY2l0eTogMTsgfQogICAgICB0byB7IG9wYWNpdHk6IDAuMzsgfQogICAgfQoJPC9zdHlsZT4KCTxnIHN0eWxlPSJmaWxsOndoaXRlOyI+CgkJPGNpcmNsZSBjeD0nNScgY3k9JzEnIHI9JzEnIHN0eWxlPSdvcGFjaXR5OjAuMzsnIC8+CgkJPGNpcmNsZSBjeD0nNy44Mjg0JyBjeT0nMi4xNzE2JyByPScxJyBzdHlsZT0nb3BhY2l0eTowLjM7JyAvPgoJCTxjaXJjbGUgY3g9JzknIGN5PSc1JyByPScxJyBzdHlsZT0nb3BhY2l0eTowLjM7JyAvPgoJCTxjaXJjbGUgY3g9JzcuODI4NCcgY3k9JzcuODI4NCcgcj0nMScgc3R5bGU9J29wYWNpdHk6MC4zOycgLz4KCQk8Y2lyY2xlIGN4PSc1JyBjeT0nOScgcj0nMScgc3R5bGU9J29wYWNpdHk6MC4zOycgLz4KCQk8Y2lyY2xlIGN4PScyLjE3MTYnIGN5PSc3LjgyODQnIHI9JzEnIHN0eWxlPSdvcGFjaXR5OjAuMzsnIC8+CgkJPGNpcmNsZSBjeD0nMScgY3k9JzUnIHI9JzEnIHN0eWxlPSdvcGFjaXR5OjAuMzsnIC8+CgkJPGNpcmNsZSBjeD0nMi4xNzE2JyBjeT0nMi4xNzE2JyByPScxJyBzdHlsZT0nb3BhY2l0eTowLjM7JyAvPgoJPC9nPgo8L3N2Zz4K");
}
#editor.svelte-19z36gs{width:100%;height:400px;max-height:300px;flex:1}
#editor-conf.svelte-1hwndan{width:100%;height:200px;max-height:300px;flex:1}
#view.svelte-de7j0c{border:1px solor darkred;flex:1}#container.svelte-de7j0c{overflow-x:auto}.error.svelte-de7j0c{opacity:0.5}
#card.svelte-94c5zs{border:1px solid lightgray;margin-bottom:16px}#title.svelte-94c5zs{border-bottom:1px solid lightgray}#content.svelte-94c5zs{padding-top:16px}.padding.svelte-94c5zs{padding:16px}
#tag.svelte-kzz8td{height:auto;margin:0 8px 0 0;padding:0 7px;font-size:12px;line-height:20px;white-space:nowrap;border:1px solid #d9d9d9;border-radius:4px;cursor:default;font-size:smaller;color:#52c41a;background:#f6ffed;border-color:#b7eb8f;margin-left:8px}
#markdown.svelte-13581ad{padding:7px;font-family:monospace;font-size:14px;width:300px}label[for="markdown"].svelte-13581ad{cursor:pointer;color:-webkit-link;color:-moz-link;color:blue;text-decoration:underline}
#editor-root.svelte-f0aro2{display:flex;height:100%}#col1.svelte-f0aro2{width:35%}#col2.svelte-f0aro2{width:65%;padding-left:32px}#app-title.svelte-f0aro2{border-bottom:1px solid lightgrey;padding-bottom:32px;margin-bottom:32px;font-size:28px;font-weight:400;margin-top:0}#power.svelte-f0aro2{width:100%;display:flex;justify-content:flex-end;align-items:center}
#view-page.svelte-ylwsal{display:flex;height:100%}
#editor.svelte-1lbcct2{width:100%;height:400px;max-height:300px;flex:1}
#editor-conf.svelte-3di0d{width:100%;height:200px;max-height:300px;flex:1}
#view.svelte-nwygdn{border:1px solor darkred;flex:1}#container.svelte-nwygdn{overflow-x:auto}.error.svelte-nwygdn{opacity:0.5}
#card.svelte-53tgu4{border:1px solid lightgray;margin-bottom:16px}#title.svelte-53tgu4{border-bottom:1px solid lightgray}#content.svelte-53tgu4{padding-top:16px}.padding.svelte-53tgu4{padding:16px}
#tag.svelte-yy7yhp{height:auto;margin:0 8px 0 0;padding:0 7px;font-size:12px;line-height:20px;white-space:nowrap;border:1px solid #d9d9d9;border-radius:4px;cursor:default;font-size:smaller;color:#52c41a;background:#f6ffed;border-color:#b7eb8f;margin-left:8px}
#markdown.svelte-1n55d57{padding:7px;font-family:monospace;font-size:14px;width:300px}label[for="markdown"].svelte-1n55d57{cursor:pointer;color:-webkit-link;color:-moz-link;color:blue;text-decoration:underline}
#editor-root.svelte-1c0r4vm{display:flex;height:100%}#col1.svelte-1c0r4vm{width:35%}#col2.svelte-1c0r4vm{width:65%;padding-left:32px}#app-title.svelte-1c0r4vm{border-bottom:1px solid lightgrey;padding-bottom:32px;margin-bottom:32px;font-size:28px;font-weight:400;margin-top:0}#power.svelte-1c0r4vm{width:100%;display:flex;justify-content:flex-end;align-items:center}#sampleLoader.svelte-1c0r4vm{padding-bottom:10px;padding-left:10px}.botton-container.svelte-1c0r4vm{margin-top:5px}
#view-page.svelte-ecjdrm{display:flex;height:100%}
docs/bundle.js
+13 -17
View File
File diff suppressed because one or more lines are too long
src/components/Editor.svelte
+5 -4
View File
@@ -23,7 +23,7 @@ let editorElem = null;
const handleCodeUpdate = code => {
try {
mermaid.parse(code);
let newState = { code, mermaid: conf };
let newState = { code, mermaid: conf, updateEditor: false };
updateCodeStore(newState);
decArr.forEach(decor => {
edit.deltaDecorations(decor, []);
@@ -47,7 +47,6 @@ const handleCodeUpdate = code => {
const unsubscribe = codeStore.subscribe( state => {
if(editorElem === null) {
console.log('Starting stuff', document.getElementById('editor'));
editorElem = document.getElementById('editor');
}
if(!code && state) {
@@ -57,7 +56,6 @@ const unsubscribe = codeStore.subscribe( state => {
conf = state.mermaid;
}
if(!edit && code && (editorElem !== null)) {
console.log('creatinf editor');
edit = monaco.editor.create(editorElem, {
value: [
code,
@@ -73,6 +71,10 @@ const unsubscribe = codeStore.subscribe( state => {
});
handleCodeUpdate(code);
}
if(state && state.updateEditor && edit && code && (editorElem !== null)) {
edit.setValue(state.code);
handleCodeUpdate(state.code);
}
});
const unsubscribeError = codeErrorStore.subscribe( _error => {
@@ -86,7 +88,6 @@ const unsubscribeError = codeErrorStore.subscribe( _error => {
initEditor(monaco);
onMount(async () => {
console.log('Mounting editor');
// editorElem = document.querySelector('#editor')
self.MonacoEnvironment = {
getWorkerUrl: function (moduleId, label) {
src/routes/Edit.svelte
+128 -1
View File
@@ -1,5 +1,6 @@
<script>
import { onMount } from 'svelte';
import { updateCodeStore } from '../code-store.js';
import Editor from '../components/Editor.svelte';
import Config from '../components/Config.svelte';
import View from '../components/View.svelte';
@@ -26,6 +27,111 @@ onMount(async () => {
// export let expected = '';
export let params = {};
function loadFlowChart(){
loadSampleDiagram('FlowChart');
}
function loadSequenceDiagram(){
loadSampleDiagram('SequenceDiagram');
}
function loadClassDiagram(){
loadSampleDiagram('ClassDiagram');
}
function loadStateDiagram(){
loadSampleDiagram('StateDiagram');
}
function loadGanttChart(){
loadSampleDiagram('GanttChart');
}
function loadPieChart(){
loadSampleDiagram('PieChart');
}
function loadSampleDiagram(diagramType){
let code =''
switch(diagramType){
case 'FlowChart' :
code = `graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`;
break;
case 'SequenceDiagram' :
code = `sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
`;
break;
case 'ClassDiagram' :
code = `classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
`;
break;
case 'StateDiagram' :
code = `stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
`;
break;
case 'GanttChart' :
code = `gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
`;
break;
case 'PieChart' :
code = `pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
`;
break;
}
let newState = { code, mermaid: { theme: 'default' }, updateEditor:true };
updateCodeStore(newState);
}
</script>
<style>
@@ -57,12 +163,33 @@ onMount(async () => {
align-items: center;
}
#sampleLoader {
padding-bottom: 10px;
padding-left:10px;
}
.botton-container{
margin-top:5px;
}
</style>
<div>
<h1 id="app-title">Mermaid Live Editor</h1>
<div id="editor-root">
<div id="col1">
<Card title="Code" noPadding="true"><Editor data={params.data}/></Card>
<Card title="Code" noPadding="true">
<div id="sampleLoader">Load sample diagram :<br/>
<div class="botton-container">
<button on:click={loadFlowChart}>Flow Chart</button>
<button on:click={loadSequenceDiagram}>Sequence Diagram</button>
<button on:click={loadClassDiagram}>Class Diagram</button>
<button on:click={loadStateDiagram}>State Diagram</button>
<button on:click={loadGanttChart}>Gantt Chart</button>
<button on:click={loadPieChart}>Pie Chart </button>
</div>
</div>
<Editor data={params.data}/>
</Card>
<Card title="Mermaid Configuration" ><Config /></Card>
<Card title='Links'>
<ul className='marketing-links'>
webpack.config.js
+2 -2
View File
@@ -11,8 +11,8 @@ module.exports = {
resolve: {
alias: {
svelte: path.resolve('node_modules', 'svelte'),
"@mermaid": 'mermaid'
// "@mermaid": '@mermaid-js/mermaid'
"@mermaid": 'mermaid'
//"@mermaid": '@mermaid-js/mermaid'
},
extensions: ['.mjs', '.js', '.svelte'],
mainFields: ['svelte', 'browser', 'module', 'main']
yarn.lock
+3 -686
View File
File diff suppressed because it is too large Load Diff