### Stripe Payment Flow Server Setup (Ruby)

Source: https://docs.eraser.io/docs/examples-4

Sets up a basic Sinatra server for handling Stripe payments. Ensure your Stripe API key is kept secure and not committed to version control.

```ruby
// Source: https://stripe.com/docs/payments/quickstart

// server.rb

require 'sinatra'
require 'stripe'
// This is a public sample test API key.
// Don’t submit any personally identifiable information in requests made with this key.
// Sign in to see your own test API key embedded in code samples.
Stripe.api_key = 'sk_test_4eC39HqLyjWDarjtT1zdp7dc'

set :static, true
set :port, 4242

// Securely calculate the order amount
def calculate_order_amount(_items)
  // Replace this constant with a calculation of the order's amount
  // Calculate the order total on the server to prevent
  // people from directly manipulating the amount on the client
  1400
end

```

--------------------------------

### get

Source: https://docs.eraser.io/docs/mcp

Fetches a single resource by ID or retrieves the user profile.

```APIDOC
## `get`

Fetch a single resource by ID, or fetch your user profile.

### Resource Options:

- **`me`**: Returns the current user's profile and active team. Requires no parameters.
- **`file`**: Get a file's metadata, document content, and diagram elements. Requires `fileId` parameter.
- **`diagram`**: Get a specific diagram's type and code. Requires `diagramId` parameter.
- **`folder`**: Get a folder's metadata. Requires `folderId` parameter.
- **`preset`**: Get an AI preset's rules and settings. Requires `presetId` parameter.
```

--------------------------------

### Install Eraser Skill for AI Coding Agents

Source: https://docs.eraser.io/docs/using-ai-agent-integrations

Run this command to install the Eraser skill, enabling AI coding agents like Claude Code and Cursor to generate Eraser diagrams.

```bash
npx skills install eraserlabs/eraser-io
```

--------------------------------

### Install Eraser MCP with Claude Code

Source: https://docs.eraser.io/docs/mcp

Use this command to install the Eraser MCP locally with Claude Code. Ensure ERASER_API_KEY is set in your environment or Claude Code's MCP config.

```bash
claude mcp add eraser -- npx -y @eraserlabs/eraser-mcp
```

--------------------------------

### Create Payment Intent Endpoint (Ruby)

Source: https://docs.eraser.io/docs/examples-4

This Ruby endpoint handles POST requests to create a Stripe PaymentIntent. It parses the request body to get item details and calculates the order amount before creating the intent. Ensure Stripe is configured and the `calculate_order_amount` function is defined.

```ruby
post '/create-payment-intent' do
  content_type 'application/json'
  data = JSON.parse(request.body.read)

  # Create a PaymentIntent with amount and currency
  payment_intent = Stripe::PaymentIntent.create(
    amount: calculate_order_amount(data['items']),
    currency: 'usd',
    automatic_payment_methods: {
      enabled: true,
    },
  )

  {
    clientSecret: payment_intent['client_secret']
  }.to_json
end
```

--------------------------------

### Create H2 Markdown Header

Source: https://docs.eraser.io/docs/quickstart

Standard markdown syntax can be used in the note editor. This example shows how to create a level 2 header.

```markdown
## Diagrams
```

--------------------------------

### Initialize Stripe Elements and Payment Flow (JavaScript)

Source: https://docs.eraser.io/docs/examples-4

This JavaScript code initializes the Stripe client, sets up the Payment and Link Authentication Elements, and handles the payment submission process. It fetches the client secret from the backend and confirms the payment using Stripe's `confirmPayment` method. Ensure the Stripe public key is correctly set and the `return_url` is valid.

