• Stars
    star
    164
  • Rank 230,032 (Top 5 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 4 years ago
  • Updated 10 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Markup and draw your system diagrams with React.

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.

More Repositories

1

typedoc-plugin-mermaid

A plugin for TypeDoc that generates graphs for mermaid.js diagrams by @mermaid annotation.
TypeScript
27
star
2

ngx-speech-recognition

Angular 5+ speech recognition service (based on browser implementation such as Chrome).
TypeScript
25
star
3

ngx-face-api-js

Angular directives for face detection and face recognition in the browser.
TypeScript
19
star
4

web-csv-toolbox

๐ŸŒŠA CSV Toolbox utilizing Web Standard APIs.
TypeScript
8
star
5

ink-highlight

Highlight component for Ink ๐ŸŒˆ
TypeScript
7
star
6

freebusy

Determine free blocks from a list of events.
TypeScript
5
star
7

setup-graphviz

(Moved to https://github.com/ts-graphviz/setup-graphviz ) GitHub Action to set up Graphviz cross-platform(Linux, macOS, Windows).
JavaScript
4
star
8

connectable-io

POC Stage
TypeScript
4
star
9

ulauncher-vivaldi-profiles

Ulauncher extension for launching Vivaldi using a chosen user profile.
Python
3
star
10

denolize

Transpile the package created for Node into the Deno module.๐Ÿฆ•
TypeScript
3
star
11

ngx-speech-synthesis

Angular 7+ speech synthesis service (based on browser implementation such as Chrome).
TypeScript
3
star
12

typedoc-plugin-nomnoml

A plugin for TypeDoc that generates graphs for nomnoml diagrams by using @nomnoml annotation.
TypeScript
2
star
13

japanese-quiz-app

(PREVIEW) Language education tool for learning Japanese using the language learning method called direct method.
TypeScript
1
star
14

dot-language-perser

(Experimental) A dot language parser to handle AST so that it can be handled by TypeScript.
TypeScript
1
star
15

jest-dynamic

An extension to dynamically switch the Jest test suite according to the environment (such as platform).
TypeScript
1
star
16

mailcatcher

Smtp server and Web view for development on Docker.
Dockerfile
1
star
17

counter

Goใฎuint64ใฎใ‚ซใ‚ฆใƒณใ‚ฟใƒผใ€‚goroutine safeใ‹ใฉใ†ใ‹ใงNใจCใฎๅฎŸ่ฃ…ใ‚’ๅˆ†ใ‘ใฆใ„ใ‚‹ใ€‚
Go
1
star
18

online-casino

TypeScript practice project.
TypeScript
1
star
19

whiteboard

TypeScript
1
star
20

rdbms-inspection

RDBMS inspection environment using devcontainer.
Python
1
star
21

jsonnet-node-loader

A loader that allows Node.js to import Jsonnet settings from an ES Module file.
TypeScript
1
star