Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kamiazya/rediagram

Markup and draw your system diagrams with React.
https://github.com/kamiazya/rediagram

diagram diagrams drawing-diagrams graphviz graphviz-dot hacktoberfest npm-package react tsx typescript-library

Last synced: 22 days ago
JSON representation

Markup and draw your system diagrams with React.

Host: GitHub
URL: https://github.com/kamiazya/rediagram
Owner: kamiazya
License: mit
Created: 2020-05-20T12:42:27.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2024-01-17T20:22:33.000Z (10 months ago)
Last Synced: 2024-04-14T13:43:12.185Z (7 months ago)
Topics: diagram, diagrams, drawing-diagrams, graphviz, graphviz-dot, hacktoberfest, npm-package, react, tsx, typescript-library
Language: TypeScript
Homepage: https://rediagram.js.org
Size: 17.9 MB
Stars: 157
Watchers: 4
Forks: 10
Open Issues: 30
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        [![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](https://img.shields.io/badge/all_contributors-8-orange.svg)](#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](./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(

  

    

      

        

          

            

          

          

            

            

            

          

        

      

      

    

  ,

);

```

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 

$ 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)):

  

    

      
_{Yuki Yamazaki}
💻 🖋 🎨 💡

      
_odd
🐛

      
_fealone
🤔 ⚠️ 🐛

      
_78hack
💻 🐛

      
_YukiSasaki
🤔

      
_{Tatsuya Yamamoto}
💻

      
_{tubone(Yu Otsubo)}
🐛

    

    

      
_mattfirtion
🐛 💻

    

  

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