```javascript
// This is a public sample test API key.
// Don’t submit any personally identifiable information in requests made with this key.
// Sign in to see your own test API key embedded in code samples.
const stripe = Stripe("pk_test_TYooMQauvdEDq54NiTphI7jx");

// The items the customer wants to buy
const items = [{ id: "xl-tshirt" }];

let elements;

initialize();
checkStatus();

document
  .querySelector("#payment-form")
  .addEventListener("submit", handleSubmit);

let emailAddress = '';
// Fetches a payment intent and captures the client secret
async function initialize() {
  const response = await fetch("/create-payment-intent", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ items }),
  });
  const { clientSecret } = await response.json();

  const appearance = {
    theme: 'stripe',
  };
  elements = stripe.elements({ appearance, clientSecret });

  const linkAuthenticationElement = elements.create("linkAuthentication");
  linkAuthenticationElement.mount("#link-authentication-element");

  linkAuthenticationElement.on('change', (event) => {
    emailAddress = event.value.email;
  });

  const paymentElementOptions = {
    layout: "tabs",
  };

  const paymentElement = elements.create("payment", paymentElementOptions);
  paymentElement.mount("#payment-element");
}

async function handleSubmit(e) {
  e.preventDefault();
  setLoading(true);

  const { error } = await stripe.confirmPayment({
    elements,
    confirmParams: {
      // Make sure to change this to your payment completion page
      return_url: "http://localhost:4242/checkout.html",
      receipt_email: emailAddress,
    },
  });

  // This point will only be reached if there is an immediate error when
  // confirming the payment. Otherwise, your customer will be redirected to
  // your `return_url`. For some payment methods like iDEAL, your customer will
  // be redirected to an intermediate site first to authorize the payment, then
  // redirected to the `return_url`.
  if (error.type === "card_error" || error.type === "validation_error") {
    showMessage(error.message);
  } else {
    showMessage("An unexpected error occurred.");
  }

  setLoading(false);
}

// Fetches the payment intent status after payment submission
async function checkStatus() {
  const clientSecret = new URLSearchParams(window.location.search).get(
    "payment_intent_client_secret"
  );

  if (!clientSecret) {
    return;
  }

  const { paymentIntent } = await stripe.retrievePaymentIntent(clientSecret);

  switch (paymentIntent.status) {
    case "succeeded":
      showMessage("Payment succeeded!");
      break;
    case "processing":
      showMessage("Your payment is processing.");
      break;
    case "requires_payment_method":
      showMessage("Your payment was not successful, please try again.");
      break;
    default:
      showMessage("Something went wrong.");
      break;
  }
}

// ------- UI helpers -------

function showMessage(messageText) {
  const messageContainer = document.querySelector("#payment-message");

  messageContainer.classList.remove("hidden");
  messageContainer.textContent = messageText;

  setTimeout(function () {
    messageContainer.classList.add("hidden");
    messageText.textContent = "";
  }, 4000);
}

// Show a spinner on payment submission
function setLoading(isLoading) {
  if (isLoading) {
    // Disable the button and show a spinner
    document.querySelector("#submit").disabled = true;
    document.querySelector("#spinner").classList.remove("hidden");

```

--------------------------------

### Apply Color Property to Connection

Source: https://docs.eraser.io/docs/syntax

Illustrates how to apply a specific color to a connection line. This can be done with or without a label.

```plaintext
Storage > Server: Cache Hit [color: green]
```

```plaintext
Storage > Server: [color: green]
```

--------------------------------

### Create One-to-Many Connections

Source: https://docs.eraser.io/docs/syntax

Demonstrates how to create multiple connections from a single source node to several destination nodes in one statement, simplifying diagram definition.

```plaintext
Server > Worker1, Worker2, Worker3
```

--------------------------------

### Define Nested Groups

Source: https://docs.eraser.io/docs/syntax

Groups can be nested to create hierarchical structures. This example shows a VPC Subnet group containing a Main Server group.

```plaintext
VPC Subnet {
  Main Server {
    Server [icon: aws-ec2]
    Data [icon: aws-rds]
  }
}
```

--------------------------------

### Create Chained Connections

Source: https://docs.eraser.io/docs/syntax-3

Link multiple connections sequentially by chaining them with connectors. This creates a flow where the output of one connection becomes the input for the next.

```text
Issue > Bug > Duplicate?
```

--------------------------------

### Basic Connection Syntax

Source: https://docs.eraser.io/docs/syntax-4

Use the '>' symbol to define a directed connection between two activities. This indicates a flow from left to right.

```text
Open website > Place order
```

--------------------------------

### generate

Source: https://docs.eraser.io/docs/mcp

Generates a diagram from a text prompt. Can save as a new file or add to an existing one.

