skilld
All skills
eraserlabs avatar

/eraser-diagrams

@b116552
by Erasereraserlabs/eraser-io43 stars
9

Generates architecture diagrams from code, infrastructure, or descriptions. Use when user asks to visualize, diagram, or document system architecture.

Ask your Agent

Use this Skill: https://skilld.dev/gh/eraserlabs/eraser-io/eraser-diagrams

This session only. Nothing lands on disk.

referencesflowchart-syntax.md

≈1.8k tokens on demand. Your agent reads this file only when SKILL.md points to it.

Flow chart syntax

Nodes

A node is the most basic building block in a flow chart.

Node definitions consist of a name followed by an optional set of properties. For example, Start is the name of below node and it has an shape property which is set to oval.

Start [shape: oval]

Node names are required to be unique.

Nodes support shape, icon, color, and label properties. More on properties below.

Groups

A group is a container that can encapsulate nodes and groups.

Group definitions consist of a name followed by { }. For example, Loop is the name of the below group and it contains Issue1, Issue2, and Issue3 nodes.

Loop {
  Issue1, Issue2, Issue3
}

Nodes (or groups) inside a group can be enumerated either with , or new lines as separators. Below results in the same but uses new lines to separate each node.

Loop {
  Issue1
  Issue2
  Issue3
}

Group names are required to be unique.

Groups can be nested. In the below example, the Outer Loop group contains the Inner Loop group.

Outer Loop {
	Inner Loop {
		Issue1
		Issue2    
	}
	Issue3
}

Groups support icon, color, and label properties.

Properties

Properties are key-value pairs enclosed in [ ] brackets that can be appended to definitions of nodes and groups. Properties are optional.

Here are the properties that are allowed:

Property Description Value Default Value
shape Shape of node Shape names (e.g. diamond or oval). rectangle
icon Icon Icon names (e.g. aws-ec2).
color Stroke and fill color Color name (e.g. blue) or hex code (e.g. "#000000"- note: must be wrapped in quotes)
label Text label Any string. Enclose in double quotes (e.g. "Main Server") if containing a space. Allows multiple nodes and groups to have the same label. Name of node or group
link Internal or external link A fully fledged URL. Enclose in double quotes (e.g. "https://my-internal-docs.io/api-docs". Supports the full gamut of external links and Eraser-specific links: diagrams, headers, and files in Eraser.
colorMode Fill color lightness pastel, bold, outline pastel
styleMode Embellishments shadow, plain, watercolor shadow
typeface Text typeface rough, clean, mono rough

Here is the list of shapes:

  • rectangle (default), cylinder, diamond, document, ellipse, hexagon, oval, parallelogram, star, trapezoid, triangle

The label property is useful if you want the node's (or group's) label and name to be distinct. By default, the label is set as the node name. But because node names are required to be distinct, you will need to use the label property if you have two nodes with the exact same label.

// Names need to be distinct, but labels can overlap
Start_A [label: start]
Start_B [label: start]

It is possible to set multiple properties by separating them using , like shown below:

Start [shape: oval, icon: flag]

Connections

Connections represent relationships between nodes and groups. They can be created between nodes, between groups, and between nodes and groups.

Here is an example of a connection between two nodes:

Issue > Bug

Here are the types of connectors:

Connector Syntax Description
> Left-to-right arrow
< Right-to-left arrow
<> Bi-directional arrow
- Line
-- Dotted line
--> Dotted arrow

Connection label

It is possible to add a label to a connection. Here is an example:

Issue > Bug: Triage

Branching connections

It is possible to create one-to-many connections in a single statement. Here is an example:

Issue > Bug, Feature

Chained connections

It is also possible to "chain" a sequence of connection statements in a single statement

Issue > Bug > Duplicate?

If a connection statement contains a name that has not been previously defined as a node or a group, a blank node with that name will be created.

Connection properties

Here are the properties that are allowed on connections (lines):

Property Description Example
color Line color Issue > Bug: Triage [color: green] Issue > Bug: [color: green]

Escape string

Certain characters are not allowed in node and group names because they are reserved. You can use these characters, you can wrap the entire node or group name in quotes " ".

User > "https://localhost:8080": GET

Direction

The direction of the flow chart can be changed using the direction statement. Allowed directions are:

  • direction down (default)
  • direction up
  • direction right
  • direction left

The direction statement can be placed anywhere in the code like this:

direction right

Styling

Styles can be applied at the diagram level. Below is an overview of the options and syntax.

