Programmable Diagram and Infrastructure as Code with React
Diagram as Code
powered by draw.io

app.tsx
export default () => (
<WebApp>
<Client />
<Cloud>
<PublicSubnet>
<LoadBalancer />
<Firewall />
</PublicSubnet>
<PrivateSubnet>
<Application />
<Postgres />
</PrivateSubnet>
</Cloud>
</WebApp>
)
Infrastructure as Code
supports

Instead of writing
HashiCorp configuration language (HCL)
You use full-fledged
programming language TypeScript
powered by
stack.tf.json
// Rendered from app.tsx
{
"terraform": {
"required_providers": {
"aws": {
"source": "aws",
"version": "6.28.0"
...
"resource": {
"aws_subnet": {
"aws_subnet_publicsubnet": {
"cidr_block": "10.0.0.0/16"
...
"aws_db_instance": {
"aws_db_instance_postgres": {
"engine": "postgres"
}
}
}
}
Documentation as Code
You get Zero configuration site like this for free
powered by docusaurus.io