https://github.com/danilosampaio/integraph
Create Architecture diagrams from your code.
https://github.com/danilosampaio/integraph
architecture diagram mermaid parser yaml
Last synced: 2 months ago
JSON representation
Create Architecture diagrams from your code.
- Host: GitHub
- URL: https://github.com/danilosampaio/integraph
- Owner: danilosampaio
- License: mit
- Created: 2024-11-29T15:44:49.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-13T21:17:30.000Z (over 1 year ago)
- Last Synced: 2025-07-31T15:32:48.201Z (11 months ago)
- Topics: architecture, diagram, mermaid, parser, yaml
- Language: TypeScript
- Homepage:
- Size: 3.01 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Integraph [](https://codecov.io/github/danilosampaio/integraph)
> Create Architecture diagrams from your code.
## Architecture
## Install
```
npm install -g integraph
```
## Usage
Map integrations adding `@integraph` comments in your source code:
```js
class ECommerce {
/**
* @integraph
* service: e-commerce
* integrations:
* - service: Payment gateway
* edgeDirection: RL
* group: External APIs
*/
processsPayment() {
// ...
}
}
```
Under your project root directory/repository, run the following command:
```
integraph
```
The generated diagram:
It will search for files containing `@integraph` comments and mapping all integrations, and as results it generates the following files under the directory `.integraph`:
- `diagram.js`
- it contains the function `getDiagram` which returns the `mermaid` [architeture diagram](https://mermaid.js.org/syntax/architecture.html).
```
architecture-beta
group externalapis[External APIs]
service ecommerce(server)[e_commerce]
service paymentgateway(server)[Payment gateway] in externalapis
ecommerce:R -[ecommerce__paymentgateway]- L:paymentgateway
```
- `integrations.js`
- it contains the funciton `getIntegrations` which returns a json with all mappend integrations.
```json
[
{
"startPosition":{
"row":1,
"column":4
},
"endPosition":{
"row":8,
"column":7
},
"yaml":{
"service":"e-commerce",
"integrations":[
{
"service":"Payment gateway",
"edgeDirection":"RL",
"group":"External APIs"
}
]
},
"path":"diagrams/__tests__/fixtures/example_01.ts",
"repo":"https://github.com/danilosampaio/integraph/blob/main",
"sourceCode":"class ECommerce { ..."
}
]
```
- `arch.html`
- a html page containing the diagram and a few actions such as `refresh`, `show diagram source`, and `show integrations json`. Addtionally, it makes all edges clickable, adding the ability to open the souce file where the integration is defined.
- `main.css`
- this is the css styles for the page `arch.html`
- `main.js`
- this is the main `js` file which initialize mermaid library, render the diagram, etc.
## Service and Integration Attributes
```js
/**
* @integraph
* service: Service name. e.g Market Place, Payment API
* icon: Icon name. e.g. server, database, logos:google-cloud, vscode-icons:file-type-mermaid
* group: Group name. e.g. External APIs, Auth Services
* integrations: list of integrations
* - service: Service name. e.g Market Place, Payment API
* edgeDirection: direction of the edge. e.g. RL, LR, TB, BT (see https://mermaid.js.org/syntax/architecture.html#edge-direction)
* group: Group name. e.g. External APIs, Auth Services
* groupEdge: true (see https://mermaid.js.org/syntax/architecture.html#edges-out-of-groups)
* arrowedEdge: true (see https://mermaid.js.org/syntax/architecture.html#edges)
*/
```
## Supported languages
### Typescript/javascript
```js
class ECommerce {
/**
* @integraph
* service: e-commerce
* integrations:
* - service: Payment gateway
* edgeDirection: RL
*/
processsPayment() {
// ...
}
}
```
### Java
```java
public class PaymentGateway {
/**
* @integraph
* service: Payment gateway
* group: External APIs
* integrations:
* - service: Bank API
* edgeDirection: RL
* - service: Fraud Detection
*/
public boolean postTransaction() {
// ...
}
}
```
### Python
```python
"""
@integraph
service: Fraud Detection
group: AI Agents
integrations:
- service: Load AI Models
group: AI Agents
"""
def detectFraud():
print("all good!")
```
### Rust
```rust
// @integraph
// service: Load AI Models
// group: AI Agents
// integrations:
// - service: chatgpt
//
fn loadModels() {
// ...
}
```
# Mermaid Architecture Diagram
https://mermaid.js.org/syntax/architecture.html
## Take a look at the available icons
https://icon-sets.iconify.design/logos/
## Registered icons:
https://unpkg.com/@iconify-json/logos@1/icons.json
https://unpkg.com/@iconify-json/ix@1.2.0/icons.json
https://unpkg.com/@iconify-json/vscode-icons@1.2.3/icons.json