mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2024-11-25 03:06:31 -05:00
Support mermaid in code block diagram and updated all diagram rendering method and styles
This commit is contained in:
Cheng-Han, Wu
parent
c43f9784b4
commit
b49d4e2261
10 changed files with 354 additions and 23 deletions
|
|
@ -43,6 +43,7 @@
|
|||
"markdown-it-mark": "^2.0.0",
|
||||
"markdown-it-ins": "^2.0.0",
|
||||
"markdown-it-sub": "^1.0.0",
|
||||
"markdown-it-sup": "^1.0.0"
|
||||
"markdown-it-sup": "^1.0.0",
|
||||
"mermaid": "^0.5.8"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
2
public/css/html.min.css
vendored
2
public/css/html.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -128,7 +128,7 @@ body {
|
|||
overflow-y: auto;
|
||||
}
|
||||
.ui-status * {
|
||||
font-size: 16px;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
.navbar-brand {
|
||||
font-weight: bold;
|
||||
|
|
|
|||
|
|
@ -82,13 +82,6 @@
|
|||
content: ''
|
||||
}
|
||||
|
||||
.markdown-body .sequence-diagram, .markdown-body .flow-chart {
|
||||
text-align: center;
|
||||
}
|
||||
.markdown-body .flow-chart {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
/*fixed style for rtl in pre and code*/
|
||||
|
||||
.markdown-body[dir='rtl'] pre {
|
||||
|
|
@ -100,7 +93,27 @@
|
|||
unicode-bidi: embed;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
max-height: 70vh;
|
||||
.markdown-body pre.flow-chart,
|
||||
.markdown-body pre.sequence-diagram,
|
||||
.markdown-body pre.graphviz,
|
||||
.markdown-body pre.mermaid {
|
||||
text-align: center;
|
||||
background-color: inherit;
|
||||
border-radius: 0;
|
||||
white-space: inherit;
|
||||
}
|
||||
|
||||
.markdown-body pre.flow-chart > code,
|
||||
.markdown-body pre.sequence-diagram > code,
|
||||
.markdown-body pre.graphviz > code,
|
||||
.markdown-body pre.mermaid > code {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown-body pre.flow-chart > svg,
|
||||
.markdown-body pre.sequence-diagram > svg,
|
||||
.markdown-body pre.graphviz > svg,
|
||||
.markdown-body pre.mermaid > svg {
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
273
public/css/mermaid.css
Normal file
273
public/css/mermaid.css
Normal file
|
|
@ -0,0 +1,273 @@
|
|||
/* Flowchart variables */
|
||||
/* Sequence Diagram variables */
|
||||
/* Gantt chart variables */
|
||||
.mermaid .label {
|
||||
color: #333;
|
||||
}
|
||||
.mermaid .node rect,
|
||||
.mermaid .node circle,
|
||||
.mermaid .node ellipse,
|
||||
.mermaid .node polygon {
|
||||
fill: #ECECFF;
|
||||
stroke: #CCCCFF;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
.mermaid .edgePath .path {
|
||||
stroke: #333333;
|
||||
}
|
||||
.mermaid .edgeLabel {
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
.mermaid .cluster rect {
|
||||
fill: #ffffde !important;
|
||||
rx: 4 !important;
|
||||
stroke: #aaaa33 !important;
|
||||
stroke-width: 1px !important;
|
||||
}
|
||||
.mermaid .cluster text {
|
||||
fill: #333;
|
||||
}
|
||||
.mermaid .actor {
|
||||
stroke: #CCCCFF;
|
||||
fill: #ECECFF;
|
||||
}
|
||||
.mermaid text.actor {
|
||||
fill: black;
|
||||
stroke: none;
|
||||
}
|
||||
.mermaid .actor-line {
|
||||
stroke: grey;
|
||||
}
|
||||
.mermaid .messageLine0 {
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: "2 2";
|
||||
marker-end: "url(#arrowhead)";
|
||||
stroke: #333;
|
||||
}
|
||||
.mermaid .messageLine1 {
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: "2 2";
|
||||
stroke: #333;
|
||||
}
|
||||
.mermaid #arrowhead {
|
||||
fill: #333;
|
||||
}
|
||||
.mermaid #crosshead path {
|
||||
fill: #333 !important;
|
||||
stroke: #333 !important;
|
||||
}
|
||||
.mermaid .messageText {
|
||||
fill: #333;
|
||||
stroke: none;
|
||||
}
|
||||
.mermaid .labelBox {
|
||||
stroke: #CCCCFF;
|
||||
fill: #ECECFF;
|
||||
}
|
||||
.mermaid .labelText {
|
||||
fill: black;
|
||||
stroke: none;
|
||||
}
|
||||
.mermaid .loopText {
|
||||
fill: black;
|
||||
stroke: none;
|
||||
}
|
||||
.mermaid .loopLine {
|
||||
stroke-width: 2;
|
||||
stroke-dasharray: "2 2";
|
||||
marker-end: "url(#arrowhead)";
|
||||
stroke: #CCCCFF;
|
||||
}
|
||||
.mermaid .note {
|
||||
stroke: #aaaa33;
|
||||
fill: #fff5ad;
|
||||
}
|
||||
.mermaid .noteText {
|
||||
fill: black;
|
||||
stroke: none;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 14px;
|
||||
}
|
||||
/** Section styling */
|
||||
.mermaid .section {
|
||||
stroke: none;
|
||||
opacity: 0.2;
|
||||
}
|
||||
.mermaid .section0 {
|
||||
fill: rgba(102, 102, 255, 0.49);
|
||||
}
|
||||
.mermaid .section2 {
|
||||
fill: #fff400;
|
||||
}
|
||||
.mermaid .section1,
|
||||
.mermaid .section3 {
|
||||
fill: white;
|
||||
opacity: 0.2;
|
||||
}
|
||||
.mermaid .sectionTitle0 {
|
||||
fill: #333;
|
||||
}
|
||||
.mermaid .sectionTitle1 {
|
||||
fill: #333;
|
||||
}
|
||||
.mermaid .sectionTitle2 {
|
||||
fill: #333;
|
||||
}
|
||||
.mermaid .sectionTitle3 {
|
||||
fill: #333;
|
||||
}
|
||||
.mermaid .sectionTitle {
|
||||
text-anchor: start;
|
||||
font-size: 11px;
|
||||
text-height: 14px;
|
||||
}
|
||||
/* Grid and axis */
|
||||
.mermaid .grid .tick {
|
||||
stroke: lightgrey;
|
||||
opacity: 0.3;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
.mermaid .grid path {
|
||||
stroke-width: 0;
|
||||
}
|
||||
/* Today line */
|
||||
.mermaid .today {
|
||||
fill: none;
|
||||
stroke: red;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
/* Task styling */
|
||||
/* Default task */
|
||||
.mermaid .task {
|
||||
stroke-width: 2;
|
||||
}
|
||||
.mermaid .taskText {
|
||||
text-anchor: middle;
|
||||
font-size: 11px;
|
||||
}
|
||||
.mermaid .taskTextOutsideRight {
|
||||
fill: black;
|
||||
text-anchor: start;
|
||||
font-size: 11px;
|
||||
}
|
||||
.mermaid .taskTextOutsideLeft {
|
||||
fill: black;
|
||||
text-anchor: end;
|
||||
font-size: 11px;
|
||||
}
|
||||
/* Specific task settings for the sections*/
|
||||
.mermaid .taskText0,
|
||||
.mermaid .taskText1,
|
||||
.mermaid .taskText2,
|
||||
.mermaid .taskText3 {
|
||||
fill: white;
|
||||
}
|
||||
.mermaid .task0,
|
||||
.mermaid .task1,
|
||||
.mermaid .task2,
|
||||
.mermaid .task3 {
|
||||
fill: #8a90dd;
|
||||
stroke: #534fbc;
|
||||
}
|
||||
.mermaid .taskTextOutside0,
|
||||
.mermaid .taskTextOutside2 {
|
||||
fill: black;
|
||||
}
|
||||
.mermaid .taskTextOutside1,
|
||||
.mermaid .taskTextOutside3 {
|
||||
fill: black;
|
||||
}
|
||||
/* Active task */
|
||||
.mermaid .active0,
|
||||
.mermaid .active1,
|
||||
.mermaid .active2,
|
||||
.mermaid .active3 {
|
||||
fill: #bfc7ff;
|
||||
stroke: #534fbc;
|
||||
}
|
||||
.mermaid .activeText0,
|
||||
.mermaid .activeText1,
|
||||
.mermaid .activeText2,
|
||||
.mermaid .activeText3 {
|
||||
fill: black !important;
|
||||
}
|
||||
/* Completed task */
|
||||
.mermaid .done0,
|
||||
.mermaid .done1,
|
||||
.mermaid .done2,
|
||||
.mermaid .done3 {
|
||||
stroke: grey;
|
||||
fill: lightgrey;
|
||||
stroke-width: 2;
|
||||
}
|
||||
.mermaid .doneText0,
|
||||
.mermaid .doneText1,
|
||||
.mermaid .doneText2,
|
||||
.mermaid .doneText3 {
|
||||
fill: black !important;
|
||||
}
|
||||
/* Tasks on the critical line */
|
||||
.mermaid .crit0,
|
||||
.mermaid .crit1,
|
||||
.mermaid .crit2,
|
||||
.mermaid .crit3 {
|
||||
stroke: #ff8888;
|
||||
fill: red;
|
||||
stroke-width: 2;
|
||||
}
|
||||
.mermaid .activeCrit0,
|
||||
.mermaid .activeCrit1,
|
||||
.mermaid .activeCrit2,
|
||||
.mermaid .activeCrit3 {
|
||||
stroke: #ff8888;
|
||||
fill: #bfc7ff;
|
||||
stroke-width: 2;
|
||||
}
|
||||
.mermaid .doneCrit0,
|
||||
.mermaid .doneCrit1,
|
||||
.mermaid .doneCrit2,
|
||||
.mermaid .doneCrit3 {
|
||||
stroke: #ff8888;
|
||||
fill: lightgrey;
|
||||
stroke-width: 2;
|
||||
cursor: pointer;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
.mermaid .doneCritText0,
|
||||
.mermaid .doneCritText1,
|
||||
.mermaid .doneCritText2,
|
||||
.mermaid .doneCritText3 {
|
||||
fill: black !important;
|
||||
}
|
||||
.mermaid .activeCritText0,
|
||||
.mermaid .activeCritText1,
|
||||
.mermaid .activeCritText2,
|
||||
.mermaid .activeCritText3 {
|
||||
fill: black !important;
|
||||
}
|
||||
.mermaid .titleText {
|
||||
text-anchor: middle;
|
||||
font-size: 18px;
|
||||
fill: black;
|
||||
}
|
||||
/*
|
||||
|
||||
|
||||
*/
|
||||
.mermaid .node text {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 14px;
|
||||
}
|
||||
.mermaid div.mermaidTooltip {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
max-width: 200px;
|
||||
padding: 2px;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 12px;
|
||||
background: #ffffde;
|
||||
border: 1px solid #aaaa33;
|
||||
border-radius: 2px;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
}
|
||||
|
|
@ -220,11 +220,16 @@ function finishView(view) {
|
|||
var sequences = view.find(".sequence-diagram.raw").removeClass("raw");
|
||||
sequences.each(function (key, value) {
|
||||
try {
|
||||
var sequence = $(value);
|
||||
var $value = $(value);
|
||||
var $ele = $(value).parent().parent();
|
||||
|
||||
var sequence = $value;
|
||||
sequence.sequenceDiagram({
|
||||
theme: 'simple'
|
||||
});
|
||||
sequence.parent().parent().replaceWith(sequence);
|
||||
|
||||
$ele.addClass('sequence-diagram');
|
||||
$value.children().unwrap().unwrap();
|
||||
} catch (err) {
|
||||
console.warn(err);
|
||||
}
|
||||
|
|
@ -233,15 +238,20 @@ function finishView(view) {
|
|||
var flow = view.find(".flow-chart.raw").removeClass("raw");
|
||||
flow.each(function (key, value) {
|
||||
try {
|
||||
var chart = flowchart.parse($(value).text());
|
||||
$(value).html('');
|
||||
var $value = $(value);
|
||||
var $ele = $(value).parent().parent();
|
||||
|
||||
var chart = flowchart.parse($value.text());
|
||||
$value.html('');
|
||||
chart.drawSVG(value, {
|
||||
'line-width': 2,
|
||||
'fill': 'none',
|
||||
'font-size': '16px',
|
||||
'font-family': "'Andale Mono', monospace"
|
||||
});
|
||||
$(value).parent().parent().replaceWith(value);
|
||||
|
||||
$ele.addClass('flow-chart');
|
||||
$value.children().unwrap().unwrap();
|
||||
} catch (err) {
|
||||
console.warn(err);
|
||||
}
|
||||
|
|
@ -250,9 +260,37 @@ function finishView(view) {
|
|||
var graphvizs = view.find(".graphviz.raw").removeClass("raw");
|
||||
graphvizs.each(function (key, value) {
|
||||
try {
|
||||
var graphviz = Viz($(value).text());
|
||||
$(value).html(graphviz);
|
||||
$(value).parent().parent().replaceWith(value);
|
||||
var $value = $(value);
|
||||
var $ele = $(value).parent().parent();
|
||||
|
||||
var graphviz = Viz($value.text());
|
||||
$value.html(graphviz);
|
||||
|
||||
$ele.addClass('graphviz');
|
||||
$value.children().unwrap().unwrap();
|
||||
} catch (err) {
|
||||
console.warn(err);
|
||||
}
|
||||
});
|
||||
//mermaid
|
||||
var mermaids = view.find(".mermaid.raw").removeClass("raw");
|
||||
mermaids.each(function (key, value) {
|
||||
try {
|
||||
var $value = $(value);
|
||||
var $ele = $(value).parent().parent();
|
||||
|
||||
var mermaidError = null;
|
||||
mermaid.parseError = function (err, hash) {
|
||||
mermaidError = err;
|
||||
};
|
||||
|
||||
if (mermaidAPI.parse($value.text())) {
|
||||
$ele.addClass('mermaid');
|
||||
$ele.html($value.text());
|
||||
mermaid.init(undefined, $ele);
|
||||
} else {
|
||||
console.warn(mermaidError);
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn(err);
|
||||
}
|
||||
|
|
@ -633,6 +671,8 @@ function highlightRender(code, lang) {
|
|||
return '<div class="flow-chart raw">' + code + '</div>';
|
||||
} else if (lang == 'graphviz') {
|
||||
return '<div class="graphviz raw">' + code + '</div>';
|
||||
} else if (lang == 'mermaid') {
|
||||
return '<div class="mermaid raw">' + code + '</div>';
|
||||
}
|
||||
var reallang = lang.replace(/\=$|\=\d+$|\=\+$/, '');
|
||||
var languages = hljs.listLanguages();
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ var cursorMenuThrottle = 100;
|
|||
var cursorActivityDebounce = 50;
|
||||
var cursorAnimatePeriod = 100;
|
||||
var supportCodeModes = ['javascript', 'htmlmixed', 'htmlembedded', 'css', 'xml', 'clike', 'clojure', 'ruby', 'python', 'shell', 'php', 'sql', 'coffeescript', 'yaml', 'jade', 'lua', 'cmake', 'nginx', 'perl', 'sass', 'r', 'dockerfile'];
|
||||
var supportCharts = ['sequence', 'flow', 'graphviz'];
|
||||
var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid'];
|
||||
var supportHeaders = [
|
||||
{
|
||||
text: '# h1',
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@
|
|||
<script src="<%- url %>/vendor/sequence-diagrams/sequence-diagram-min.js" defer></script>
|
||||
<script src="<%- url %>/vendor/flowchart/release/flowchart.min.js" defer></script>
|
||||
<script src="<%- url %>/vendor/viz.js/viz.js" defer></script>
|
||||
<script src="<%- url %>/vendor/mermaid/dist/mermaid.min.js" defer></script>
|
||||
<script src="<%- url %>/vendor/FileSaver.min.js" defer></script>
|
||||
<script src="<%- url %>/vendor/store.min.js" defer></script>
|
||||
<script src="<%- url %>/vendor/js-url/url.min.js" defer></script>
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@
|
|||
<link rel="stylesheet" href="<%- url %>/vendor/highlight-js/github-gist.min.css">
|
||||
<link rel="stylesheet" href="<%- url %>/vendor/emojify/css/emojify.min.css">
|
||||
<link rel="stylesheet" href="<%- url %>/vendor/showup/showup.css">
|
||||
<link rel="stylesheet" href="<%- url %>/css/mermaid.css">
|
||||
<link rel="stylesheet" href="<%- url %>/css/markdown.css">
|
||||
<link rel="stylesheet" href="<%- url %>/css/index.css">
|
||||
<link rel="stylesheet" href="<%- url %>/css/extra.css">
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
<link rel="stylesheet" href='<%- url %>/css/github-extract.css'>
|
||||
<link rel="stylesheet" href='<%- url %>/css/gist.css'>
|
||||
<link rel="stylesheet" href='<%- url %>/vendor/highlight-js/github-gist.min.css'>
|
||||
<link rel="stylesheet" href="<%- url %>/css/mermaid.css">
|
||||
<link rel="stylesheet" href='<%- url %>/css/markdown.css'>
|
||||
<link rel="stylesheet" href='<%- url %>/vendor/emojify/css/emojify.min.css'>
|
||||
<link rel="stylesheet" href='<%- url %>/css/extra.css'>
|
||||
|
|
@ -98,6 +99,7 @@
|
|||
<script src="<%- url %>/vendor/sequence-diagrams/sequence-diagram-min.js" defer></script>
|
||||
<script src="<%- url %>/vendor/flowchart/release/flowchart.min.js" defer></script>
|
||||
<script src="<%- url %>/vendor/viz.js/viz.js" defer></script>
|
||||
<script src="<%- url %>/vendor/mermaid/dist/mermaid.min.js" defer></script>
|
||||
<script src="<%- url %>/vendor/md-toc.js" defer></script>
|
||||
<script type="text/x-mathjax-config">
|
||||
MathJax.Hub.Config({ messageStyle: "none", skipStartupTypeset: true ,tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], processEscapes: true }});
|
||||
|
|
|
|||
Loading…
Reference in a new issue