A utility to create MermaidJS
graphs for NX dependency graphs.
We can use this example project to try it out.
If you clone the project, and run nx dep-graph
(or nx graph
) we'd get something similar to:
And below is the generated mermaid.js
graph (you can use controllers!):
graph LR
shared-infrastructure-nestjs-cqrs-events --> shared-domain
lending-infrastructure --> lending-application
lending-infrastructure --> shared-infrastructure-nestjs-cqrs-events
lending-infrastructure --> lending-domain
lending-infrastructure --> shared-domain
lending-application --> lending-domain
lending-application --> shared-domain
lending-application --> catalogue
lending-ui-rest --> lending-application
lending-ui-rest --> lending-domain
lending-ui-rest --> lending-infrastructure
lending-domain --> shared-domain
catalogue --> shared-domain
catalogue --> shared-infrastructure-nestjs-cqrs-events
library --> catalogue
library --> lending-ui-rest
library --> lending-domain
library --> lending-infrastructure
Markdown:
```mermaid graph LR shared-infrastructure-nestjs-cqrs-events --> shared-domain lending-infrastructure --> lending-application lending-infrastructure --> shared-infrastructure-nestjs-cqrs-events lending-infrastructure --> lending-domain lending-infrastructure --> shared-domain lending-application --> lending-domain lending-application --> shared-domain lending-application --> catalogue lending-ui-rest --> lending-application lending-ui-rest --> lending-domain lending-ui-rest --> lending-infrastructure lending-domain --> shared-domain catalogue --> shared-domain catalogue --> shared-infrastructure-nestjs-cqrs-events library --> catalogue library --> lending-ui-rest library --> lending-domain library --> lending-infrastructure ```
To run this tool from your CLI, you need to install it globally with:
npm i -g nx-mermaid-grapher
# or using npx
npx nx-mermaid-grapher -f file.json
Then, run it with -f [PATH]
or --file [PATH]
parameter providing the path for your NX graph JSON output file.
Options:
--help Show help [boolean]
--version Show version number [boolean]
-f, --file NX graph output file (see:
https://nx.dev/packages/nx/documents/dep-graph#file)
[string] [required]
-e, --exclude Exclude a library [array]
Example:
npx nx-mermaid-grapher -f tests/mocks/ddd-example.graph.json
Optionally you can exclude one, or multiple libraries. For example:
npx nx-mermaid-grapher -f tests/mocks/ddd-example.graph.json -e lending-infrastructure -e lending-ui-rest
If you want to extend this library, you may want to instantiate the exposed classes and use them, for example:
import { DiGraph, NXGraphFileLoader, NxMermaidGrapher } from 'nx-mermaid-grapher';
const loader = new NXGraphFileLoader();
const diGraph = new DiGraph();
const core = new NxMermaidGrapher(loader, diGraph);
core.init('path/to/file');
const logMerMaidInMd = (str: string) => `\`\`\`mermaid\n${str}\`\`\``;
console.log(logMerMaidInMd(core.getGraphSnippet()));
Or, if you wish to use a different graph than the default DiGraph (Directed graph), you may implement the IGraph<T>
class and implement your own methods, for example:
import { IGraph } from "nx-mermaid-grapher/dist/data-structures/graph.ds.interface";
class SomeGraph implements IGraph<MyType> {
addNode(nodeVal: MyType): void {
throw new Error("Method not implemented.");
}
addEdge(source: MyType, destination: MyType): void {
throw new Error("Method not implemented.");
}
getGraph(): { [key: string]: MyType[]; } {
throw new Error("Method not implemented.");
}
}
Then just pass it to NxMermaidGrapher
constructor.
import { NXGraphFileLoader, NxMermaidGrapher } from 'nx-mermaid-grapher';
const loader = new NXGraphFileLoader();
const myGraph = new SomeGraph();
const core = new NxMermaidGrapher(loader, myGraph);
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
This project is licensed under the MIT License - see the LICENSE file for details