Upgraded Katex to v0.13.

Upgraded Mermaid to v8.9.
Removed StackEdit v4 support.

Dockerfile

@@ -1,17 +1,6 @@
 FROM benweet/stackedit-base
 
-RUN mkdir -p /opt/stackedit/stackedit_v4
+RUN mkdir -p /opt/stackedit
-WORKDIR /opt/stackedit/stackedit_v4
-
-ENV SERVE_V4 true
-ENV V4_VERSION 4.3.22
-RUN npm pack stackedit@$V4_VERSION \
-  && tar xzf stackedit-*.tgz --strip 1 \
-  && yarn \
-  && yarn cache clean \
-  && rm -rf ~/.cache/bower \
-  && rm -rf ~/.local/share/bower
-
 WORKDIR /opt/stackedit
 
 COPY package*json /opt/stackedit/

index.js

@@ -11,7 +11,7 @@ const express = require('express');
 
 const app = express();
 
-require('./server')(app, process.env.SERVE_V4);
+require('./server')(app);
 
 const port = parseInt(process.env.PORT || 8080, 10);
 const httpServer = http.createServer(app);

package.json

@@ -39,7 +39,7 @@
     "handlebars": "^4.0.10",
     "indexeddbshim": "^3.6.2",
     "js-yaml": "^3.11.0",
-    "katex": "^v0.10.2",
+    "katex": "^0.13.0",
     "markdown-it": "^8.4.1",
     "markdown-it-abbr": "^1.0.4",
     "markdown-it-deflist": "^2.0.2",
@@ -50,7 +50,7 @@
     "markdown-it-pandoc-renderer": "1.1.3",
     "markdown-it-sub": "^1.0.0",
     "markdown-it-sup": "^1.0.0",
-    "mermaid": "^8.0.0-rc.8",
+    "mermaid": "^8.9.2",
     "mousetrap": "^1.6.1",
     "normalize-scss": "^7.0.1",
     "prismjs": "^1.6.0",
@@ -100,7 +100,7 @@
     "jest": "^23.0.0",
     "jest-raw-loader": "^1.0.1",
     "jest-serializer-vue": "^0.3.0",
-    "node-sass": "^4.9.0",
+    "node-sass": "^4.0.0",
     "npm-bump": "^0.0.23",
     "offline-plugin": "^5.0.3",
     "opn": "^4.0.2",

server/index.js

@@ -10,7 +10,7 @@ const conf = require('./conf');
 
 const resolvePath = pathToResolve => path.join(__dirname, '..', pathToResolve);
 
