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.

MyInfra.rediagram.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

MyInfra

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
- Gallery

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 🐛 💻