Skip to content

Latest commit

 

History

History
136 lines (106 loc) · 7.64 KB

README.md

File metadata and controls

136 lines (106 loc) · 7.64 KB

License: MIT code style: prettier PRs Welcome All Contributors

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

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
Yuki Yamazaki

💻 🖋 🎨 💡
odd
odd

🐛
fealone
fealone

🤔 ⚠️ 🐛
78hack
78hack

💻 🐛
YukiSasaki
YukiSasaki

🤔
Tatsuya Yamamoto
Tatsuya Yamamoto

💻
tubone(Yu Otsubo)
tubone(Yu Otsubo)

🐛
mattfirtion
mattfirtion

🐛 💻

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

License

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