-module.exports = (app, serveV4) => {
+module.exports = (app) => {
   if (process.env.NODE_ENV === 'production') {
     // Enable CORS for fonts
     app.all('*', (req, res, next) => {
@@ -33,14 +33,6 @@ module.exports = (app, serveV4) => {
     extended: false,
   }), user.paypalIpn);
 
-  if (serveV4) {
-    /* eslint-disable global-require, import/no-unresolved */
-    app.post('/sshPublish', require('../stackedit_v4/app/ssh').publish);
-    app.post('/picasaImportImg', require('../stackedit_v4/app/picasa').importImg);
-    app.get('/downloadImport', require('../stackedit_v4/app/download').importPublic);
-    /* eslint-enable global-require, import/no-unresolved */
-  }
-
   // Serve landing.html
   app.get('/', (req, res) => res.sendFile(resolvePath('static/landing/index.html')));
   // Serve sitemap.xml
@@ -53,13 +45,6 @@ module.exports = (app, serveV4) => {
 
   // Serve static resources
   if (process.env.NODE_ENV === 'production') {
-    if (serveV4) {
-      // Serve editor.html in /viewer
-      app.get('/editor', (req, res) => res.sendFile(resolvePath('stackedit_v4/views/editor.html')));
-      // Serve viewer.html in /viewer
-      app.get('/viewer', (req, res) => res.sendFile(resolvePath('stackedit_v4/views/viewer.html')));
-    }
-
     // Serve index.html in /app
     app.get('/app', (req, res) => res.sendFile(resolvePath('dist/index.html')));
 
@@ -74,12 +59,5 @@ module.exports = (app, serveV4) => {
     }));
 
     app.use(serveStatic(resolvePath('dist')));
-
-    if (serveV4) {
-      app.use(serveStatic(path.dirname(resolvePath('stackedit_v4/public/cache.manifest'))));
-
-      // Error 404
-      app.use((req, res) => res.status(404).sendFile(resolvePath('stackedit_v4/views/error_404.html')));
-    }
   }
 };

src/extensions/mermaidExtension.js

@@ -1,9 +1,4 @@
-import mermaidUtils from 'mermaid/src/utils';
+import 'mermaid';
-import flowRenderer from 'mermaid/src/diagrams/flowchart/flowRenderer';
-import sequenceRenderer from 'mermaid/src/diagrams/sequence/sequenceRenderer';
-import ganttRenderer from 'mermaid/src/diagrams/gantt/ganttRenderer';
-import classRenderer from 'mermaid/src/diagrams/class/classRenderer';
-import gitGraphRenderer from 'mermaid/src/diagrams/git/gitGraphRenderer';
 import extensionSvc from '../services/extensionSvc';
 import utils from '../services/utils';
 
@@ -11,6 +6,7 @@ const config = {
   logLevel: 5,
   startOnLoad: false,
   arrowMarkerAbsolute: false,
+  theme: 'neutral',
   flowchart: {
     htmlLabels: true,
     curve: 'linear',
@@ -41,51 +37,27 @@ const config = {
     numberSectionStyles: 4,
     axisFormat: '%Y-%m-%d',
   },
-  class: {},
-  git: {},
 };
 
 const containerElt = document.createElement('div');
 containerElt.className = 'hidden-rendering-container';
 document.body.appendChild(containerElt);
 
-const render = (elt) => {
+let init = () => {
-  const svgId = `mermaid-svg-${utils.uid()}`;
+  window.mermaid.initialize(config);
-  const txt = elt.textContent;
+  init = () => {};
-  containerElt.innerHTML = `<div class="mermaid"><svg xmlns="http://www.w3.org/2000/svg" id="${svgId}"><g></g></svg></div>`;
+};
 
+const render = (elt) => {
   try {
-    const graphType = mermaidUtils.detectType(txt);
+    init();
-    switch (graphType) {
+    const svgId = `mermaid-svg-${utils.uid()}`;
-      case 'git':
+    window.mermaid.mermaidAPI.render(svgId, elt.textContent, () => {
-        config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+      while (elt.firstChild) {
-        gitGraphRenderer.setConf(config.git);
+        elt.removeChild(elt.lastChild);
-        gitGraphRenderer.draw(txt, svgId, false);
+      }
-        break;
+      elt.appendChild(containerElt.querySelector(`#${svgId}`));
-      case 'flowchart':
+    }, containerElt);
-        config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-        flowRenderer.setConf(config.flowchart);
-        flowRenderer.draw(txt, svgId, false);
-        break;
-      case 'sequence':
-        config.sequence.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-        sequenceRenderer.setConf(config.sequence);
-        sequenceRenderer.draw(txt, svgId);
-        break;
-      case 'gantt':
-        config.gantt.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-        ganttRenderer.setConf(config.gantt);
-        ganttRenderer.draw(txt, svgId);
-        break;
-      case 'class':
-        config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-        classRenderer.setConf(config.class);
-        classRenderer.draw(txt, svgId);
-        break;
-      default:
-        throw new Error('Invalid graph type.');
-    }
-    elt.parentNode.replaceChild(containerElt.firstChild, elt);
   } catch (e) {
     console.error(e); // eslint-disable-line no-console
   }

src/styles/index.js

@@ -1,5 +1,4 @@
 import 'katex/dist/katex.css';
 import './fonts.scss';
 import './prism.scss';
-import './mermaid.scss';
 import './base.scss';

src/styles/mermaid.scss

@@ -1,849 +0,0 @@
-/* stylelint-disable color-hex-case, color-hex-length, rule-empty-line-before, comment-empty-line-before, comment-whitespace-inside, comment-no-empty */
-@import './variables';
-
-// neutral for light theme
-// dark for dark theme
-
-.mermaid {
-  font-size: 16px;
-
-  svg {
-    color: rgba(0, 0, 0, 0.75);
-    width: 100%;
-    max-width: 100%;
-
-    .app--dark & {
-      color: rgba(255, 255, 255, 0.75);
-    }
-
-    * {
-      font-family: $font-family-main;
-    }
-  }
-
-  .mermaid .label {
-    color: #333;
-  }
-
-  .node rect,
-  .node circle,
-  .node ellipse,
-  .node polygon {
-    fill: #eee;
-    stroke: #999;
-    stroke-width: 1px;
-  }
-
-  .node.clickable {
-    cursor: pointer;
-  }
-
-  .arrowheadPath {
-    fill: #333333;
-  }
-
-  .edgePath .path {
-    stroke: #666;
-    stroke-width: 1.5px;
-  }
-
-  .edgeLabel {
-    background-color: white;
-  }
-
-  .cluster rect {
-    fill: #eaf2fb !important;
-    stroke: #26a !important;
-    stroke-width: 1px !important;
-  }
-
-  .cluster text {
-    fill: #333;
-  }
-
-  div.mermaidTooltip {
-    position: absolute;
-    text-align: center;
-    max-width: 200px;
-    padding: 2px;
-    font-family: 'trebuchet ms', verdana, arial;
-    font-size: 12px;
-    background: #eaf2fb;
-    border: 1px solid #26a;
-    border-radius: 2px;
-    pointer-events: none;
-    z-index: 100;
-  }
-
-  .actor {
-    stroke: #999;
-    fill: #eee;
-  }
-
-  text.actor {
-    fill: #333;
-    stroke: none;
-  }
-
-  .actor-line {
-    stroke: #666;
-  }
-
-  .messageLine0 {
-    stroke-width: 1.5;
-    stroke-dasharray: '2 2';
-    marker-end: 'url(#arrowhead)';
-    stroke: #333;
-  }
-
-  .messageLine1 {
-    stroke-width: 1.5;
-    stroke-dasharray: '2 2';
-    stroke: #333;
-  }
-
-  #arrowhead {
-    fill: #333;
-  }
-
-  #crosshead path {
-    fill: #333 !important;
-    stroke: #333 !important;
-  }
-
-  .messageText {
-    fill: #333;
-    stroke: none;
-  }
-
-  .labelBox {
-    stroke: #999;
-    fill: #eee;
-  }
-
-  .labelText {
-    fill: white;
-    stroke: none;
-  }
-
-  .loopText {
-    fill: white;
-    stroke: none;
-  }
-
-  .loopLine {
-    stroke-width: 2;
-    stroke-dasharray: '2 2';
-    marker-end: 'url(#arrowhead)';
-    stroke: #999;
-  }
-
-  .note {
-    stroke: #777700;
-    fill: #ffa;
-  }
-
-  .noteText {
-    fill: black;
-    stroke: none;
-    font-family: 'trebuchet ms', verdana, arial;
-    font-size: 14px;
-  }
-
-  /** Section styling */
-  .section {
-    stroke: none;
-    opacity: 0.2;
-  }
-
-  .section0 {
-    fill: #80b3e6;
-  }
-
-  .section2 {
-    fill: #80b3e6;
-  }
-
-  .section1,
-  .section3 {
-    fill: white;
-    opacity: 0.2;
-  }
-
-  .sectionTitle0 {
-    fill: #333;
-  }
-
-  .sectionTitle1 {
-    fill: #333;
-  }
-
-  .sectionTitle2 {
-    fill: #333;
-  }
-
-  .sectionTitle3 {
-    fill: #333;
-  }
-
-  .sectionTitle {
-    text-anchor: start;
-    font-size: 11px;
-  }
-
-  /* Grid and axis */
-  .grid .tick {
-    stroke: #e6e6e6;
-    opacity: 0.3;
-    shape-rendering: crispEdges;
-  }
-
-  .grid path {
-    stroke-width: 0;
-  }
-
-  /* Today line */
-  .today {
-    fill: none;
-    stroke: #d42;
-    stroke-width: 2px;
-  }
-
-  /* Task styling */
-  /* Default task */
-  .task {
-    stroke-width: 2;
-  }
-
-  .taskText {
-    text-anchor: middle;
-    font-size: 11px;
-  }
-
-  .taskTextOutsideRight {
-    fill: #333;
-    text-anchor: start;
-    font-size: 11px;
-  }
-
-  .taskTextOutsideLeft {
-    fill: #333;
-    text-anchor: end;
-    font-size: 11px;
-  }
-
-  /* Specific task settings for the sections*/
-  .taskText0,
-  .taskText1,
-  .taskText2,
-  .taskText3 {
-    fill: white;
-  }
-
-  .task0,
-  .task1,
-  .task2,
-  .task3 {
-    fill: #26a;
-    stroke: #1a4d80;
-  }
-
-  .taskTextOutside0,
-  .taskTextOutside2 {
-    fill: #333;
-  }
-
-  .taskTextOutside1,
-  .taskTextOutside3 {
-    fill: #333;
-  }
-
-  /* Active task */
-  .active0,
-  .active1,
-  .active2,
-  .active3 {
-    fill: #eee;
-    stroke: #1a4d80;
-  }
-
-  .activeText0,
-  .activeText1,
-  .activeText2,
-  .activeText3 {
-    fill: #333 !important;
-  }
-
-  /* Completed task */
-  .done0,
-  .done1,
-  .done2,
-  .done3 {
-    stroke: #666;
-    fill: #bbb;
-    stroke-width: 2;
-  }
-
-  .doneText0,
-  .doneText1,
-  .doneText2,
-  .doneText3 {
-    fill: #333 !important;
-  }
-
-  /* Tasks on the critical line */
-  .crit0,
-  .crit1,
-  .crit2,
-  .crit3 {
-    stroke: #b1361b;
-    fill: #d42;
-    stroke-width: 2;
-  }
-
-  .activeCrit0,
-  .activeCrit1,
-  .activeCrit2,
-  .activeCrit3 {
-    stroke: #b1361b;
-    fill: #eee;
-    stroke-width: 2;
-  }
-
-  .doneCrit0,
-  .doneCrit1,
-  .doneCrit2,
-  .doneCrit3 {
-    stroke: #b1361b;
-    fill: #bbb;
-    stroke-width: 2;
-    cursor: pointer;
-    shape-rendering: crispEdges;
-  }
-
-  .doneCritText0,
-  .doneCritText1,
-  .doneCritText2,
-  .doneCritText3 {
-    fill: #333 !important;
-  }
-
-  .activeCritText0,
-  .activeCritText1,
-  .activeCritText2,
-  .activeCritText3 {
-    fill: #333 !important;
-  }
-
-  .titleText {
-    text-anchor: middle;
-    font-size: 18px;
-    fill: #333;
-  }
-
-  g.classGroup text {
-    fill: #999;
-    stroke: none;
-    font-family: 'trebuchet ms', verdana, arial;
-    font-size: 10px;
-  }
-
-  g.classGroup rect {
-    fill: #eee;
-    stroke: #999;
-  }
-
-  g.classGroup line {
-    stroke: #999;
-    stroke-width: 1;
-  }
-
-  .classLabel .box {
-    stroke: none;
-    stroke-width: 0;
-    fill: #eee;
-    opacity: 0.5;
-  }
-
-  .classLabel .label {
-    fill: #999;
-    font-size: 10px;
-  }
-
-  .relation {
-    stroke: #999;
-    stroke-width: 1;
-    fill: none;
-  }
-
-  #compositionStart {
-    fill: #999;
-    stroke: #999;
-    stroke-width: 1;
-  }
-
-  #compositionEnd {
-    fill: #999;
-    stroke: #999;
-    stroke-width: 1;
-  }
-
-  #aggregationStart {
-    fill: #eee;
-    stroke: #999;
-    stroke-width: 1;
-  }
-
-  #aggregationEnd {
-    fill: #eee;
-    stroke: #999;
-    stroke-width: 1;
-  }
-
-  #dependencyStart {
-    fill: #999;
-    stroke: #999;
-    stroke-width: 1;
-  }
-
-  #dependencyEnd {
-    fill: #999;
-    stroke: #999;
-    stroke-width: 1;
-  }
-
-  #extensionStart {
-    fill: #999;
-    stroke: #999;
-    stroke-width: 1;
-  }
-
-  #extensionEnd {
-    fill: #999;
-    stroke: #999;
-    stroke-width: 1;
-  }
-
-  .commit-id,
-  .commit-msg,
-  .branch-label {
-    fill: lightgrey;
-    color: lightgrey;
-  }
-}
-
-.app--dark .mermaid {
-
-  /* Flowchart variables */
-  /* Sequence Diagram variables */
-  /* Gantt chart variables */
-  .label {
-    color: #323D47;
-  }
-
-  .node rect,
-  .node circle,
-  .node ellipse,
-  .node polygon {
-    fill: #BDD5EA;
-    stroke: purple;
-    stroke-width: 1px;
-  }
-
-  .node.clickable {
-    cursor: pointer;
-  }
-
-  .arrowheadPath {
-    fill: lightgrey;
-  }
-
-  .edgePath .path {
-    stroke: lightgrey;
-    stroke-width: 1.5px;
-  }
-
-  .edgeLabel {
-    background-color: #e8e8e8;
-  }
-
-  .cluster rect {
-    fill: #6D6D65 !important;
-    stroke: rgba(255, 255, 255, 0.25) !important;
-    stroke-width: 1px !important;
-  }
-
-  .cluster text {
-    fill: #F9FFFE;
-  }
-
-  div.mermaidTooltip {
-    position: absolute;
-    text-align: center;
-    max-width: 200px;
-    padding: 2px;
-    font-family: 'trebuchet ms', verdana, arial;
-    font-size: 12px;
-    background: #6D6D65;
-    border: 1px solid rgba(255, 255, 255, 0.25);
-    border-radius: 2px;
-    pointer-events: none;
-    z-index: 100;
-  }
-
-  .actor {
-    stroke: #81B1DB;
-    fill: #BDD5EA;
-  }
-
-  text.actor {
-    fill: black;
-    stroke: none;
-  }
-
-  .actor-line {
-    stroke: lightgrey;
-  }
-
-  .messageLine0 {
-    stroke-width: 1.5;
-    stroke-dasharray: '2 2';
-    marker-end: 'url(#arrowhead)';
-    stroke: lightgrey;
-  }
-
-  .messageLine1 {
-    stroke-width: 1.5;
-    stroke-dasharray: '2 2';
-    stroke: lightgrey;
-  }
-
-  #arrowhead {
-    fill: lightgrey;
-  }
-
-  #crosshead path {
-    fill: lightgrey !important;
-    stroke: lightgrey !important;
-  }
-
-  .messageText {
-    fill: lightgrey;
-    stroke: none;
-  }
-
-  .labelBox {
-    stroke: #81B1DB;
-    fill: #BDD5EA;
-  }
-
-  .labelText {
-    fill: lightgrey;
-    stroke: none;
-  }
-
-  .loopText {
-    fill: lightgrey;
-    stroke: none;
-  }
-
-  .loopLine {
-    stroke-width: 2;
-    stroke-dasharray: '2 2';
-    marker-end: 'url(#arrowhead)';
-    stroke: #81B1DB;
-  }
-
-  .note {
-    stroke: rgba(255, 255, 255, 0.25);
-    fill: #fff5ad;
-  }
-
-  .noteText {
-    fill: black;
-    stroke: none;
-    font-family: 'trebuchet ms', verdana, arial;
-    font-size: 14px;
-  }
-
-  /** Section styling */
-  .section {
-    stroke: none;
-    opacity: 0.2;
-  }
-
-  .section0 {
-    fill: rgba(255, 255, 255, 0.3);
-  }
-
-  .section2 {
-    fill: #EAE8B9;
-  }
-
-  .section1,
-  .section3 {
-    fill: white;
-    opacity: 0.2;
-  }
-
-  .sectionTitle0 {
-    fill: #F9FFFE;
-  }
-
-  .sectionTitle1 {
-    fill: #F9FFFE;
-  }
-
-  .sectionTitle2 {
-    fill: #F9FFFE;
-  }
-
-  .sectionTitle3 {
-    fill: #F9FFFE;
-  }
-
-  .sectionTitle {
-    text-anchor: start;
-    font-size: 11px;
-  }
-
-  /* Grid and axis */
-  .grid .tick {
-    stroke: lightgrey;
-    opacity: 0.3;
-    shape-rendering: crispEdges;
-  }
-
-  .grid path {
-    stroke-width: 0;
-  }
-
-  /* Today line */
-  .today {
-    fill: none;
-    stroke: #DB5757;
-    stroke-width: 2px;
-  }
-
-  /* Task styling */
-  /* Default task */
-  .task {
-    stroke-width: 2;
-  }
-
-  .taskText {
-    text-anchor: middle;
-    font-size: 11px;
-  }
-
-  .taskTextOutsideRight {
-    fill: #323D47;
-    text-anchor: start;
-    font-size: 11px;
-  }
-
-  .taskTextOutsideLeft {
-    fill: #323D47;
-    text-anchor: end;
-    font-size: 11px;
-  }
-
-  /* Specific task settings for the sections*/
-  .taskText0,
-  .taskText1,
-  .taskText2,
-  .taskText3 {
-    fill: #323D47;
-  }
-
-  .task0,
-  .task1,
-  .task2,
-  .task3 {
-    fill: #BDD5EA;
-    stroke: rgba(255, 255, 255, 0.5);
-  }
-
-  .taskTextOutside0,
-  .taskTextOutside2 {
-    fill: lightgrey;
-  }
-
-  .taskTextOutside1,
-  .taskTextOutside3 {
-    fill: lightgrey;
-  }
-
-  /* Active task */
-  .active0,
-  .active1,
-  .active2,
-  .active3 {
-    fill: #81B1DB;
-    stroke: rgba(255, 255, 255, 0.5);
-  }
-
-  .activeText0,
-  .activeText1,
-  .activeText2,
-  .activeText3 {
-    fill: #323D47 !important;
-  }
-
-  /* Completed task */
-  .done0,
-  .done1,
-  .done2,
-  .done3 {
-    stroke: grey;
-    fill: lightgrey;
-    stroke-width: 2;
-  }
-
-  .doneText0,
-  .doneText1,
-  .doneText2,
-  .doneText3 {
-    fill: #323D47 !important;
-  }
-
-  /* Tasks on the critical line */
-  .crit0,
-  .crit1,
-  .crit2,
-  .crit3 {
-    stroke: #E83737;
-    fill: #E83737;
-    stroke-width: 2;
-  }
-
-  .activeCrit0,
-  .activeCrit1,
-  .activeCrit2,
-  .activeCrit3 {
-    stroke: #E83737;
-    fill: #81B1DB;
-    stroke-width: 2;
-  }
-
-  .doneCrit0,
-  .doneCrit1,
-  .doneCrit2,
-  .doneCrit3 {
-    stroke: #E83737;
-    fill: lightgrey;
-    stroke-width: 2;
-    cursor: pointer;
-    shape-rendering: crispEdges;
-  }
-
-  .doneCritText0,
-  .doneCritText1,
-  .doneCritText2,
-  .doneCritText3 {
-    fill: #323D47 !important;
-  }
-
-  .activeCritText0,
-  .activeCritText1,
-  .activeCritText2,
-  .activeCritText3 {
-    fill: #323D47 !important;
-  }
-
-  .titleText {
-    text-anchor: middle;
-    font-size: 18px;
-    fill: #323D47;
-  }
-
-  g.classGroup text {
-    fill: purple;
-    stroke: none;
-    font-family: 'trebuchet ms', verdana, arial;
-    font-size: 10px;
-  }
-
-  g.classGroup rect {
-    fill: #BDD5EA;
-    stroke: purple;
-  }
-
-  g.classGroup line {
-    stroke: purple;
-    stroke-width: 1;
-  }
-
-  .classLabel .box {
-    stroke: none;
-    stroke-width: 0;
-    fill: #BDD5EA;
-    opacity: 0.5;
-  }
-
-  .classLabel .label {
-    fill: purple;
-    font-size: 10px;
-  }
-
-  .relation {
-    stroke: purple;
-    stroke-width: 1;
-    fill: none;
-  }
-
-  #compositionStart {
-    fill: purple;
-    stroke: purple;
-    stroke-width: 1;
-  }
-
-  #compositionEnd {
-    fill: purple;
-    stroke: purple;
-    stroke-width: 1;
-  }
-
-  #aggregationStart {
-    fill: #BDD5EA;
-    stroke: purple;
-    stroke-width: 1;
-  }
-
-  #aggregationEnd {
-    fill: #BDD5EA;
-    stroke: purple;
-    stroke-width: 1;
-  }
-
-  #dependencyStart {
-    fill: purple;
-    stroke: purple;
-    stroke-width: 1;
-  }
-
-  #dependencyEnd {
-    fill: purple;
-    stroke: purple;
-    stroke-width: 1;
-  }
-
-  #extensionStart {
-    fill: purple;
-    stroke: purple;
-    stroke-width: 1;
-  }
-
-  #extensionEnd {
-    fill: purple;
-    stroke: purple;
-    stroke-width: 1;
-  }
-
-  .commit-id,
-  .commit-msg,
-  .branch-label {
-    fill: lightgrey;
-    color: lightgrey;
-  }
-}