```APIDOC
## `generate`

Use Eraser's AI to generate a diagram from a text prompt.

### Resource Options:

- **`file`**: Generate a diagram and save it as a new file. Requires `text` parameter.
- **`diagram`**: Generate a diagram and add it to an existing file. Requires `text` and `targetFileId` parameters.

### Optional Parameters:

- **`diagramType`**: Specifies the type of diagram to generate (e.g., `freeform-diagram`, `sequence-diagram`, `flowchart-diagram`).
- **`colorMode`**: Sets the color scheme for the diagram (e.g., `pastel`, `bold`).
- **`styleMode`**: Defines the visual style of the diagram (e.g., `plain`, `shadow`).
- **`typeface`**: Selects the font style (e.g., `rough`, `clean`).
- **`direction`**: Sets the layout direction (e.g., `up`, `down`, `left`, `right`).
- **`theme`**: Chooses the overall theme (`light` or `dark`).
- **`format`**: Specifies the output format for rendered images (`png`, `jpeg`).
- **`imageQuality`**: Sets the quality for rendered images (1-3).
- **`background`**: Includes the background in the rendered image.
- **`title`**: Sets a title for the generated file.
- **`folderId`**: Specifies a folder to save the new file into.
- **`templateId`**: Uses a template for generation.
- **`presetId`**: Applies AI preset rules.
- **`priorRequestId`**: References a previous generation for iterative refinement.
- **`attachments`**: Attaches files for context.
- **`gitContexts`**: Attaches git repository context.
```

--------------------------------

### GitHub Actions: Build and Deploy to Cloud Run

Source: https://docs.eraser.io/docs/examples-4

A GitHub Actions workflow to build a Docker container and deploy it to Google Cloud Run. Requires Google Cloud authentication and Docker registry login.

```yaml
// source: https://github.com/google-github-actions/example-workflows/blob/main/workflows/deploy-cloudrun/cloudrun-docker.yml

    name: Build and Deploy to Cloud Run

    on:
      push:
        branches:
          - $default-branch

    env:
      PROJECT_ID: YOUR_PROJECT_ID
      GAR_LOCATION: YOUR_GAR_LOCATION
      REPOSITORY: YOUR_REPOSITORY_NAME
      SERVICE: YOUR_SERVICE_NAME
      REGION: YOUR_SERVICE_REGION

    jobs:
      deploy:
        permissions:
          contents: 'read'
          id-token: 'write'

        runs-on: ubuntu-latest
        steps:
          - name: Checkout
            uses: actions/checkout@v2

          - name: Google Auth
            id: auth
            uses: 'google-github-actions/auth@v0'
            with:
              token_format: 'access_token'
              workload_identity_provider: '${{ secrets.WIF_PROVIDER }}'
              service_account: '${{ secrets.WIF_SERVICE_ACCOUNT }}'
          - name: Docker Auth
            id: docker-auth
            uses: 'docker/login-action@v1'
            with:
              username: 'oauth2accesstoken'
              password: '${{ steps.auth.outputs.access_token }}'
              registry: '${{ env.GAR_LOCATION }}-docker.pkg.dev'
          - name: Build and Push Container
            run: |-
              docker build -t "${{ env.GAR_LOCATION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/${{ env.REPOSITORY }}/${{ env.SERVICE }}:${{ github.sha }}" ./ 
              docker push "${{ env.GAR_LOCATION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/${{ env.REPOSITORY }}/${{ env.SERVICE }}:${{ github.sha }}"
          - name: Deploy to Cloud Run
            id: deploy
            uses: google-github-actions/deploy-cloudrun@v0
            with:
              service: ${{ env.SERVICE }}
              region: ${{ env.REGION }}
              image: ${{ env.GAR_LOCATION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/${{ env.REPOSITORY }}/${{ env.SERVICE }}:${{ github.sha }}
          - name: Show Output
            run: echo ${{ steps.deploy.outputs.url }}

```

--------------------------------

### Define a Node with an Icon

Source: https://docs.eraser.io/docs/syntax

Use this syntax to define a basic node with an icon property. Node names must be unique.

```plaintext
compute [icon: aws-ec2]
```

--------------------------------

### Using Labels for Distinct Flow Objects

Source: https://docs.eraser.io/docs/syntax-4

Demonstrates how to use the 'label' property to assign the same text label to multiple flow objects, even though their names must be distinct.

```plaintext
// Names need to be distinct, but labels can overlap
Employee_A [label: employee]
Employee_B [label: employee]
```

--------------------------------

### Product Returns Process BPMN

Source: https://docs.eraser.io/docs/examples-5

Illustrates a BPMN diagram for a product returns process, detailing steps from customer request to finance processing, involving customer service and warehouse operations.

