meta-diagram

A simple diagramming workspace library

Screenshot

Install

npm i @metacell/meta-diagram

// or if you are using yarn

yarn add @metacell/meta-diagram

Usage

const App = () => {
    const classes = useStyles();

    const node1 = new MetaNode('1', 'node1', 'default', new Position(250, 100),
        new Map(Object.entries({color: 'rgb(0,192,255)'})))

    const node2 = new MetaNode('2', 'node2', 'default', new Position(500, 100),
        new Map(Object.entries({color: 'rgb(255,192,0)'})))

    const link3 = new MetaLink('3', 'link3', 'default', '1', 'out', '2', 'in',
        new Map(Object.entries({color: 'rgb(255,192,0)'})))

    const componentsMap = new ComponentsMap(
        new Map(Object.entries({'default': CustomNodeWidget})),
        new Map(Object.entries({'default': CustomLinkWidget}))
    )

    return (
        <div className={classes.main}>
            <MetaDiagram metaNodes={[node1, node2]} metaLinks={[link3]} componentsMap={componentsMap} />
        </div>
    );
};

Props

| name | type | required | description | |---------------|---------------------------------------------------------------------------------------|----------|------------------------------------------------------------------------------------------------| | metaNodes | MetaNode[] | true | array of MetaNode instances to be render | | metaLinks | MetaLink[] | true | array of MetaLink instances to be render | | componentsMap | { nodes: [key: string]: React.elementType, links: [key: string]: React.elementType } | true | dictionary to connect application specific types with React elements to render for those types |

Development

Commands

TSDX scaffolds the library inside /src, and also sets up a Parcel-based playground for it inside /example.

The recommended workflow is to run TSDX in one terminal:

npm start # or yarn start

This builds to /dist and runs the project in watch mode so any edits you save inside src causes a rebuild to /dist.

Then run the example inside another:

cd example
npm i # or yarn to install dependencies
npm start # or yarn start

The default example imports and live reloads whatever is in /dist, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. No symlinking required, we use Parcel's aliasing.

To do a one-off build, use npm run build or yarn build.

To run tests, use npm test or yarn test.

Continuous Integration

GitHub Actions

Two actions are added by default:

• main which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix

Publishing to NPM

1 - Run npm run build

2 - Change the package version on package.json to the semantically adequated new value

3 - Run npm publish --access=public

Built With

react-diagrams