depau
/
HackMD
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Support mermaid in code block diagram and updated all diagram rendering method and styles

This commit is contained in:
Cheng-Han, Wu 2016-03-04 23:26:27 +08:00
parent c43f9784b4
commit b49d4e2261
10 changed files with 354 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
bower.json
View File

@ -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
View File

File diff suppressed because one or more lines are too long

2
public/css/index.css
View File

@ -128,7 +128,7 @@ body {
overflow-y: auto;
}
.ui-status * {
font-size: 16px;
font-size: 16px !important;
}
.navbar-brand {
font-weight: bold;

35
public/css/markdown.css
View File

@ -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
View 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;
}

56
public/js/extra.js
View File

@ -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();

2
public/js/index.js
View File

@ -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',

1
public/views/foot.ejs
View File

@ -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>

1
public/views/head.ejs
View File

@ -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">

2
public/views/pretty.ejs
View File

@ -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 }});