GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-02-04 07:13:25 +08:00
Code Issues Projects Releases Wiki Activity

Started railroad diagrams

Browse Source
This commit is contained in:
Nikolay Rozhkov 2023-07-06 21:57:47 +03:00
parent b87f1f2098
commit 6a89e28e1e
14 changed files with 230 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
__mocks__/railroadRenderer.js Normal file
View File

@ -0,0 +1,13 @@
/**
* Mocked Railroad diagram renderer
*/
import { vi } from 'vitest';
export const draw = vi.fn().mockImplementation(() => {
return '';
});
export default {
draw,
};

0
cypress/integration/rendering/railroad.spec.ts Normal file
View File

4
demos/index.html
View File

@ -7,7 +7,6 @@
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
@ -78,6 +77,9 @@
<li>
<h2><a href="./sankey.html">Sankey</a></h2>
</li>
<li>
<h2><a href="./railroad.html">Railroad</a></h2>
</li>
</ul>
</body>
</html>

32
demos/railroad.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Railroad Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<h1>Railroad diagram demos</h1>
<h2>Example</h2>
<pre class="mermaid">
railroad-beta
</pre>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'default',
logLevel: 3,
securityLevel: 'loose',
railroad: {},
});
</script>
</body>
</html>

4
packages/mermaid/src/diagram-api/diagram-orchestration.ts
View File

@ -21,6 +21,7 @@ import mindmap from '../diagrams/mindmap/detector.js';
import sankey from '../diagrams/sankey/sankeyDetector.js';
import { registerLazyLoadedDiagrams } from './detectType.js';
import { registerDiagram } from './diagramAPI.js';
import { railroad } from '../diagrams/railroad/railroadDetector.js';
let hasLoadedDiagrams = false;
export const addDiagrams = () => {
@ -81,6 +82,7 @@ export const addDiagrams = () => {
state,
journey,
quadrantChart,
sankey
sankey,
railroad
);
};

13
packages/mermaid/src/diagrams/railroad/railroadDB.ts Normal file
View File

@ -0,0 +1,13 @@
import type { RailroadDB } from './railroadTypes.js';
import {
clear as commonClear,
} from '../../commonDb.js';
const clear = (): void => {
commonClear();
};
export const db: RailroadDB = {
clear,
};

22
packages/mermaid/src/diagrams/railroad/railroadDetector.ts Normal file
View File

@ -0,0 +1,22 @@
import type {
DiagramDetector,
DiagramLoader,
ExternalDiagramDefinition,
} from '../../diagram-api/types.js';
const id = 'railroad';
const detector: DiagramDetector = (txt) => {
return /^\s*railroad-beta/.test(txt);
};
const loader: DiagramLoader = async () => {
const { diagram } = await import('./railroadDiagram.js');
return { id, diagram };
};
export const railroad: ExternalDiagramDefinition = {
id,
detector,
loader,
};

15
packages/mermaid/src/diagrams/railroad/railroadDiagram.ts Normal file
View File

