@inscreen/typeorm-uml

typeorm-uml

A command line tool to generate UML diagrams for Typeorm projects. It uses plantuml to render diagrams and outputs an URL to a diagram.

Installation

Install this command as a development dependency to your project:

npm i -D typeorm-uml

Usage

Add a new script to your package.json to be able to run it:

{
    "name": "myproject",
    "scripts": {
        "db:diagram": "typeorm-uml ormconfig.json"
    }
}

Then run npm run db:diagram and you will receive an URL to an image with your diagram. You can use this URL to add to your README file or you can download the image and add it to your repository.

Synopsis

USAGE
  $ typeorm-uml [CONFIGNAME]

ARGUMENTS
  CONFIGNAME  [default: ormconfig.json] Path to the Typeorm config file.

OPTIONS
  -D, --direction=(TB|LR)          [default: TB] Arrows directions. TB=top to bottom, LR=left to right.
  -c, --connection=connection      [default: default] The connection name.
  -d, --download=download          The filename where to download the diagram.
  -e, --exclude=exclude            Comma-separated list of entities to exclude from the diagram.
  -f, --format=(png|svg|txt|puml)  [default: png] The diagram file format.
  -i, --include=include            Comma-separated list of entities to include into the diagram.
  --color=pkey=#aaa                Custom colors to use for the diagram.
  --handwritten                    Whether or not to use handwritten mode.
  --monochrome                     Whether or not to use monochrome colors.
  --plantuml-url=plantuml-url      [default: http://www.plantuml.com/plantuml] URL of the plantuml server to use.
  --with-entity-names-only         Whether or not to display only entity names and hide database table names.
  --with-enum-values               Whether or not to show possible values for the enum type field.
  --with-table-names-only          Whether or not to display only database table names and hide entity names.

Defining custom colors

If you want to override colors used in the diagram, you can do it using --color flag. It accepts the key-value pair where key is an element and value is a color. You can use multiple --color flags to override multiple elements. For example:

typeorm-uml path/to/ormconfig.json --color class.ArrowColor=#ff9900 --color class.BorderColor=#ff9900 --color class.BackgroundColor=#efefef --color column=#ddd

You can use pkey, fkey and column colors to override entity column icons, and class.BackgroundColor, class.BorderColor, class.ArrowColor to override enity class styles.

Typescript

If you use .ts entities in your Typeorm config, then run this command with ts-node like this:

ts-node ./node_modules/.bin/typeorm-uml ormconfig.json

PlantUML

Under the hood, this library uses the PlantUML Language to define diagrams and the official plantuml server to draw it.

In most cases, it's fine to use it without a doubt. However, it's not always the case. If you work on a project that has a strict security level and you can't use the public server, then you can set up your own using the official docker image of PlantUML server and use the --plantuml-url flag to let this library know its location.

Run Programmatically

You can also import the TypeormUml class from this package and build UML diagrams on your own. See this small example:

import { EOL } from 'os';
import { join } from 'path';

import { Direction, Flags, Format, TypeormUml } from 'typeorm-uml';

const configPath = join( __dirname, 'path/to/ormconfig.json' );
const flags: Flags = {
    direction: Direction.LR,
    format: Format.SVG,
    handwritten: true,
};

const typeormUml = new TypeormUml();
typeormUml.build( configPath, flags ).then( ( url ) => {
    process.stdout.write( 'Diagram URL: ' + url + EOL );
} );

Please, pay attention that the TypeormUml::build() method also accepts connection instance itself, so you don't need to compose a configuration file if you don't have one in your project. Here is another small example of how it can be used in the typeorm/typescript-example project:

import { EOL } from 'os';
import { join } from 'path';

import { Direction, Flags, Format, TypeormUml } from 'typeorm-uml';
import { createConnection } from 'typeorm';

createConnection().then( async ( connection ) => {
    const flags: Flags = {
        direction: Direction.LR,
        format: Format.SVG,
        handwritten: true,
    };

    const typeormUml = new TypeormUml();
    const url = await typeormUml.build( connection, flags );

    process.stdout.write( 'Diagram URL: ' + url + EOL );
} );

Example

typeorm/typescript-example

typeorm-uml --format=svg --with-table-names-only

Contribute

Want to help or have a suggestion? Open a new ticket and we can discuss it or submit a pull request.

License

MIT