Markup and draw your system diagrams with React.
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.tsxYou 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.
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.
- 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
This project requires Graphviz. If you don't have it installed, install it here.
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!
This software is released under the MIT License, see LICENSE.