Property Values Default value Syntax example
colorMode pastel, bold, outline pastel colorMode bold
styleMode shadow, plain, watercolor shadow styleMode shadow
typeface rough, clean, mono rough typeface clean

Examples

Here are some examples of diagrams you can create.

Issue Triage Flow

// Nodes and groups
Issue type? [shape: oval, icon: file-text]

BugPath [color: red] {
  Bug [icon: bug, color: red]
  Duplicate? [shape: diamond, icon: copy]
  Mark duplicate [shape: oval, icon: copy]
  Has repro? [shape: diamond, icon: repeat]
  Ask for repro [shape: oval, icon: repeat]
}

FeaturePath [color: green] {
  Feature [icon: zap, color: green]
  Well specced? [shape: diamond, icon: check-square]
  Can be package? [shape: diamond, icon: package]
  Define as package [shape: oval, icon: package]
}

Issue ready to claim [shape: oval, icon: send]

// Relationships
Issue type? > Bug
Bug > Duplicate?
Duplicate? > Mark duplicate: Yes
Duplicate? > Has repro?: No
Has repro? > Issue ready to claim: Yes
Has repro? > Ask for repro: No
Issue type? > Feature
Feature > Can be package?
Can be package? > Well specced?: No
Can be package? > Define as package: Yes
Well specced? > Issue ready to claim: Yes

Price Lookup Flow

// Define nodes and relationships "A > B"
Start [shape: oval, icon: flag] > Read keywords from Excel [icon: excel]
Read keywords from Excel > Establish Amazon API connection [icon: amazon]
Establish Amazon API connection > Wait for user input [shape: diamond, icon: user]
Wait for user input > Search for keyword on Amazon[icon: search]: User selects keyword
Search for keyword on Amazon > Retrieve item price [icon: dollar-sign] 
Retrieve item price > Output result to Excel [icon: excel] 
Output result to Excel > End
Wait for user input > Close modal [icon: x]: User clicks cancel
Close modal > End [shape: oval, icon: check]

// Define Groups
For each keyword in the list [icon: repeat] {
  Search for keyword on Amazon
  Retrieve item price 
  Output result to Excel
}

Source: SKILL.md on GitHub

Third-party checks

No alerts17d5 checks · Risk SAFE
  • Gen Agent Trust Hub17d

    This skill generates architecture diagrams by sending system descriptions or code to the Eraser API. It uses standard tools like curl to communicate with the service and provides a preview image and a link to edit the diagram in the Eraser web editor.

  • Socket17d

    No alerts

  • Snyk17d

    Risk: LOW · No issues

  • Runlayer7mo

    6 files scanned · No issues

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at b116552. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 months ago.

Steadyupdated 7 months ago

Capability

compatibility
Requires network access to call Eraser API
All 1 allowed tools
Read Write Bash(curl:*)
Other metadata
metadata
{
  "version": "1.0.0",
  "author": "Eraser Labs",
  "tags": "diagram, architecture, infrastructure, visualization, terraform, aws, azure, cloud"
}

Topics

  • diagram
  • architecture
  • visualization
  • flowchart
  • cloud
  • terraform
  • sequence-diagram
  • erd
  • bpmn

README badge

README badge for eraserlabs/eraser-io

What it does

Generates architecture diagrams from code, infrastructure files, or natural language descriptions by calling the Eraser API. Supports five diagram types: flowcharts, entity-relationship diagrams, cloud architecture diagrams, sequence diagrams, and BPMN swimlane diagrams.

Generated from the current SKILL.md.

Frequently asked

What diagram types does this skill support?
Five types: flowcharts, entity relationship diagrams (ERD), cloud architecture diagrams, sequence diagrams, and BPMN swimlane diagrams. Each has its own DSL syntax and is optimized for different use cases.
Does this skill require an API key?
Yes. The skill requires an ERASER_API_KEY environment variable to call the Eraser API. Authentication failures will return a 401 error.
What file types can this skill analyze to generate diagrams?
The skill can extract architecture information from code, Terraform files, AWS/Azure infrastructure definitions, and natural language descriptions. It then generates the appropriate Eraser DSL to visualize the system.
Can I edit the generated diagram after creation?
Yes. The API response includes a createEraserFileUrl that links to the Eraser web editor, where you can modify the diagram. The DSL code is also provided so you can regenerate or adjust it.
Does this work with infrastructure-as-code tools?
Yes. The skill is designed to work with Terraform, AWS, and Azure infrastructure files to visualize cloud architectures and system infrastructure.

Generated from the current SKILL.md. These answers refresh after source changes.