rediagram
Markup and draw your system diagrams with React.
Key Feature
Draw Your System with JSX/TSX
Code your system architecture in the style of React, JSX/TSX.
import React from 'react';
import { PNG, Diagram, GeneralIcon } from 'rediagram';
import { AWS, InvizAWS, EC2, Lambda, Region, SecurityGroup, AutoScalingGroup } from '@rediagram/aws';
PNG(
<Diagram title="My Infra">
<InvizAWS>
<AWS>
<Region name="Asia Pacific (Tokyo)">
<AutoScalingGroup>
<EC2 name="REST API" type="Instance" upstream={['worker4']} />
</AutoScalingGroup>
<SecurityGroup>
<Lambda name="worker4" type="Lambda Function" upstream={['worker5', 'worker6']} />
<Lambda name="worker5" type="Lambda Function" />
<Lambda name="worker6" type="Lambda Function" />
</SecurityGroup>
</Region>
</AWS>
<GeneralIcon name="Browser" type="Client" upstream={['REST API']} />
</InvizAWS>
</Diagram>,
);
Running this file will generate a diagram of MyInfra.rediagram.png
.
$ ts-node MyInfra.rediagram.tsx
You can choose PNG, SVG, or PDF as the output format.
See more examples.
Note: Do you want to execute them all at once?
We provide the rediagramc command that generates images at once by matching the patterns of
**/*.rediagram.tsx
.See @rediagram/cli for more details.
Easy to setup
You can set up a project with one command by using create-rediagram-project.
# yarn create rediagram-project <project-name>
$ yarn create rediagram-project my-rediagram
๐ Creating new rediagram project in my-rediagram.
...
See this document for more information.
Packages
- Core
- rediagram - Common components for drawing diagrams and functions for image output.
- @rediagram/cli - CLI for rediagram.
- @rediagram/cdk - Component Development Kit for rediagram library.
- @rediagram/tsconfig - A base TSConfig for working with rediagram.
- @rediagram/common - Common config and utility for rediagram.
- Component Libraries
- @rediagram/aws - Components for drawing AWS diagrams.
- @rediagram/gcp - Components for drawing GCP diagrams.
- @rediagram/firebase - Components for drawing Firebase diagrams.
- etc,
- We have no plans yet, but welcome contributions.
- Miscellaneous
- create-rediagram-project - Starter kit for rediagram.
- @rediagram/docker-runtime - rediagram runtime for Docker.
- Examples
Requirement
This project requires Graphviz. If you don't have it installed, install it here.
Contributors
Thanks goes to these wonderful people (emoji key):
Yuki Yamazaki ๐ป ๐ ๐จ ๐ก |
odd ๐ |
fealone ๐ค |
78hack ๐ป ๐ |
YukiSasaki ๐ค |
Tatsuya Yamamoto ๐ป |
tubone(Yu Otsubo) ๐ |
mattfirtion ๐ ๐ป |
This project follows the all-contributors specification. Contributions of any kind welcome!
License
This software is released under the MIT License, see LICENSE.