```bpmn
title Product Returns Process

Customer [color: teal] {
  Return requested [type: event, icon: mail]
  Ship or drop off item [icon: truck]
  Return complete [type: event, icon: check-circle]
  "Notified: Return not accepted" [type: event, icon: alert-triangle]
}

Company [color: blue] {
  Customer Service {
    Check return eligibility [icon: check-square]
    Eligible? [type: gateway, icon: x]
    Send return instructions [icon: send]
    "Notify: Return not accepted" [icon: x-circle]
  }
  Warehouse {
    Receive & inspect item [icon: package]
    Item OK? [type: gateway, icon: x]
    Offer partial refund or return item [icon: slash]
    Approve return & update stock [icon: database]
  }
  Finance {
    "Issue refund/store credit/replacement" [icon: credit-card]
    "Notify customer: Return complete" [icon: mail]
  }
}

// Connections

Return requested > Check return eligibility
Check return eligibility > Eligible?
Eligible? > Send return instructions : Yes
Eligible? > "Notify: Return not accepted" : No
"Notify: Return not accepted" --> "Notified: Return not accepted"
Return requested > Ship or drop off item
Send return instructions > Ship or drop off item
Ship or drop off item --> Receive & inspect item
Receive & inspect item > Item OK?
Item OK? > Approve return & update stock : Yes
Item OK? > Offer partial refund or return item : No
Offer partial refund or return item --> "Issue refund/store credit/replacement"
Approve return & update stock --> "Issue refund/store credit/replacement"
"Issue refund/store credit/replacement" > "Notify customer: Return complete"
"Notify customer: Return complete" --> Return complete
Ship or drop off item > Return complete
Ship or drop off item > "Notified: Return not accepted"
```

--------------------------------

### Connection Types

Source: https://docs.eraser.io/docs/syntax-4

Illustrates the different syntax options for defining connections between elements, including arrows, lines, and dotted lines.

```text
>
```

```text
<
```

```text
<>
```

```text

-
```

```text
--
```

```text
-->
```

--------------------------------

### Basic Sequence Diagram with Transaction Flow

Source: https://docs.eraser.io/docs/examples-2

Illustrates a typical web application transaction flow involving a database and a cloud function. Includes basic message passing and activation/deactivation.

```eraser
Web App [icon: layout] > DB [icon: database]: Start transaction
Web App > Cloud Fx [icon: function]: Call function
Cloud Fx > API [icon: cloud-cog]: Create session
API > Cloud Fx: Session info
Cloud Fx > DB: Create tx record
Cloud Fx > API: Request access token
API > Cloud Fx: Access token
Cloud Fx > Web App: Token and transaction info
Web App > API: Complete transaction
alt [label: If successful]{
  API > Web App: Transaction confirmation
}
else [label: If failed]{
  API > Web App: Transaction cancellation
}
Web App > DB: Create tx record
Web App > API: Subscribe to transaction changes
activate API 
API > API: Ongoing events
API > Web App: Push events
deactivate API
```

--------------------------------

### List Resources

Source: https://docs.eraser.io/docs/mcp

Retrieve lists of resources with support for pagination and filtering.

```APIDOC
## List Resources

List resources with pagination and filtering.

### Resource: `team`

#### Description
List all teams the user is a member of.

### Resource: `file`

#### Description
List files with pagination, sorting, and filtering.

#### Parameters
- `folderId` (string) - Optional - Filter by folder.
- `author` (string) - Optional - Filter by author.
- `sort` (string) - Optional - Sorting options: `createdAt`, `updatedAt`, `-createdAt`, `-updatedAt`.
- `limit` (integer) - Optional - Number of items to return.
- `cursor` (string) - Optional - Pagination cursor.

### Resource: `diagram`

#### Description
List all diagrams in a file with their type and code.

#### Parameters
- `fileId` (string) - Required - The ID of the file containing the diagrams.

### Resource: `folder`

#### Description
List folders, optionally filtered by parent.

#### Parameters
- `parentFolderId` (string) - Optional - Filter by parent folder.

### Resource: `preset`

#### Description
List AI presets.
```

```APIDOC
## Search Resources

Perform full-text search across your workspace.

### Resource: `file`

#### Description
Search across file titles and content.

#### Parameters
- `query` (string) - Required - The search query.
- `limit` (integer) - Optional - Maximum number of results.
- `offset` (integer) - Optional - Number of results to skip.

### Resource: `diagram`

#### Description
Search across diagram code.

#### Parameters
- `query` (string) - Required - The search query.
- `limit` (integer) - Optional - Maximum number of results.
- `offset` (integer) - Optional - Number of results to skip.
```

