Nx-mermaid-grapher NPM

nx-mermaid-grapher

A utility to create MermaidJS graphs for NX dependency graphs.

nx-mermaid-grapher

Example

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:

Example Dep graph

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:

Usage

CLI

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

Code

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);