# ASCII diagram node shape catalogue

Use a JSON node's `shape` field, or Mermaid's `N@{shape: doc, label: "Read item"}`.
These examples use JSON so the exact public shape name appears beside its output.
Shapes carry meaning through outlines, independent of color.

## Basic and semantic shapes



**rect**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "rect",
      shape: "rect"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
           ┌──────┐           
           │ rect │           
           └──────┘           
```




**rounded**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "rounded",
      shape: "rounded"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
         ╭─────────╮          
         │ rounded │          
         ╰─────────╯          
```




**diamond**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "diamond",
      shape: "diamond"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
        ╭───────────╮         
        │ ◆ diamond │         
        ╰───────────╯         
```




**circle**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "circle",
      shape: "circle"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
          ◜◠◠◠◠◠◠◠◠◝          
          │ circle │          
          ◟◡◡◡◡◡◡◡◡◞          
```




**subroutine**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "subroutine",
      shape: "subroutine"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
       ┌──────────────┐       
       ││ subroutine ││       
       └──────────────┘       
```




**asymmetric**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "asymmetric",
      shape: "asymmetric"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
        ┌────────────╲        
        │ asymmetric │        
        └────────────╱        
```




**stadium**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "stadium",
      shape: "stadium"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
         ◜─────────◝          
         │ stadium │          
         ◟─────────◞          
```




**cylinder**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "cylinder",
      shape: "cylinder"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
         ◜──────────◝         
         │ cylinder │         
         ◟──────────◞         
```




**point**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "*",
      shape: "point"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
              *               
```




**compartment**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "compartment",
      shape: "compartment",
      compartments: [
        ["+id: string"],
        ["+save()"]
      ]
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
       ┌─────────────┐        
       │ compartment │        
       ├─────────────┤        
       │ +id: string │        
       ├─────────────┤        
       │ +save()     │        
       └─────────────┘        
```




**cloud**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "cloud",
      shape: "cloud"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
          ╭◠◠◠◠◠◠◠╮           
          │ cloud │           
          ╰◡◡◡◡◡◡◡╯           
```




**bang**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "bang",
      shape: "bang"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
           *╱╲╱╲╱╲*           
           │ bang │           
           *╲╱╲╱╲╱*           
```




**hexagon**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "hexagon",
      shape: "hexagon"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
         ╱─────────╲          
         ❬ hexagon ❭          
         ╲─────────╱          
```



## Mermaid catalogue shapes

Catalogue names below work in JSON and in Mermaid shape metadata.



**doc**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "doc",
      shape: "doc"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
          ┌───────┐           
          │  doc  │           
          ╰◡◡◡◡◡◡◡╯           
```




**docs**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "docs",
      shape: "docs"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
           ┌──────┐           
          ┌──────┐│           
          │ docs │┘           
          ╰◡◡◡◡◡◡╯            
```




**st-rect**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "st-rect",
      shape: "st-rect"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
          ┌─────────┐         
         ┌─────────┐│         
         │ st-rect │┘         
         └─────────┘          
```




**tag-doc**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "tag-doc",
      shape: "tag-doc"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
        ┌───────────┐         
        │ tag-doc ◇ │         
        ╰◡◡◡◡◡◡◡◡◡◡◡╯         
```




**notch-rect**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "notch-rect",
      shape: "notch-rect"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
         ╱───────────┐        
        ╱ notch-rect │        
        └────────────┘        
```




**div-rect**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "div-rect",
      shape: "div-rect"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
         ┌──────────┐         
         ├ div-rect ┤         
         └──────────┘         
```




**lin-rect**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "lin-rect",
      shape: "lin-rect"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
        ┌─┬──────────┐        
        │ │ lin-rect │        
        └─┴──────────┘        
```




**tag-rect**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "tag-rect",
      shape: "tag-rect"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
        ┌────────────┐        
        │ tag-rect ◇ │        
        └────────────┘        
```




**lean-r**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "lean-r",
      shape: "lean-r"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
           ╱────────╱         
          ╱ lean-r ╱          
         ╱────────╱           
```




**lean-l**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "lean-l",
      shape: "lean-l"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
         ╲────────╲           
          ╲ lean-l ╲          
           ╲────────╲         
```




**trap-t**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "trap-t",
      shape: "trap-t"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
         ────────────         
         ╲  trap-t  ╱         
          ╲────────╱          
```




**trap-b**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "trap-b",
      shape: "trap-b"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
          ╱────────╲          
         ╱  trap-b  ╲         
         ────────────         
```




**notch-pent**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "notch-pent",
      shape: "notch-pent"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
        ╱────────────╲        
       │  notch-pent  │       
       └──────────────┘       
```




**delay**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "delay",
      shape: "delay"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
          ┌───────╮           
          │ delay │           
          └───────╯           
