Skip to content

Commit 58f1014

Browse files
whyboriswhyboris
committed
trying Mermaid-JS
1 parent 06c660c commit 58f1014

13 files changed

+576
-5
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ Suggestions or PRs for how to improve this CLI are very welcome 🙇
3333
- [Matteo Abrate](https://observablehq.com/@nitaku/tangled-tree-visualization-ii) for the _tangled tree visualization_
3434
- [Mike Bostock](https://observablehq.com/@d3/arc-diagram) for the _arc diagram_
3535
- [GraphViz](https://graphviz.org/), [node-graphviz](https://github.com/glejeune/node-graphviz), and [d3-graphviz](https://github.com/magjac/d3-graphviz) for the simple graph
36+
- [Mermaid-JS](https://github.com/mermaid-js/mermaid) for a way to create a graph
3637
- [Tutorial](https://convincedcoder.com/2019/01/19/Processing-TypeScript-using-TypeScript/) and code for processing TypeScript (AST)
3738
- [Tutorial](https://developer.okta.com/blog/2019/06/18/command-line-app-with-nodejs) for creating a *CLI*
3839
- [TS-Call-Graph](https://github.com/Deskbot/TS-Call-Graph) for inspiration

‎bin/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ var extract_1 = require("./extract");
66
var arc_1 = require("./arc");
77
var cascade_1 = require("./cascade");
88
var graphviz_1 = require("./graphviz");
9+
var mermaid_1 = require("./mermaid");
910
var helper_1 = require("./helper");
1011
var myArgs = process.argv.slice(2);
1112
var onlyTypescript = myArgs.filter(function (file) { return file.endsWith('ts'); });
@@ -48,10 +49,12 @@ function startServer(allFunctions, functionMap) {
4849
app.use('/arc', express.static(path.join(__dirname, '..', 'graphing/arc')));
4950
app.use('/cascade', express.static(path.join(__dirname, '..', 'graphing/cascade')));
5051
app.use('/graphviz', express.static(path.join(__dirname, '..', 'graphing/graphviz')));
52+
app.use('/mermaid', express.static(path.join(__dirname, '..', 'graphing/mermaid')));
5153
app.use('/vendor', express.static(path.join(__dirname, '..', 'graphing/vendor')));
5254
app.get('/arcAPI', function (req, res) { res.json(arc_1.convertForArc(allFunctions, functionMap)); });
5355
app.get('/cascadeAPI', function (req, res) { res.json(cascade_1.convertForCascade(functionMap)); });
5456
app.get('/graphvizAPI', function (req, res) { res.json(graphviz_1.convertForGraphViz(functionMap)); });
57+
app.get('/mermaidAPI', function (req, res) { res.json(mermaid_1.convertForMermaid(functionMap)); });
5558
app.listen(3000);
5659
var filePath = 'http://localhost:3000';
5760
helper_1.showServerRunning(filePath);

‎bin/mermaid.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
"use strict";
2+
exports.__esModule = true;
3+
exports.convertForMermaid = void 0;
4+
function convertForMermaid(functionMap) {
5+
var connections = [];
6+
functionMap.forEach(function (childArr, key) {
7+
childArr.forEach(function (child) {
8+
connections.push(key + '(' + key + ')' + ' --> ' + child + '(' + child + ')');
9+
});
10+
});
11+
return connections;
12+
}
13+
exports.convertForMermaid = convertForMermaid;

‎graphing/graphviz/d3-graphviz.js.map

-1
This file was deleted.

‎graphing/graphviz/index.html

-3
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,6 @@
33
<head>
44
<title>TypeScript Call Graph</title>
55
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
6-
<style>
7-
8-
</style>
96
</head>
107

118
<body>

‎graphing/graphviz/index.min.js.map

-1
This file was deleted.

‎graphing/mermaid/index.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<html lang="en">
2+
<head>
3+
<title>Mermaid</title>
4+
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
5+
<style>
6+
.label {
7+
font-size: 14px;
8+
}
9+
</style>
10+
<meta charset="utf-8">
11+
</head>
12+
13+
<body>
14+
15+
<div id="graphDiv"></div>
16+
17+
<script src="/vendor/mermaid.min.js"></script>
18+
<script>
19+
mermaid.initialize({ startOnLoad: false });
20+
21+
const url = '../mermaidAPI';
22+
fetch(url).then((response) => {
23+
24+
response.text().then((data) => {
25+
const element = document.querySelector("#graphDiv");
26+
27+
let graphDefinition = 'graph LR \n';
28+
graphDefinition = graphDefinition + JSON.parse(data).join('\n');
29+
30+
const insertSvg = (svgCode) => {
31+
element.innerHTML = svgCode;
32+
};
33+
34+
mermaid.mermaidAPI.render('hello', graphDefinition, insertSvg);
35+
})
36+
});
37+
</script>
38+
</body>
39+
40+
</html>

‎graphing/vendor/mermaid.min.js

+43
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { processFiles } from './extract';
77
import { convertForArc } from './arc';
88
import { convertForCascade } from './cascade';
99
import { convertForGraphViz } from './graphviz';
10+
import { convertForMermaid } from './mermaid';
1011
import { showHelpMessage, showServerRunning } from './helper';
1112

1213
const myArgs = process.argv.slice(2);
@@ -63,11 +64,13 @@ function startServer(allFunctions: string[], functionMap: Map<string, string[]>)
6364
app.use('/arc', express.static(path.join(__dirname, '..', 'graphing/arc')));
6465
app.use('/cascade', express.static(path.join(__dirname, '..', 'graphing/cascade')));
6566
app.use('/graphviz', express.static(path.join(__dirname, '..', 'graphing/graphviz')));
67+
app.use('/mermaid', express.static(path.join(__dirname, '..', 'graphing/mermaid')));
6668
app.use('/vendor', express.static(path.join(__dirname, '..', 'graphing/vendor')));
6769

6870
app.get('/arcAPI', function (req, res) { res.json(convertForArc(allFunctions, functionMap)) });
6971
app.get('/cascadeAPI', function (req, res) { res.json(convertForCascade(functionMap)) });
7072
app.get('/graphvizAPI', function (req, res) { res.json(convertForGraphViz(functionMap)) });
73+
app.get('/mermaidAPI', function (req, res) { res.json(convertForMermaid(functionMap)) });
7174

7275
app.listen(3000)
7376

‎mermaid.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export function convertForMermaid(functionMap: Map<string, string[]>) {
2+
3+
const connections = [];
4+
5+
functionMap.forEach((childArr, key) => {
6+
childArr.forEach((child) => {
7+
connections.push(key + '(' + key + ')' + ' --> ' + child + '(' + child + ')')
8+
});
9+
});
10+
11+
return connections;
12+
}
13+
14+

0 commit comments

Comments
 (0)