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

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

This project follows the all-contributors specification. Contributions of any kind welcome!

License

This software is released under the MIT License, see LICENSE.