```




**bow-rect**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "bow-rect",
      shape: "bow-rect"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
         ╲──────────╱         
          )bow-rect(          
         ╱──────────╲         
```




**curv-trap**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "curv-trap",
      shape: "curv-trap"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
         ╱──────────╮         
        ( curv-trap │         
         ╲──────────╯         
```




**tri**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "tri",
      shape: "tri"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
              ╱╲              
             ╱  ╲             
            ╱    ╲            
           ╱ tri  ╲           
           ────────           
```




**flip-tri**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "flip-tri",
      shape: "flip-tri"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
         ────────────         
         ╲          ╱         
          ╲        ╱          
           flip-tri           
            ╲    ╱            
             ╲  ╱             
              ╲╱              
```




**hourglass**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "hourglass",
      shape: "hourglass"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
        ╲───────────╱         
         )hourglass(          
        ╱───────────╲         
```




**bolt**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "bolt",
      shape: "bolt"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
         ┌─────────┐          
         │ ╲╱ bolt │          
         └─────────┘          
```




**flag**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "flag",
      shape: "flag"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
           ╭◠◠◠◠◠◠╮           
           │ flag │           
           ╰◡◡◡◡◡◡╯           
```




**dbl-circ**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "dbl-circ",
      shape: "dbl-circ"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
        ╔════════════╗        
        ║( dbl-circ )║        
        ╚════════════╝        
```




**cross-circ**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "cross-circ",
      shape: "cross-circ"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
        (╳) cross-circ        
```




**fr-circ**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "fr-circ",
      shape: "fr-circ"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
        ┌───┐                 
        │ ○ │ fr-circ         
        └───┘                 
```




**f-circ**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "f-circ",
      shape: "f-circ"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
           ● f-circ           
```




**sm-circ**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "sm-circ",
      shape: "sm-circ"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
          ○ sm-circ           
```




**h-cyl**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "h-cyl",
      shape: "h-cyl"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
          ╭───────┬╮          
          │ h-cyl ││          
          ╰───────┴╯          
```




**lin-cyl**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "lin-cyl",
      shape: "lin-cyl"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
        ┌───────────┐         
        ├───────────┤         
        │ lin-cyl   │         
        ├───────────┤         
        └───────────┘         
```




**datastore**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "datastore",
      shape: "datastore"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
        ─────────────         
          datastore           
        ─────────────         
```




**bucket**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "bucket",
      shape: "bucket"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
         ◜◠◠◠◠◠◠◠◠◠◠◝         
         ╲  bucket  ╱         
          ╰────────╯          
```




**text**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "text",
      shape: "text"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
             text             
```




**fork**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "",
      shape: "fork"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
          ━━━━━━━━━           
             │                
```




**brace**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "brace",
      shape: "brace"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
           ╭                  
           ┤ brace            
           ╰                  
```




**brace-r**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "brace-r",
      shape: "brace-r"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
                   ╮          
           brace-r ├          
                   ╯          
```




**braces**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "braces",
      shape: "braces"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
          ╭        ╮          
          ┤ braces ├          
          ╰        ╯          
```




**browser**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "browser",
      shape: "browser"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
        ┌───────────┐         
        │ ○ browser │         
        └───────────┘         
```




**console**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "console",
      shape: "console"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
        ┌───────────┐         
        ├───────────┤         
        │ $ console │         
        └───────────┘         
```




**person**

```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "person",
      shape: "person"
    }
  ],
  edges: []
}, {
  target: "web",
  color: "none",
  width: 30,
  height: 9,
  overflow: "expand"
});
console.log(text);
```

```text
              ○               
          ╭────────╮          
          │ person │          
          ╰────────╯          
```



## ASCII and font compatibility

`ascii` uses simpler outlines. Box, blocks, and braille hexagons use ❬ and ❭ sides;
ASCII uses angle brackets. Clouds and bangs also have ASCII outlines.



```ts
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram({
  direction: "LR",
  nodes: [
    {
      id: "n",
      label: "Decision",
      shape: "hexagon"
    }
  ],
  edges: []
}, {
  target: "chat",
  charset: "ascii",
  width: 30,
  height: 9
});
console.log(text);
```

```text
         /----------\         
         < Decision >         
         \----------/         
```



Use Glyph Mono for special glyphs in web output; chat uses the receiving application's font.
See [fonts and fallbacks](/diagrams/troubleshooting/#fonts-and-alignment).

## Adaptations and connection limits

Catalogue shapes reserve their full footprint and attach edges away from seams.
`point` draws the first character of its required nonempty label and cannot have a direct JSON self-edge. `fork` draws an
unlabelled bar/stub; a supplied label goes below it. `compartment` accepts member rows.

Mermaid names `lin-doc`, `win-pane`, `sl-rect`, and `folder` have logged adaptations;
they are not additional JSON shape values. External icons and images are inert.
Inspect render notes when [fitting](/diagrams/options/) changes an outline or label.