react-to-uml

Visualize your react components tree with uml diagram

It is appropriate to your project if it uses babel and webpack.

Install

npm i react-to-uml

Connect to your project

// webpack.base.ts
import { makePlugins } from 'react-to-uml';

const rootPath = process.cwd();
const packagesPaths = new RegExp(rootPath + '/(packages)');
const entryFileName = rootPath + '/packages/app/client.js';
const gatheredComponentsFileName = `${rootPath}/build/assets/gatheredComponentsByFileName.json`;
const outUmlFileName = `${rootPath}/build/assets/treeComponentsUML.json`;

const { babelPlugin, webpackPlugin } = makePlugins({
  packagesPaths,
  entryFileName,
  gatheredComponentsFileName,
  outUmlFileName,
});

export default {
  entry: './packages/app/client.js',
  plugins: [new HtmlWebpackPlugin({ template: './public/index.html' }), webpackPlugin],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'build'),
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx', '...'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: [babelPlugin],
            presets: [
              ['@babel/preset-typescript'],
              ['@babel/preset-react', { runtime: 'automatic' }],
              ['@babel/preset-env'],
            ],
          },
        },
      },
    ],
  },
} as Configuration;

After build your project

1. You will get the treeComponentsUML.uml file where will be stored your diagram
2. On a small project, you can test it here
3. But to visualize it for the real project the simplest way is to use the plantUML java library
4. Download the jar file here
5. Download the graphviz it is needed for the kind of diagrams generated by the library
6. Run java -Xmx2G -jar plantuml-1.2023.11.jar ./build/assets/treeComponentsUML.uml -tsvg -verbose -t4 (more CLI params here)
7. Use your svg file. It is possible to render other formats (more CLI params here)

Extra options

acceptableExts?: string[];

by default ['jsx', 'js', 'tsx', 'ts'] - files in which library will looking for the jsx

isGroupByParentDirNeeded?: boolean;

by default false - grouping your components by root dir, e.g. for monorepo with packages root dir it will group it like in the picture below

repetitiveCountForRemoveFromTree?: number;

by default 4 - to adjust your zoom of view, components with a count of repetitive more than this param will be removed from the diagram.

Troubleshooting

To turn on extra logs in this library use --debug with your build script.

npm run build --debug

What is next?

Once you gathered the data from your code base, just imagine what you could do in the next step. This library right now just organizes the process of traverse, so it is possible to add logic into the library and gather extra data on the way like:

1. Test coverage for each file and component
2. Size of your files and components
3. Component names into files (if you use an approach with multiple components in one file)
4. Something else
5. Render it with the interactive like d3.js with the real-time input search filter, and highlights of the arcs when you select one of the nodes