```APIDOC
## Create Resource

Create a new resource. For diagrams, use this only when providing DSL code; use `generate` for AI-powered creation.

### Resource: `file`

#### Description
Create a new file with optional document content.

#### Parameters
- `name` (string) - Required - The name of the file.
- `document` (string) - Optional - The content of the file.
- `folderId` (string) - Optional - The ID of the folder to create the file in.

### Resource: `diagram`

#### Description
Add a diagram with DSL code to an existing file.

#### Parameters
- `fileId` (string) - Required - The ID of the file to add the diagram to.
- `code` (string) - Required - The DSL code for the diagram.
- `diagramType` (string) - Required - The type of diagram. Supported values: `freeform-diagram`, `sequence-diagram`, `entity-relationship-diagram`, `cloud-architecture-diagram`, `flowchart-diagram`, `bpmn-diagram`, `custom-diagram`.

### Resource: `folder`

#### Description
Create a folder, optionally nested under a parent.

#### Parameters
- `name` (string) - Required - The name of the folder.
- `parentFolderId` (string) - Optional - The ID of the parent folder.

### Resource: `preset`

#### Description
Create an AI preset with custom generation rules.

#### Parameters
- `name` (string) - Required - The name of the preset.
- `description` (string) - Optional - A description of the preset.
- `rules` (object) - Required - The generation rules for the preset.
- `isDefault` (boolean) - Optional - Whether this is the default preset.
```

```APIDOC
## Update Resource

Update an existing resource.

### Resource: `file`

#### Description
Update a file's title, content, folder, or sharing settings.

#### Parameters
- `fileId` (string) - Required - The ID of the file to update.
- `title` (string) - Optional - The new title for the file.
- `document` (string) - Optional - The new content for the file.
- `folderId` (string) - Optional - The new folder ID for the file.
- `linkAccess` (string) - Optional - The link access level. Options: `no-link-access`, `anyone-with-link-can-edit`, `publicly-viewable`, `publicly-editable`, `sso-readable`, `sso-editable`.

### Resource: `diagram`

#### Description
Replace a diagram's code or move it to another file.

#### Parameters
- `diagramId` (string) - Required - The ID of the diagram to update.
- `code` (string) - Optional - The new DSL code for the diagram.
- `targetFileId` (string) - Optional - The ID of the file to move the diagram to.

### Resource: `folder`

#### Description
Rename or move a folder.

#### Parameters
- `folderId` (string) - Required - The ID of the folder to update.
- `name` (string) - Optional - The new name for the folder.
- `parentFolderId` (string) - Optional - The new parent folder ID.

### Resource: `preset`

#### Description
Update an AI preset's rules or settings.

#### Parameters
- `presetId` (string) - Required - The ID of the preset to update.
- `name` (string) - Optional - The new name for the preset.
- `description` (string) - Optional - The new description for the preset.
- `rules` (object) - Optional - The updated generation rules.
- `isDefault` (boolean) - Optional - Whether this is the default preset.
```

```APIDOC
## Delete Resource

Delete or archive a resource.

### Resource: `file`

#### Description
Archive (soft-delete) a file. Can be restored from the trash.

#### Parameters
- `fileId` (string) - Required - The ID of the file to archive.

### Resource: `diagram`

#### Description
Permanently delete a diagram from a file.

#### Parameters
- `diagramId` (string) - Required - The ID of the diagram to delete.

### Resource: `folder`

#### Description
Delete a folder. Use `recursive: true` to include contents.

#### Parameters
- `folderId` (string) - Required - The ID of the folder to delete.
- `recursive` (boolean) - Optional - If true, delete the folder and its contents.
```

```APIDOC
## Export Diagram

Render a diagram to an image and return a temporary download URL.

### Resource: `diagram`

#### Description
Export a diagram as an image.

#### Parameters
- `resource` (string) - Required - Must be `diagram`.
- `diagramId` (string) - Required - The ID of the diagram to export.
- `fileId` (string) - Required - The ID of the file containing the diagram.
- `format` (string) - Optional - Image format. Supported values: `png`, `jpeg`.
- `theme` (string) - Optional - Theme for the image. Supported values: `light`, `dark`.
- `imageQuality` (integer) - Optional - Quality of the image. Values: `1`, `2`, `3`.
- `background` (boolean) - Optional - Include background in the image.
```

--------------------------------

