Skip to content

Commit a1f7c68

Browse files
aldergalderg
committed
Adds mermaid.html for generating diagrams from Mermaid syntax
1 parent 3edd4bb commit a1f7c68

9 files changed

+72
-7
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
# Draw.io Tools
22

33
* <a href="https://jgraph.github.io/drawio-tools/tools/convert.html" target="_blank">Convert:</a> Inflate/deflate, URL encode/decode and remove linefeeds from any text
4+
* <a href="https://jgraph.github.io/drawio-tools/tools/mermaid.html" target="_blank">Mermaid:</a> Open a Mermaid diagram and convert it to a Draw.io diagram
45
* <a href="https://jgraph.github.io/drawio-tools/tools/base64.html" target="_blank">Base64:</a> Base64 encode images
56
* <a href="https://jgraph.github.io/drawio-tools/tools/merge.html" target="_blank">Merge:</a> Create vertical image stack
67
* <a href="https://jgraph.github.io/drawio-tools/tools/viewer.html" target="_blank">Viewer:</a> Create link for viewing diagrams

‎tools/base64.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
//]]>
4545
</script>
4646
</head>
47-
<body onload="main();">
47+
<body style="color-scheme:light dark;" onload="main();">
4848
<h2>Base64 encode image</h2>
4949
<div id="dropZone" style="width:600px;height:200px;border:1px dashed gray;">Drag image here</div>
5050
<br/>

‎tools/convert.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -460,7 +460,7 @@
460460
//]]>
461461
</script>
462462
</head>
463-
<body>
463+
<body style="color-scheme:light dark;">
464464
<h2>Inflate/deflate, URL encode/decode</h2>
465465
<textarea rows="40" cols="120" id="textarea" placeholder="Drop files here or enter text" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"></textarea>
466466
<br/><br/>

‎tools/csv.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
}
6868
</script>
6969
</head>
70-
<body onload="document.getElementById('url').focus();">
70+
<body style="color-scheme:light dark;" onload="document.getElementById('url').focus();">
7171
<h2>Online CSV Viewer</h2>
7272
View public CSV files:
7373
<br><br>

‎tools/link.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -321,7 +321,7 @@
321321

322322
</script>
323323
</head>
324-
<body style="font-family:sans-serif;" onload="resetLink();actionChanged();document.getElementById('cells').focus();">
324+
<body style="color-scheme:light dark;font-family:sans-serif;" onload="resetLink();actionChanged();document.getElementById('cells').focus();">
325325
<span style="position:relative;display:inline-block;left:50%;transform:translate(-50%,0);">
326326
<h2 style="text-align:center;width:100%;">Create Custom Link</h2>
327327
<hr>

‎tools/merge.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@
101101
//]]>
102102
</script>
103103
</head>
104-
<body onload="main();">
104+
<body style="color-scheme:light dark;" onload="main();">
105105
<h2>Create vertical image stack</h2>
106106
<div id="dropZone" style="width:600px;height:200px;border:1px dashed gray;">Drag images here</div>
107107
<br/>

‎tools/mermaid.html

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge" ><![endif]-->
2+
<!DOCTYPE html>
3+
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
4+
<head>
5+
<title>Inflate/deflate, URL encode/decode</title>
6+
<meta charset="utf-8"/>
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
8+
<script type="text/javascript">
9+
//<![CDATA[
10+
function create()
11+
{
12+
var value = document.getElementById('textarea').value;
13+
var link = 'https://www.draw.io/?create=' + encodeURIComponent(JSON.stringify({type: 'mermaid', data: value}));
14+
document.getElementById('link').innerHTML = '<a href="' + link + '" target="_blank">Open in draw.io</a>';
15+
};
16+
//]]>
17+
</script>
18+
</head>
19+
<body style="color-scheme:light dark;">
20+
<h2>Create draw.io diagram from Mermaid diagram definition:</h2>
21+
<textarea rows="20" cols="80" id="textarea" placeholder="Drop files here or enter text" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"></textarea>
22+
<br/><br/>
23+
<button onclick="create();return false;">Create</button>
24+
<span style="margin-left:4px;" id="link"></span>
25+
<script type="text/javascript">
26+
//<![CDATA[
27+
// Enables dropping files
28+
if (window.File != null && window.FileReader != null && window.FileList != null)
29+
{
30+
function handleDrop(evt)
31+
{
32+
evt.stopPropagation();
33+
evt.preventDefault();
34+
35+
if (evt.dataTransfer.files.length > 0)
36+
{
37+
var file = evt.dataTransfer.files[0];
38+
39+
var reader = new FileReader();
40+
reader.onload = function (e)
41+
{
42+
evt.target.value = e.target.result;
43+
};
44+
reader.readAsText(file);
45+
}
46+
};
47+
48+
function handleDragOver(evt)
49+
{
50+
evt.stopPropagation();
51+
evt.preventDefault();
52+
};
53+
54+
// Setup the dnd listeners.
55+
var textarea = document.getElementById('textarea');
56+
57+
textarea.addEventListener('dragover', handleDragOver, false);
58+
textarea.addEventListener('drop', handleDrop, false);
59+
}
60+
//]]>
61+
</script>
62+
</form>
63+
</body>
64+
</html>

‎tools/navigator.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</script>
99
<script type="text/javascript" src="https://app.diagrams.net/js/app.min.js"></script>
1010
</head>
11-
<body>
11+
<body style="color-scheme:light dark;">
1212
<h2>Browser</h2>
1313
<pre id="info"></pre>
1414
<script type="text/javascript">

‎tools/tickets.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
}
3333
</script>
3434
</head>
35-
<body onload="document.getElementById('freshdeskDomain').focus();">
35+
<body style="color-scheme:light dark;" onload="document.getElementById('freshdeskDomain').focus();">
3636
<h2>Freshdesk Tickets Viewer</h2>
3737
Drag and drop tickets from Freshdesk. Update tickets via Extras, Update Tickets.<br>
3838
To start the editor, enter your Freshdesk domain and API key below and click Start.

0 commit comments

Comments
 (0)