@ -0,0 +1,15 @@
import { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: jison doesn't export types
import parser from './railroadParser.jison';
import { db } from './railroadDB.js';
import renderer from './railroadRenderer.js';
// import { prepareTextForParsing } from './railroadUtils.js';
// const originalParse = parser.parse.bind(parser);
// parser.parse = (text: string) => originalParse(prepareTextForParsing(text));
export const diagram: DiagramDefinition = {
parser,
db,
renderer,
};

46
packages/mermaid/src/diagrams/railroad/railroadParser.jison Normal file
View File

@ -0,0 +1,46 @@
/*
Mermaid
https://mermaid.js.org/
MIT license.
*/
//------------------
// Lexical analysis
//------------------
%lex
// Pre lexer steps
%{
%}
// Start conditions
%x diagram
// Definitions
DIAGRAM_KEYWORD "railroad-beta"
%%
// Tokenization
<INITIAL>DIAGRAM_KEYWORD { this.pushState('diagram'); return 'DIAGRAM_KEYWORD'; }
<INITIAL,diagram>\s+ {}
<INITIAL,diagram><<EOF>> { return 'EOF' } // match end of file
/lex
//-----------------
// Syntax analysis
//-----------------
// Configuration
%start start
%%
// Grammar
start: DIAGRAM_KEYWORD EOF;

52
packages/mermaid/src/diagrams/railroad/railroadRenderer.ts Normal file
View File

@ -0,0 +1,52 @@
import { Diagram } from '../../Diagram.js';
import * as configApi from '../../config.js';
import type { DrawDefinition, HTML, SVG } from '../../diagram-api/types.js';
import { select } from 'd3';
// import { configureSvgSize } from '../../setupGraphViewbox.js';
// import { Uid } from '../../rendering-util/uid.js';
const fetchSVGElement = (id: string): SVG => {
// Get config
const { securityLevel } = configApi.getConfig();
// Handle root and document for when rendering in sandbox mode
let sandboxElement: HTML | undefined;
let document: Document | null | undefined;
if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id);
document = sandboxElement.nodes()[0].contentDocument;
}
// @ts-ignore - figure out how to assign HTML to document type
const root: HTML = (sandboxElement && document) ? select(document) : select('body');
const svg: SVG = root.select('#' + id);
return svg;
}
/**
* Draws Railroad diagram.
*
* @param text - The text of the diagram
* @param id - The id of the diagram which will be used as a DOM element id¨
* @param _version - Mermaid version from package.json
* @param diagObj - A standard diagram containing the db and the text and type etc of the diagram
*/
export const draw: DrawDefinition = (text: string, id: string, _version: string, diagObj: Diagram): void => {
const svg: SVG = fetchSVGElement(id);
// const defaultRailroadConfig = configApi!.defaultConfig!.railroad!;
// Establish svg dimensions and get width and height
//
// const width = conf?.width || defaultRailroadConfig.width!;
// const height = conf?.height || defaultRailroadConfig.width!;
// const useMaxWidth = conf?.useMaxWidth || defaultRailroadConfig.useMaxWidth!;
// configureSvgSize(svg, height, width, useMaxWidth);
// Compute layout
//
};
export default {
draw,
};

25
packages/mermaid/src/diagrams/railroad/railroadTests.spec.ts Normal file
View File

@ -0,0 +1,25 @@
// @ts-ignore: jison doesn't export types
import railroad from './railroad.jison';
// import { prepareTextForParsing } from '../railroadUtils.js';
import * as fs from 'fs';
import * as path from 'path';
import { cleanupComments } from '../../diagram-api/comments.js';
import { db } from './railroadDB.js';
describe('Railroad diagram', function () {
describe('when parsing an info graph it', function () {
beforeEach(function () {
railroad.parser.yy = db;
railroad.parser.yy.clear();
});
it('parses csv', async () => {
const csv = path.resolve(__dirname, './energy.csv');
const data = fs.readFileSync(csv, 'utf8');
// const graphDefinition = prepareTextForParsing(cleanupComments('railroad-beta\n\n ' + data));
const graphDefinition = cleanupComments('railroad-beta\n\n ' + data);
railroad.parser.parse(graphDefinition);
});
});
});

5
packages/mermaid/src/diagrams/railroad/railroadTypes.ts Normal file
View File

@ -0,0 +1,5 @@
import type { DiagramDB } from '../../diagram-api/types.js';
export interface RailroadDB extends DiagramDB {
clear: () => void;
}

1
packages/mermaid/src/docs/.vitepress/config.ts
View File

@ -144,6 +144,7 @@ function sidebarSyntax() {
{ text: 'Timeline 🔥', link: '/syntax/timeline' },
{ text: 'Zenuml 🔥', link: '/syntax/zenuml' },
{ text: 'Sankey 🔥', link: '/syntax/sankey' },
{ text: 'Railroad 🔥', link: '/syntax/railroad' },
{ text: 'Other Examples', link: '/syntax/examples' },
],
},

0
packages/mermaid/src/docs/syntax/railroad.md Normal file
View File