### Configure Eraser MCP Server for GitHub Copilot in VS Code

Source: https://docs.eraser.io/docs/mcp

Add this JSON configuration to your VS Code `settings.json` file to enable GitHub Copilot to connect to the Eraser MCP server. This allows Copilot to leverage Eraser workspace features.

```json
{
  "mcp": {
    "servers": {
      "eraser": {
        "url": "https://app.eraser.io/api/mcp",
        "type": "http"
      }
    }
  }
}
```

--------------------------------

### Setting Multiple Properties for a Flow Object

Source: https://docs.eraser.io/docs/syntax-4

Shows how to apply multiple properties, such as 'type' and 'icon', to a single flow object by separating them with commas.

```plaintext
Place order [type: activity, icon: flag]
```

--------------------------------

### Create Branching Connections

Source: https://docs.eraser.io/docs/syntax-3

Define one-to-many connections by listing multiple target nodes separated by commas after the connector. This allows a single source to connect to several destinations.

```text
Issue > Bug, Feature
```

--------------------------------

### Create Payment Intent

Source: https://docs.eraser.io/docs/examples-4

This endpoint initiates the payment process by creating a Stripe PaymentIntent. It accepts item details in the request body and returns a client secret for the frontend to use.

```APIDOC
## POST /create-payment-intent

### Description
Initiates the payment process by creating a Stripe PaymentIntent. It requires item details to calculate the order amount and returns a client secret necessary for completing the payment on the client-side.

### Method
POST

### Endpoint
/create-payment-intent

### Request Body
- **items** (array) - Required - A list of items to be purchased, each with an 'id' field.

### Request Example
```json
{
  "items": [
    { "id": "xl-tshirt" }
  ]
}
```

### Response
#### Success Response (200)
- **clientSecret** (string) - The client secret for the created PaymentIntent, used to confirm the payment on the client side.

#### Response Example
```json
{
  "clientSecret": "pi_123456789_secret_abcdef1234567890"
}
```
```

--------------------------------

### Use Custom Icon in Diagram-as-Code

Source: https://docs.eraser.io/docs/custom-icons

Refer to custom icons by their uploaded name within diagram-as-code syntax. Ensure the icon name matches the one defined during upload.

```text
Space shuttle [icon: nasa]
```

--------------------------------

### Set Multiple Node Properties

Source: https://docs.eraser.io/docs/syntax-3

Apply multiple properties to a node simultaneously by separating them with commas. This allows for concise customization of node appearance and behavior.

```plaintext
Start [shape: oval, icon: flag]
```

--------------------------------

### Azure Architecture Diagram

Source: https://docs.eraser.io/docs/examples

Create an Azure architecture diagram by defining resources and their network connections. Use icons for Azure services.

```eraser
// Define groups and nodes
AD tenant [icon: azure-active-directory]
Load Balancers [icon: azure-load-balancers]
Virtual Network [icon: azure-virtual-networks] {
  Web Tier [icon: azure-network-security-groups] {
    vm1 [icon: azure-virtual-machine]
    vm2 [icon: azure-virtual-machine]
    vm3 [icon: azure-virtual-machine]
  }
  Business Tier [icon: azure-network-security-groups] {
    lb2 [icon: azure-load-balancers]
    vm4 [icon: azure-virtual-machine]
    vm5 [icon: azure-virtual-machine]
    vm6 [icon: azure-virtual-machine]
  }
}

// Define connections
AD tenant > Load Balancers
Load Balancers > vm1, vm2, vm3
vm1, vm2, vm3 > lb2 > vm4, vm5, vm6
```

--------------------------------

### Define Legend Items with Swatch Properties

Source: https://docs.eraser.io/docs/syntax-1

Use this syntax to define legend items, specifying properties like connection, color, and label. Ensure labels are enclosed in double quotes if they contain spaces.

```plaintext
legend {
  [connection: -->, color: orange, label: Async backup]
  [shape: rectangle, color: blue, label: Active]
}
```

--------------------------------

### Define Basic Legend with Multiple Items

Source: https://docs.eraser.io/docs/syntax

Use this syntax to define a legend with various swatch types (connection, color, icon, shape) mapped to descriptive labels.

```plaintext
 legend {
    [connection: -->, label: Async]
    [color: red, label: Error]
    [icon: aws-lambda, label: Lambda]
    [shape: diamond, label: Decision]
  }
```

--------------------------------

