← Back to Learn

Architecture

Structure Components

my-project/
├── src/
│   ├── components/
│   │   ├── Button.js
│   │   └── Header.js
│   └── index.js
├── public/
│   └── index.html
├── package.json
└── README.md

Visualized with Mermaid (rendered on GitHub & this site)

flowchart TD
    root[my-project] --> src[src]
    root --> public[public]
    root --> pkg[package.json]
    root --> readme[README.md]

    src --> components[components]
    src --> index[index.js]

    components --> Button[Button.js]
    components --> Header[Header.js]

    public --> html[index.html]

Treemap

architecture-beta
    group api(cloud)[API]

    service db(database)[Database] in api
    service disk1(disk)[Storage] in api
    service disk2(disk)[Storage] in api
    service server(server)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db