#3395 Renabling the error graph which is rendered on error

This commit is contained in:
Knut Sveidqvist 2022-09-02 14:05:31 +02:00
parent 98f37d64ea
commit 5584fef1b0
7 changed files with 74 additions and 11 deletions

View File

@ -35,8 +35,14 @@
<body>
<div class="mermaid2" style="width: 50%;">
flowchart LR
a ---
</div>
<div class="mermaid" style="width: 50%;">
flowchart LR
a2 ---
</div>
<div class="mermaid2" style="width: 50%;">
flowchart LR
classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px;
@ -73,7 +79,31 @@ flowchart TD
</div>
<div class="mermaid" style="width: 50%;">
flowchart TD
id
release-branch[Create Release Branch]:::relClass
develop-branch[Update Develop Branch]:::relClass
github-release-draft[GitHub Release Draft]:::relClass
trigger-pipeline[Trigger Jenkins pipeline]:::fixClass
github-release[GitHub Release]:::postClass
build-ready --> release-branch
build-ready --> develop-branch
release-branch --> jenkins-release-build
jenkins-release-build --> github-release-draft
jenkins-release-build --> install-release
install-release --> verify-release
jenkins-release-build --> announce
github-release-draft --> github-release
verify-release --> verify-check
verify-check -- Yes --> github-release
verify-check -- No --> release-fix
release-fix --> release-branch-pr
verify-check -- No --> delete-artifacts
release-branch-pr --> trigger-pipeline
delete-artifacts --> trigger-pipeline
trigger-pipeline --> jenkins-release-build
</div>
<div class="mermaid2" style="width: 50%;">
flowchart LR
@ -356,6 +386,11 @@ function clickByFlow(elemName) {
document.getElementsByTagName('body')[0].appendChild(div);
}
mermaid.parseError = function (err, hash) {
console.error('In parse error:');
console.error(err);
};
</script>
</body>
</html>

View File

@ -31,6 +31,9 @@ const detectType = function (text, cnf) {
return 'c4';
}
if (text === 'error') {
return 'error';
}
if (text.match(/^\s*sequenceDiagram/)) {
return 'sequence';
}

View File

@ -7,6 +7,7 @@ import classRendererV2 from '../diagrams/class/classRenderer-v2';
import classParser from '../diagrams/class/parser/classDiagram';
import erDb from '../diagrams/er/erDb';
import erRenderer from '../diagrams/er/erRenderer';
import errorRenderer from '../diagrams/error/errorRenderer';
import erParser from '../diagrams/er/parser/erDiagram';
import flowDb from '../diagrams/flowchart/flowDb';
import flowRenderer from '../diagrams/flowchart/flowRenderer';
@ -54,6 +55,13 @@ const diagrams = {
classDb.clear();
},
},
// Special diagram with error messages but setup as a regular diagram
error: {
db: {},
renderer: errorRenderer,
parser: { parser: { yy: {} }, parse: () => {} },
init: () => {},
},
classDiagram: {
db: classDb,
renderer: classRendererV2,

View File

@ -1,6 +1,6 @@
/** Created by knut on 14-12-11. */
import { select } from 'd3';
import { log } from './logger';
import { log } from '../../logger';
const conf = {};
@ -20,10 +20,11 @@ export const setConf = function (cnf) {
/**
* Draws a an info picture in the tag with id: id based on the graph definition in text.
*
* @param _txt
* @param {string} id The text for the error
* @param {string} ver The version
*/
export const draw = (id, ver) => {
export const draw = (_txt, id, ver) => {
try {
log.debug('Renering svg for syntax error\n');
@ -75,22 +76,22 @@ export const draw = (id, ver) => {
g.append('text') // text label for the x axis
.attr('class', 'error-text')
.attr('x', 1240)
.attr('x', 1440)
.attr('y', 250)
.attr('font-size', '150px')
.style('text-anchor', 'middle')
.text('Syntax error in graph');
g.append('text') // text label for the x axis
.attr('class', 'error-text')
.attr('x', 1050)
.attr('x', 1250)
.attr('y', 400)
.attr('font-size', '100px')
.style('text-anchor', 'middle')
.text('mermaid version ' + ver);
svg.attr('height', 100);
svg.attr('width', 400);
svg.attr('viewBox', '768 0 512 512');
svg.attr('width', 500);
svg.attr('viewBox', '768 0 912 512');
} catch (e) {
log.error('Error while rendering info diagram');
log.error(e.message);

View File

@ -0,0 +1,3 @@
const getStyles = () => ``;
export default getStyles;

View File

@ -31,7 +31,7 @@ import stateRenderer from './diagrams/state/stateRenderer';
import stateRendererV2 from './diagrams/state/stateRenderer-v2';
import journeyRenderer from './diagrams/user-journey/journeyRenderer';
import Diagram from './Diagram';
import errorRenderer from './errorRenderer';
import errorRenderer from './diagrams/error/errorRenderer';
import { attachFunctions } from './interactionDb';
import { log, setLogLevel } from './logger';
import getStyles from './styles';
@ -259,7 +259,14 @@ const render = function (id, _txt, cb, container) {
txt = encodeEntities(txt);
// Important that we do not create the diagram until after the directives have been included
const diag = new Diagram(txt);
let diag;
let parseEncounteredException;
try {
diag = new Diagram(txt);
} catch (error) {
diag = new Diagram('error');
parseEncounteredException = error;
}
// Get the tmp element containing the the svg
const element = root.select('#d' + id).node();
const graphType = diag.type;
@ -404,6 +411,10 @@ const render = function (id, _txt, cb, container) {
select(tmpElementSelector).node().remove();
}
if (parseEncounteredException) {
throw parseEncounteredException;
}
return svgCode;
};

View File

@ -1,5 +1,6 @@
import classDiagram from './diagrams/class/styles';
import er from './diagrams/er/styles';
import error from './diagrams/error/styles';
import flowchart from './diagrams/flowchart/styles';
import gantt from './diagrams/gantt/styles';
import gitGraph from './diagrams/git/styles';
@ -26,6 +27,7 @@ const themes = {
info,
pie,
er,
error,
journey,
requirement,
c4,