craftdot

KO | EN

gitlite — search

#javascript #hacktoberfest #react #ai #typescript #go #android #deep-learning #macos #java #awesome #vue #mcp #open-source

(★ 9)

Get pretty diagram for your architecture/services with an easy way.

craftdot 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Craftdot

Get pretty diagram for your architecture/services with an easy way.

## Features

- nest group
- custom attributes with list or key/vaule
- include from file
- custom style
- support wildcards *

## Install

```bash
$ npm install craftdot
```

## Usage

Render crafdot file and open it on browser by default.

```bash
$ craftdot example/example.craftdot
rebuilding...
server listening on http://127.0.0.1:3200
```

## Example
### Comment

```
// this is a comment
```

### Node

#### single node
```
node1
```

#### node with attributes

the attributes is compatible with [Graphviz](https://www.graphviz.org/doc/info/attrs.html), so you can use any attribute exist in Graphviz.

```
node1[fillcolor: skyblue, style:filled]
```

#### node with details

```
list {
    hosts:
        - 172.16.1.4
        - 172.16.1.5
}

key-vaule {
    domain: "https://service.localdomain"
}

both {
    hosts:
        - 172.16.1.10
        - 172.16.1.11
    domain: "https://service.localdomain"
}

with-attributes [fillcolor: skyblue, style:filled]{
    domain: "https://service.localdomain"
}

```

#### apply attributes to mutiple nodes with wildcrads *

```
node1
node2
other

node*[fillcolor: skyblue, style:filled]
```

### group

one group must contain at least one node or one group.

```
group cluster1 {
    node1
    node2
}
```

#### nest groups

```
group cluster1 {
    node1
    node2
    group sub-cluster1 {
        node1
        node2
    }
}

```

### edge

```
node1
node2
node1 -> node2
```

#### mutiple edge in one line
```
node1
node2
node3

node1 -> node2,node3
```
<img width="265" alt="image" src="https://user-images.githubusercontent.com/7939352/73841693-11213e00-4856-11ea-88c9-9d89a9deccf6.png">

#### edge with attributes
same as node, the attributes is compatible with [Graphviz](https://www.graphviz.org/doc/info/attrs.html), so you can use any attribute exist in Graphviz.

```
node1
node2

node1 -> node2 [label: "hi", color: "red"]
```

#### apply attributes to mutiple edges with wildcrads *
```
node1
node2
node3
db

node1,node2,node3 -> db
* -> db [color: red]
```
<img width="313" alt="image" src="https://user-images.githubusercontent.com/7939352/73842052-d075f480-4856-11ea-981e-8dd8b1cce49b.png">

### include

```
// node.craftdot
node1
node2
```

```
// edge.craftdot
node1 -> node2
```

```
// include.craftdot
include {"node.craftdot"}
include {"edge.craftdot"}
```

craftdot

craftdot 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

craftdot

craftdot 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README