Merge branch 'designUpdates' of git://github.com/nazmulshuvo03/mermaid-live-editor into nazmulshuvo03-designUpdates
This commit is contained in:
Knut Sveidqvist
+22
-15
@@ -1,25 +1,32 @@
|
||||
<script>
|
||||
import Router from 'svelte-spa-router'
|
||||
// Used for SSR. A falsy value is ignored by the Router.
|
||||
import Edit from './routes/Edit.svelte'
|
||||
import View from './routes/View.svelte'
|
||||
import Router from "svelte-spa-router";
|
||||
// Used for SSR. A falsy value is ignored by the Router.
|
||||
import Edit from "./routes/Edit.svelte";
|
||||
import View from "./routes/View.svelte";
|
||||
|
||||
const routes = {
|
||||
// Exact path
|
||||
'/': Edit,
|
||||
// Exact path
|
||||
"/": Edit,
|
||||
|
||||
// Using named parameters, with last being optional
|
||||
'/edit/:data': Edit,
|
||||
// Using named parameters, with last being optional
|
||||
"/edit/:data": Edit,
|
||||
|
||||
// Wildcard parameter
|
||||
'/view/:data': View,
|
||||
// Wildcard parameter
|
||||
"/view/:data": View,
|
||||
|
||||
// Catch-all
|
||||
// This is optional, but if present it must be the last
|
||||
'*': Edit,
|
||||
}
|
||||
// Catch-all
|
||||
// This is optional, but if present it must be the last
|
||||
"*": Edit,
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<Router {routes}/>
|
||||
|
||||
<svelte:head>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
|
||||
rel="stylesheet" />
|
||||
</svelte:head>
|
||||
<Router {routes} />
|
||||
|
||||
+29
-24
@@ -1,31 +1,36 @@
|
||||
<script>
|
||||
export let title = '';
|
||||
export let noPadding = false;
|
||||
let contentClass = 'padding';
|
||||
if (noPadding) {
|
||||
contentClass = '';
|
||||
}
|
||||
export let title = "";
|
||||
export let noPadding = false;
|
||||
let contentClass = "padding";
|
||||
if (noPadding) {
|
||||
contentClass = "";
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#card {
|
||||
border: 1px solid lightgray;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
#title {
|
||||
border-bottom: 1px solid lightgray;
|
||||
}
|
||||
#content {
|
||||
padding-top: 16px;
|
||||
}
|
||||
.padding {
|
||||
padding: 16px;
|
||||
}
|
||||
#card {
|
||||
border: 1px solid lightgray;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
#title {
|
||||
font-family: "Playfair Display", serif;
|
||||
font-weight: 400;
|
||||
border-bottom: 1px solid lightgray;
|
||||
font-size: 1.25rem;
|
||||
background-color: #1e60ab;
|
||||
color: #eaebef;
|
||||
}
|
||||
#content {
|
||||
padding-top: 16px;
|
||||
}
|
||||
.padding {
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="card">
|
||||
<div id="title" class="padding">{title}</div>
|
||||
<div id="content" class="{contentClass}">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div id="title" class="padding">{title}</div>
|
||||
<div id="content" class={contentClass}>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+121
-76
@@ -1,13 +1,12 @@
|
||||
<script>
|
||||
import { codeErrorStore } from '../code-error-store.js';
|
||||
import {link} from 'svelte-spa-router';
|
||||
import { Base64 } from 'js-base64'
|
||||
import { onMount } from 'svelte';
|
||||
import moment from 'moment';
|
||||
import { codeStore } from '../code-store.js';
|
||||
import { codeErrorStore } from "../code-error-store.js";
|
||||
import { link } from "svelte-spa-router";
|
||||
import { Base64 } from "js-base64";
|
||||
import { onMount } from "svelte";
|
||||
import moment from "moment";
|
||||
import { codeStore } from "../code-store.js";
|
||||
|
||||
onMount(async () => {
|
||||
});
|
||||
onMount(async () => {});
|
||||
|
||||
export const onDownloadPNG = event => {
|
||||
var canvas = document.createElement('canvas');
|
||||
@@ -33,35 +32,41 @@ export const onDownloadPNG = event => {
|
||||
image.onload = function () {
|
||||
context.drawImage(image, 0, 0, canvas.width, canvas.height);
|
||||
|
||||
var a = document.createElement('a')
|
||||
a.download = `mermaid-diagram-${moment().format('YYYYMMDDHHmmss')}.png`;
|
||||
a.href = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
|
||||
a.click();
|
||||
}
|
||||
var a = document.createElement("a");
|
||||
a.download = `mermaid-diagram-${moment().format(
|
||||
"YYYYMMDDHHmmss"
|
||||
)}.png`;
|
||||
a.href = canvas
|
||||
.toDataURL("image/png")
|
||||
.replace("image/png", "image/octet-stream");
|
||||
a.click();
|
||||
};
|
||||
|
||||
console.warn('SVG', container.innerHTML);
|
||||
image.src = `data:image/svg+xml;base64,${Base64.encode(container.innerHTML)}`;
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
event.target.download = `mermaid-diagram-${moment().format(
|
||||
'YYYYMMDDHHmmss'
|
||||
)}.png`;
|
||||
};
|
||||
export const onDownloadSVG = event => {
|
||||
console.log('event', event.target);
|
||||
const container = document.getElementById('container');
|
||||
event.target.href = `data:image/svg+xml;base64,${Base64.encode(
|
||||
container.innerHTML
|
||||
)}`
|
||||
event.target.download = `mermaid-diagram-${moment().format(
|
||||
'YYYYMMDDHHmmss'
|
||||
)}.svg`
|
||||
console.log('event', event);
|
||||
};
|
||||
export const onCopyMarkdown = event => {
|
||||
event.target.select();
|
||||
document.execCommand('Copy');
|
||||
}
|
||||
console.warn("SVG", container.innerHTML);
|
||||
image.src = `data:image/svg+xml;base64,${Base64.encode(
|
||||
container.innerHTML
|
||||
)}`;
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
event.target.download = `mermaid-diagram-${moment().format(
|
||||
"YYYYMMDDHHmmss"
|
||||
)}.png`;
|
||||
};
|
||||
export const onDownloadSVG = (event) => {
|
||||
console.log("event", event.target);
|
||||
const container = document.getElementById("container");
|
||||
event.target.href = `data:image/svg+xml;base64,${Base64.encode(
|
||||
container.innerHTML
|
||||
)}`;
|
||||
event.target.download = `mermaid-diagram-${moment().format(
|
||||
"YYYYMMDDHHmmss"
|
||||
)}.svg`;
|
||||
console.log("event", event);
|
||||
};
|
||||
export const onCopyMarkdown = (event) => {
|
||||
event.target.select();
|
||||
document.execCommand("Copy");
|
||||
};
|
||||
|
||||
let url = '/mermaid-live-editor/#/view';
|
||||
let b64Code;
|
||||
@@ -72,52 +77,92 @@ let imagemodeselected = "auto";
|
||||
let userimagewidth = 1920;
|
||||
let userimageheight = 1080;
|
||||
|
||||
const unsubscribe = codeStore.subscribe(state => {
|
||||
b64Code = Base64.encodeURI(JSON.stringify(state));
|
||||
url = `/mermaid-live-editor/#/view/${b64Code}`;
|
||||
iUrl = `https://mermaid.ink/img/${b64Code}`;
|
||||
svgUrl = `https://mermaid.ink/svg/${b64Code}`;
|
||||
mdCode = `[](${window.location.protocol}//${window.location.host}${window.location.pathname}#/edit/${b64Code})`;
|
||||
});
|
||||
const unsubscribe = codeStore.subscribe((state) => {
|
||||
b64Code = Base64.encodeURI(JSON.stringify(state));
|
||||
url = `/mermaid-live-editor/#/view/${b64Code}`;
|
||||
iUrl = `https://mermaid.ink/img/${b64Code}`;
|
||||
svgUrl = `https://mermaid.ink/svg/${b64Code}`;
|
||||
mdCode = `[](${window.location.protocol}//${window.location.host}${window.location.pathname}#/edit/${b64Code})`;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#markdown {
|
||||
padding: 7px;
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
width: 300px;
|
||||
}
|
||||
label[for="markdown"] {
|
||||
cursor: pointer;
|
||||
color: -webkit-link;
|
||||
color: -moz-link;
|
||||
color: blue;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
label[for="markdown"] {
|
||||
color: #d8d8d8;
|
||||
}
|
||||
}
|
||||
#links {
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid lightgray;
|
||||
}
|
||||
#markdown {
|
||||
padding: 7px;
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
width: 95%;
|
||||
margin: 1rem 0;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
label[for="markdown"] {
|
||||
cursor: pointer;
|
||||
margin: 0 auto;
|
||||
}
|
||||
/*
|
||||
@media (prefers-color-scheme: dark) {
|
||||
label[for="markdown"] {
|
||||
color: #d8d8d8;
|
||||
}
|
||||
} */
|
||||
.button-style {
|
||||
background-color: #a2d9e2;
|
||||
color: #33a2c4;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #a2d9e2;
|
||||
margin: 0.25rem;
|
||||
}
|
||||
.button-style:hover {
|
||||
background-color: #fff;
|
||||
color: #33a2c4;
|
||||
border: 1px solid #33a2c4;
|
||||
}
|
||||
.button-style:focus {
|
||||
outline: none;
|
||||
}
|
||||
.link-style {
|
||||
text-decoration: none;
|
||||
color: #33a2c4;
|
||||
}
|
||||
#copy-section {
|
||||
padding-top: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="links" >
|
||||
<a href="{url}" use:link>Link to view</a>
|
||||
<a href="{url}" download='' on:click={onDownloadSVG}>
|
||||
Download SVG
|
||||
</a>
|
||||
<a href={iUrl}>Link to Image</a>
|
||||
<a href={svgUrl}>Link to SVG</a>
|
||||
<a href="{url}" download='' on:click={onDownloadPNG}>
|
||||
Download PNG
|
||||
</a>
|
||||
(markdown is base64 encoded for these urls)
|
||||
<div id="links">
|
||||
<button class="button-style">
|
||||
<a class="link-style" href={url} use:link>Link to view</a>
|
||||
</button>
|
||||
<button class="button-style">
|
||||
<a class="link-style" href={url} download="" on:click={onDownloadSVG}>
|
||||
Download SVG
|
||||
</a>
|
||||
</button>
|
||||
<button class="button-style">
|
||||
<a class="link-style" href={iUrl}>Link to Image</a>
|
||||
</button>
|
||||
<button class="button-style">
|
||||
<a class="link-style" href={svgUrl}>Link to SVG</a>
|
||||
</button>
|
||||
<button class="button-style">
|
||||
<a class="link-style" href={url} download="" on:click={onDownloadPNG}>
|
||||
Download PNG
|
||||
</a>
|
||||
</button>
|
||||
(markdown is base64 encoded for these urls)
|
||||
</div>
|
||||
<div id="copy-section">
|
||||
<label for="markdown" class="button-style">Copy Markdown</label>
|
||||
<br />
|
||||
<input id="markdown" type="text" value={mdCode} on:click={onCopyMarkdown} />
|
||||
</div>
|
||||
<p>
|
||||
<label for="markdown">Copy Markdown</label>
|
||||
<input id="markdown" type="text" value="{mdCode}" on:click={onCopyMarkdown} />
|
||||
</p>
|
||||
<p>
|
||||
<label>PNG size:</label>
|
||||
<input type="radio" value="auto" id="autosize" bind:group={imagemodeselected}>
|
||||
|
||||
+314
-243
@@ -1,249 +1,320 @@
|
||||
<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';
|
||||
import Card from '../components/Card.svelte';
|
||||
import Tag from '../components/Tag.svelte';
|
||||
import Links from '../components/Links.svelte';
|
||||
import { fromUrl } from '../code-store.js';
|
||||
// import pkg from '@mermaid-js/mermaid/package.json'
|
||||
import pkg from '@mermaid/package.json'
|
||||
|
||||
export let mermaidVersion = pkg.version
|
||||
|
||||
onMount(async () => {
|
||||
ga('send', 'pageview');
|
||||
ga('send', 'event', 'version', mermaidVersion, mermaidVersion);
|
||||
fromUrl(params.data);
|
||||
});
|
||||
|
||||
// export let code = '';
|
||||
// export let classes = '';
|
||||
|
||||
// export let error = {};
|
||||
// export let token = '';
|
||||
// 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 loadERDiagram(){
|
||||
loadSampleDiagram('ERDiagram');
|
||||
}
|
||||
|
||||
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;
|
||||
case 'ERDiagram' :
|
||||
code = `erDiagram
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
CUSTOMER ||--o{ INVOICE : "liable for"
|
||||
DELIVERY-ADDRESS ||--o{ ORDER : receives
|
||||
INVOICE ||--|{ ORDER : covers
|
||||
ORDER ||--|{ ORDER-ITEM : includes
|
||||
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
|
||||
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
|
||||
`;
|
||||
break;
|
||||
}
|
||||
|
||||
let newState = { code, mermaid: { theme: 'default' }, updateEditor:true };
|
||||
updateCodeStore(newState);
|
||||
|
||||
}
|
||||
|
||||
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";
|
||||
import Card from "../components/Card.svelte";
|
||||
import Tag from "../components/Tag.svelte";
|
||||
import Links from "../components/Links.svelte";
|
||||
import { fromUrl } from "../code-store.js";
|
||||
// import pkg from '@mermaid-js/mermaid/package.json'
|
||||
import pkg from "@mermaid/package.json";
|
||||
export let mermaidVersion = pkg.version;
|
||||
onMount(async () => {
|
||||
ga("send", "pageview");
|
||||
ga("send", "event", "version", mermaidVersion, mermaidVersion);
|
||||
fromUrl(params.data);
|
||||
});
|
||||
// export let code = '';
|
||||
// export let classes = '';
|
||||
// export let error = {};
|
||||
// export let token = '';
|
||||
// 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 loadERDiagram() {
|
||||
loadSampleDiagram("ERDiagram");
|
||||
}
|
||||
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;
|
||||
case "ERDiagram":
|
||||
code = `erDiagram
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
CUSTOMER ||--o{ INVOICE : "liable for"
|
||||
DELIVERY-ADDRESS ||--o{ ORDER : receives
|
||||
INVOICE ||--|{ ORDER : covers
|
||||
ORDER ||--|{ ORDER-ITEM : includes
|
||||
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
|
||||
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
|
||||
`;
|
||||
break;
|
||||
}
|
||||
let newState = {
|
||||
code,
|
||||
mermaid: { theme: "default" },
|
||||
updateEditor: true,
|
||||
};
|
||||
updateCodeStore(newState);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#editor-root {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#col1 {
|
||||
width: 35%;
|
||||
}
|
||||
#col2 {
|
||||
width: 65%;
|
||||
padding-left: 32px;
|
||||
}
|
||||
#app-title {
|
||||
border-bottom: 1px solid lightgrey;
|
||||
padding-bottom: 32px;
|
||||
margin-bottom: 32px;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#power {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#sampleLoader {
|
||||
padding-bottom: 10px;
|
||||
padding-left:10px;
|
||||
|
||||
}
|
||||
.botton-container{
|
||||
margin-top:5px;
|
||||
}
|
||||
|
||||
#body {
|
||||
font-family: "Roboto", sans-serif;
|
||||
background-color: #fcfbfc;
|
||||
}
|
||||
#editor-root {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
#col1 {
|
||||
width: 35%;
|
||||
}
|
||||
#col2 {
|
||||
width: 65%;
|
||||
padding-left: 32px;
|
||||
}
|
||||
#link-root {
|
||||
display: flex;
|
||||
height: fit-content;
|
||||
}
|
||||
#link-col1 {
|
||||
width: 50%;
|
||||
}
|
||||
#link-col2 {
|
||||
width: 50%;
|
||||
padding-left: 32px;
|
||||
}
|
||||
#app-title {
|
||||
font-family: "Playfair Display", serif;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: #1e60ab;
|
||||
opacity: 0.8;
|
||||
}
|
||||
#title-container {
|
||||
width: fit-content;
|
||||
margin: 0 auto 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
#power {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
height: 4rem;
|
||||
}
|
||||
#sampleLoader {
|
||||
padding-bottom: 10px;
|
||||
padding-left: 10px;
|
||||
border-bottom: 1px solid lightgray;
|
||||
}
|
||||
.button-container {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.button-style {
|
||||
background-color: #a2d9e2;
|
||||
color: #33a2c4;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #a2d9e2;
|
||||
margin: 0.25rem;
|
||||
}
|
||||
.button-style:hover {
|
||||
background-color: #fff;
|
||||
color: #33a2c4;
|
||||
border: 1px solid #33a2c4;
|
||||
}
|
||||
.button-style:focus {
|
||||
outline: none;
|
||||
}
|
||||
.link-style {
|
||||
text-decoration: none;
|
||||
color: #33a2c4;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<h1 id="app-title">Mermaid Live Editor</h1>
|
||||
<div id="editor-root">
|
||||
<div id="col1">
|
||||
<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>
|
||||
<button on:click={loadERDiagram}>ER Diagram </button>
|
||||
</div>
|
||||
</div>
|
||||
<Editor data={params.data}/>
|
||||
</Card>
|
||||
<Card title="Mermaid Configuration" ><Config /></Card>
|
||||
<Card title='Links'>
|
||||
<ul className='marketing-links'>
|
||||
<li>
|
||||
<a href='https://mermaid-js.github.io/mermaid' target='_blank'>
|
||||
Mermaid Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://github.com/mermaid-js/mermaid' target='_blank'>
|
||||
Mermaid on GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href='https://github.com/mermaid-js/mermaid-live-editor'
|
||||
target='_blank'
|
||||
>
|
||||
Live Editor on GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href='https://github.com/mermaid-js/mermaid-cli'
|
||||
target='_blank'
|
||||
>
|
||||
Mermaid CLI
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</Card>
|
||||
</div>
|
||||
<div id="col2">
|
||||
<Card title="Preview"><View /></Card>
|
||||
<Card title="Actions"><Links /></Card>
|
||||
<div id="power">
|
||||
Powered by mermaid <Tag color='green'>{mermaidVersion}</Tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="body">
|
||||
<div id="title-container">
|
||||
<h1 id="app-title">Mermaid Live Editor</h1>
|
||||
</div>
|
||||
<div id="editor-root">
|
||||
<div id="col1">
|
||||
<Card title="Code" noPadding="true">
|
||||
<div id="sampleLoader">
|
||||
<span id="sampleLoaderTitle">Sample Diagram Options</span>
|
||||
<br />
|
||||
<div class="button-container">
|
||||
<button class="button-style" on:click={loadFlowChart}>
|
||||
Flow Chart
|
||||
</button>
|
||||
<button
|
||||
class="button-style"
|
||||
on:click={loadSequenceDiagram}>
|
||||
Sequence Diagram
|
||||
</button>
|
||||
<button
|
||||
class="button-style"
|
||||
on:click={loadClassDiagram}>
|
||||
Class Diagram
|
||||
</button>
|
||||
<button
|
||||
class="button-style"
|
||||
on:click={loadStateDiagram}>
|
||||
State Diagram
|
||||
</button>
|
||||
<button class="button-style" on:click={loadGanttChart}>
|
||||
Gantt Chart
|
||||
</button>
|
||||
<button class="button-style" on:click={loadPieChart}>
|
||||
Pie Chart
|
||||
</button>
|
||||
<button class="button-style" on:click={loadERDiagram}>
|
||||
ER Diagram
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Editor data={params.data} />
|
||||
</Card>
|
||||
<Card title="Mermaid Configuration">
|
||||
<Config />
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
<div id="col2">
|
||||
<Card title="Preview">
|
||||
<View />
|
||||
</Card>
|
||||
<div id="link-root">
|
||||
<div id="link-col1">
|
||||
<Card title="Actions">
|
||||
<Links />
|
||||
</Card>
|
||||
</div>
|
||||
<div id="link-col2">
|
||||
<Card title="Links">
|
||||
<div class="button-container">
|
||||
<button class="button-style">
|
||||
<a
|
||||
href="https://mermaid-js.github.io/mermaid"
|
||||
target="_blank"
|
||||
class="link-style">
|
||||
Mermaid Documentation
|
||||
</a>
|
||||
</button>
|
||||
<button class="button-style">
|
||||
<a
|
||||
href="https://github.com/mermaid-js/mermaid"
|
||||
target="_blank"
|
||||
class="link-style">
|
||||
Mermaid on GitHub
|
||||
</a>
|
||||
</button>
|
||||
<button class="button-style">
|
||||
<a
|
||||
href="https://github.com/mermaid-js/mermaid-live-editor"
|
||||
target="_blank"
|
||||
class="link-style">
|
||||
Live Editor on GitHub
|
||||
</a>
|
||||
</button>
|
||||
<button class="button-style">
|
||||
<a
|
||||
href="https://github.com/mermaid-js/mermaid-cli"
|
||||
target="_blank"
|
||||
class="link-style">
|
||||
Mermaid CLI
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="power">
|
||||
Powered by mermaid
|
||||
<Tag color="green">{mermaidVersion}</Tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user