### Create a Connection Between Two Nodes

Source: https://docs.eraser.io/docs/syntax-3

Use the '>' syntax to represent a directed connection from a source node to a target node. This is the most basic form of defining a relationship.

```text
Issue > Bug
```

--------------------------------

### Kubernetes Architecture Diagram

Source: https://docs.eraser.io/docs/examples

Visualize Kubernetes components and their interactions with cloud providers. Supports defining control plane and node elements.

```eraser
// Define groups and nodes
Cloud Provider API [icon: settings]
AWS [icon: aws]
GCP [icon: google-cloud]
Azure [icon: azure]
Control Plane [icon: k8s-control-plane]{
  api [icon: k8s-api]
  sched [icon: k8s-sched]
  ccm [icon: k8s-c-c-m]
  cm [icon: k8s-c-m]
  etcd [icon: k8s-etcd]
}
Node1 [icon: k8s-node] {
  kubelet1 [icon: k8s-kubelet]
  kproxy1 [icon: k8s-k-proxy]
}
Node2 [icon: k8s-node] {
  kubelet2 [icon: k8s-kubelet]
  kproxy2 [icon: k8s-k-proxy]
}
Node3 [icon: k8s-node] {
  kubelet3 [icon: k8s-kubelet]
  kproxy3 [icon: k8s-k-proxy]
}

// Define connections
ccm > Cloud Provider API
Cloud Provider API > AWS, Azure, GCP
api > ccm, sched, etcd, cm
kubelet1, kproxy1, kubelet2, kproxy2, kubelet3, kproxy3 > api
```

--------------------------------

### Connection with Label

Source: https://docs.eraser.io/docs/syntax-4

Add a descriptive label to a connection by appending it after a colon following the connection syntax. This helps clarify the relationship between elements.

```text
Open website > Place order: Browse
```

--------------------------------

### Set Connection Color Property

Source: https://docs.eraser.io/docs/syntax-3

Customize the appearance of a connection by specifying its color using the `color` property within square brackets. This can be applied with or without a label.

```text
Issue > Bug: Triage [color: green]
```

```text
Issue > Bug: [color: green]
```

--------------------------------

### Connector Types

Source: https://docs.eraser.io/docs/syntax

Illustrates the different types of connectors available for defining relationships between elements, such as arrows and lines.

```plaintext
>
```

```plaintext
<
```

```plaintext
<>
```

```plaintext
-
```

```plaintext
--
```

```plaintext
-->
```

--------------------------------

### Diagram-Level Styling: Color Mode

Source: https://docs.eraser.io/docs/syntax-1

Set the overall color scheme for the diagram. Options include 'pastel', 'bold', and 'outline'.

```plaintext
colorMode bold
```

--------------------------------

### Configure Eraser MCP Server for IDEs

Source: https://docs.eraser.io/docs/mcp

Add this configuration to your MCP config file for IDEs like Cursor, VS Code, or GitHub Copilot to use the local Eraser MCP server with API key authentication.

```json
{
  "mcpServers": {
    "eraser": {
      "command": "npx",
      "args": ["-y", "@eraserlabs/eraser-mcp"],
      "env": {
        "ERASER_API_KEY": "your_api_key"
      }
    }
  }
}
```

--------------------------------

### Add Label to Connection

Source: https://docs.eraser.io/docs/syntax

Shows how to add a descriptive label to a connection between two nodes. The label follows the connection syntax and is separated by a colon.

```plaintext
Storage > Server: Cache Hit
```

--------------------------------

### Set Multiple Properties on Columns

Source: https://docs.eraser.io/docs/syntax-2

Append multiple properties to a column name using key-value pairs within square brackets.

```plaintext
Web App [icon: monitor, color: blue] > DB [icon: database, color: green]: Start transaction
```

--------------------------------

### Google Cloud Architecture Diagram

Source: https://docs.eraser.io/docs/examples

Define Google Cloud services and their relationships to visualize a cloud architecture. Supports grouping and custom icons.

```eraser
// Define groups and nodes
Stream [icon: kafka, color: grey]
Ingest {
  Pub/Sub [icon: gcp-pubsub]
  Logging [icon: gcp-cloud-logging]
}
Pipelines {
  Dataflow [icon: gcp-dataflow]
}
Storage [icon: gcp-cloud-storage] {
  Datastore [icon: gcp-datastore]
  Bigtable [icon: gcp-bigtable]
}
Analytics {
  BigQuery [icon: gcp-bigquery]
}
Application [icon: gcp-app-engine] {
  App Engine [icon: gcp-app-engine]
  Container Engine [icon: gcp-container-registry]
  Compute Engine [icon: gcp-compute-engine]
}

// Define connections
Stream > Ingest
Logging > Analytics > Application
Pub/Sub > Pipelines > Storage > Application
```

