[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com) <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-8-orange.svg)](#contributors)
<!-- ALL-CONTRIBUTORS-BADGE:END -->

# 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](./examples/gallery/src/MyInfra.rediagram.tsx)

```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`.

```bash
$ ts-node MyInfra.rediagram.tsx
```

![MyInfra](./examples/gallery/img/MyInfra.rediagram.png)

You can choose PNG, SVG, or PDF as the output format.

See [more examples](./examples/gallery/README.md).

> 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](./packages/cli/README.md) for more details.

### Easy to setup

You can set up a project with one command by using [create-rediagram-project](./packages/create-rediagram-project/README.md).

```bash
# 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](https://kamiazya.github.io/rediagram/docs/getting-started/setup-project).

## Packages

- Core
  - [rediagram](./packages/rediagram/README.md) - Common components for drawing diagrams and functions for image output.
  - [@rediagram/cli](./packages/cli/README.md) - CLI for rediagram.
  - [@rediagram/cdk](./packages/cdk/README.md) - Component Development Kit for rediagram library.
  - [@rediagram/tsconfig](./packages/tsconfig/README.md) - A base TSConfig for working with rediagram.
  - [@rediagram/common](./packages/common/README.md)  - Common config and utility for rediagram.
- Component Libraries
  - [@rediagram/aws](./packages/aws/README.md) - Components for drawing AWS diagrams.
  - [@rediagram/gcp](./packages/gcp/README.md) - Components for drawing GCP diagrams.
  - [@rediagram/firebase](./packages/firebase/README.md) - Components for drawing Firebase diagrams.
  - etc,
    - We have no plans yet, but welcome contributions.
- Miscellaneous
  - [create-rediagram-project](./packages/create-rediagram-project/README.md) - Starter kit for rediagram.
  - [@rediagram/docker-runtime](./docker/README.md) - rediagram runtime for Docker. ![WIP](https://img.shields.io/badge/-WIP-yellow)
- Examples
  - [Gallery](./examples/gallery/README.md)

## Requirement

This project requires Graphviz.
If you don't have it installed, install it [here](https://graphviz.gitlab.io/download/).

## Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tbody>
    <tr>
      <td align="center" valign="top" width="14.28%"><a href="http://blog.kamiazya.tech/"><img src="https://avatars0.githubusercontent.com/u/35218186?v=4?s=100" width="100px;" alt="Yuki Yamazaki"/><br /><sub><b>Yuki Yamazaki</b></sub></a><br /><a href="https://github.com/kamiazya/rediagram/commits?author=kamiazya" title="Code">💻</a> <a href="#content-kamiazya" title="Content">🖋</a> <a href="#design-kamiazya" title="Design">🎨</a> <a href="#example-kamiazya" title="Examples">💡</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/odd12258053"><img src="https://avatars1.githubusercontent.com/u/70652613?v=4?s=100" width="100px;" alt="odd"/><br /><sub><b>odd</b></sub></a><br /><a href="https://github.com/kamiazya/rediagram/issues?q=author%3Aodd12258053" title="Bug reports">🐛</a></td>
      <td align="center" valign="top" width="14.28%"><a href="http://lonesec.com"><img src="https://avatars1.githubusercontent.com/u/57695598?v=4?s=100" width="100px;" alt="fealone"/><br /><sub><b>fealone</b></sub></a><br /><a href="#ideas-fealone" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/kamiazya/rediagram/commits?author=fealone" title="Tests">⚠️</a> <a href="https://github.com/kamiazya/rediagram/issues?q=author%3Afealone" title="Bug reports">🐛</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/78hack"><img src="https://avatars0.githubusercontent.com/u/59414867?v=4?s=100" width="100px;" alt="78hack"/><br /><sub><b>78hack</b></sub></a><br /><a href="https://github.com/kamiazya/rediagram/commits?author=78hack" title="Code">💻</a> <a href="https://github.com/kamiazya/rediagram/issues?q=author%3A78hack" title="Bug reports">🐛</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/tokidrill"><img src="https://avatars3.githubusercontent.com/u/42460318?v=4?s=100" width="100px;" alt="YukiSasaki"/><br /><sub><b>YukiSasaki</b></sub></a><br /><a href="#ideas-tokidrill" title="Ideas, Planning, & Feedback">🤔</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/yamatatsu"><img src="https://avatars0.githubusercontent.com/u/11013683?v=4?s=100" width="100px;" alt="Tatsuya Yamamoto"/><br /><sub><b>Tatsuya Yamamoto</b></sub></a><br /><a href="https://github.com/kamiazya/rediagram/commits?author=yamatatsu" title="Code">💻</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://portfolio.tubone-project24.xyz/"><img src="https://avatars.githubusercontent.com/u/9511227?v=4?s=100" width="100px;" alt="tubone(Yu Otsubo)"/><br /><sub><b>tubone(Yu Otsubo)</b></sub></a><br /><a href="https://github.com/kamiazya/rediagram/issues?q=author%3Atubone24" title="Bug reports">🐛</a></td>
    </tr>
    <tr>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/mattfirtion"><img src="https://avatars.githubusercontent.com/u/250784?v=4?s=100" width="100px;" alt="mattfirtion"/><br /><sub><b>mattfirtion</b></sub></a><br /><a href="https://github.com/kamiazya/rediagram/issues?q=author%3Amattfirtion" title="Bug reports">🐛</a> <a href="https://github.com/kamiazya/rediagram/commits?author=mattfirtion" title="Code">💻</a></td>
    </tr>
  </tbody>
</table>

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors)
specification. Contributions of any kind welcome!

## License

This software is released under the MIT License, see [LICENSE](./LICENSE).