Diagramly

Create diagrams (UML & other types) from React components. Not usable yet, just demonstrating the basic concept using an unit test.

Installing

    npm install -g diagramly

Defining a statechart

Define the diagram as a React component, let's say in diagrams/PageLoadingStatechart.js. Use the built-in Statechart, State and Transition components.

const PageLoadingStateChart = props => (
    <Statechart>
        <State name="Idle" />
        <State name="Loading" />
        <Transition from="Idle" to="Loading" />
    </Statechart>
);
export default PageLoadingStateChart;

Generate the statechart:

    diagramly --create diagrams

Generating diagrams

Run

    diagramly --create <directory that contains diagrams react component>