--------------------------------

### Add a Label to a Connection

Source: https://docs.eraser.io/docs/syntax-3

Append a colon followed by the label text to a connection to provide additional context. The label appears on the connection line.

```text
Issue > Bug: Triage
```

--------------------------------

### Define Paired Alternative Blocks

Source: https://docs.eraser.io/docs/syntax-2

Use 'alt' and 'else' blocks to represent conditional logic where one path is taken based on a condition.

```eraser
alt [label: if complete] {
 Server > Client: Success
}
else [label: if failed] {
 Server > Client: Failure
}
```

--------------------------------

### Configure MCP Server for Eraser Integration

Source: https://docs.eraser.io/docs/using-ai-agent-integrations

Add this configuration to your mcp.json file to enable the Eraser MCP server for deeper integration with MCP-compatible agents.

```json
{
  "mcpServers": {
    "eraser": {
      "type": "http",
      "url": "https://app.eraser.io/api/mcp"
    }
  }
}
```

--------------------------------

### eCommerce SQL Schema

Source: https://docs.eraser.io/docs/examples-4

SQL script for creating tables and defining relationships for an eCommerce database. Includes tables for carts, customers, products, and categories.

```sql
// SQL schema creation script

CREATE TABLE CART
(
  ID INTEGER PRIMARY KEY NOT NULL,
  CUSTOMER_ID INTEGER NOT NULL,
  NAME VARCHAR(50) NOT NULL
);
CREATE TABLE CART_ITEM
(
  CART_ID INTEGER NOT NULL,
  PRODUCT_ID INTEGER NOT NULL,
  ITEM_QTY INTEGER NOT NULL,
  LAST_UPDATED TIMESTAMP DEFAULT CURRENT_TIMESTAMP() NOT NULL,
  PRIMARY KEY ( CART_ID, PRODUCT_ID )
);
CREATE TABLE CATEGORY
(
  ID INTEGER PRIMARY KEY NOT NULL,
  NAME VARCHAR(50) NOT NULL,
  DESCRIPTION CLOB
);
CREATE TABLE CUSTOMER
(
  ID INTEGER PRIMARY KEY NOT NULL,
  NAME VARCHAR(100) NOT NULL,
  PASSWORD VARCHAR(20) NOT NULL,
  LAST_UPDATED TIMESTAMP DEFAULT CURRENT_TIMESTAMP() NOT NULL,
  REGISTRATION_DATE DATE DEFAULT CURRENT_DATE() NOT NULL
);
CREATE TABLE PRODUCT
(
  ID INTEGER PRIMARY KEY NOT NULL,
  NAME VARCHAR(50) NOT NULL,
  DESCRIPTION CLOB NOT NULL,
  PRICE DECIMAL(5,2) NOT NULL,
  STOCK_QTY INTEGER NOT NULL,
  LAST_UPDATED TIMESTAMP DEFAULT CURRENT_TIMESTAMP() NOT NULL,
  CATEGORY_ID INTEGER NOT NULL
);
ALTER TABLE CART ADD FOREIGN KEY ( CUSTOMER_ID ) REFERENCES CUSTOMER ( ID );
CREATE INDEX FK_CUSTOMERCART_INDEX_1 ON CART ( CUSTOMER_ID );
ALTER TABLE CART_ITEM ADD FOREIGN KEY ( CART_ID ) REFERENCES CART ( ID );
ALTER TABLE CART_ITEM ADD FOREIGN KEY ( PRODUCT_ID ) REFERENCES PRODUCT ( ID );
CREATE INDEX FK_CARTITEMPRODUCT_INDEX_B ON CART_ITEM ( PRODUCT_ID );
CREATE UNIQUE INDEX UNIQUE_NAME_INDEX_F ON CATEGORY ( NAME );
ALTER TABLE PRODUCT ADD FOREIGN KEY ( CATEGORY_ID ) REFERENCES CATEGORY ( ID );
CREATE INDEX FK_PRODUCTCATEGORY_INDEX_1 ON PRODUCT ( CATEGORY_ID );

```