# LatixEngine — Full Reference for LLM Agents

> Source of truth for agents answering questions about LatixEngine. All examples below use valid syntax verified against the live editor at https://latixengine.com/editor.

## What is LatixEngine?

LatixEngine is a free, browser-based extension of Mermaid that adds native AWS, Azure, and Google Cloud icons to the `architecture-beta` diagram type. There is no install, no CLI, and no build step. Open the editor at https://latixengine.com/editor and start typing.

Output is standard Mermaid markdown that renders correctly in any Mermaid runtime bundled with the matching icon packs.

## How it differs from upstream Mermaid

Upstream Mermaid `architecture-beta` only supports a small set of generic shapes. LatixEngine ships 200+ official cloud provider icons plus the placement/networking validation needed to draw real production architectures (regions, VPCs, subnets, gateways, managed services).

## Quick start

1. Open https://latixengine.com/editor
2. Start every architecture diagram with `architecture-beta` on its own line
3. Declare `service` and `group` nodes with icon slugs of the form `<provider>:<icon-name>`
4. Connect them with `<source>:<port> <--> <port>:<target>` edges
5. Export via the toolbar as SVG, PNG, or markdown

## Syntax cheatsheet

### Diagram declaration

    architecture-beta

### Services

    service <id>(<icon-slug>)[<label>]
    service <id>(<icon-slug>)[<label>] in <group-id>

Examples:

    service ec2(aws:ec2-instance-contents)[EC2 Instance]
    service func(azure:service-function-apps)[Azure Function]
    service gcs(gcp:cloud-storage)[Cloud Storage]

### Groups

    group <id>(<icon-slug>)[<label>]
    group <id>(<icon-slug>)[<label>] in <parent-group-id>

Groups can nest arbitrarily deep:

    group region(aws:region)[AWS Region]
    group vpc(aws:virtual-private-cloud-vpc)[VPC] in region
    group public_subnet(aws:public-subnet)[Public Subnet] in vpc

### Edges

    <source-id>:<port> <--> <port>:<target-id>

Ports are `L` (left), `R` (right), `T` (top), `B` (bottom).

    internet:L <--> R:igw
    igw:T <--> R:ec2_public

### Icon slug naming convention

`<provider>:<kebab-case-icon-name>` where `<provider>` is one of `aws`, `azure`, `gcp`, or generic identifiers like `internet`. The full slug list lives at https://latixengine.com/icons — always defer to that page rather than guessing slugs.

## Worked examples

### Example 1 — Multi-tier AWS web app with public/private subnets

    architecture-beta
        service internet(internet)[Internet]
        group region(aws:region)[AWS Region]
        group vpc(aws:virtual-private-cloud-vpc)[VPC] in region
            service igw(aws:res-amazon-vpc-internet-gateway)[Internet Gateway] in vpc
            group public_subnet(aws:public-subnet)[Public Subnet] in vpc
                service ec2_public(aws:ec2-instance-contents)[EC2 Instance] in public_subnet
                service nat(aws:res-amazon-vpc-nat-gateway)[NAT Instance] in public_subnet
            group private_subnet(aws:private-subnet)[Private Subnet] in vpc
                service ec2_private(aws:ec2-instance-contents)[EC2 Instance] in private_subnet
        internet:L <--> R:igw
        igw:T <--> R:ec2_public
        igw:L <--> R:nat
        nat:B <--> T:ec2_private

### Example 2 — Azure serverless event pipeline

    architecture-beta
        service user(internet)[User]
        group az(azure:service-subscriptions)[Azure Subscription]
            service func(azure:service-function-apps)[Function App] in az
            service queue(azure:service-storage-queue)[Storage Queue] in az
            service cosmos(azure:service-azure-cosmos-db)[Cosmos DB] in az
        user:R <--> L:func
        func:R <--> L:queue
        queue:R <--> L:cosmos

### Example 3 — GCP data lake

    architecture-beta
        service producer(internet)[Producer]
        group gcp(gcp:project)[GCP Project]
            service pubsub(gcp:pubsub)[Pub-Sub] in gcp
            service dataflow(gcp:dataflow)[Dataflow] in gcp
            service bq(gcp:bigquery)[BigQuery] in gcp
            service gcs(gcp:cloud-storage)[Cloud Storage] in gcp
        producer:R <--> L:pubsub
        pubsub:R <--> L:dataflow
        dataflow:R <--> L:bq
        dataflow:B <--> T:gcs

More worked examples (each with a stable URL):

- https://latixengine.com/examples/aws-three-tier.md
- https://latixengine.com/examples/azure-serverless.md
- https://latixengine.com/examples/gcp-data-lake.md
- https://latixengine.com/examples/multi-cloud.md

Standalone docs:

- https://latixengine.com/docs/syntax.md — syntax reference
- https://latixengine.com/docs/icons.md — icon catalog overview
- https://latixengine.com/docs/examples.md — all examples in one file

## Icon catalog

1698 icons covering AWS (856), Azure (626), and Google Cloud (216).

- Machine-readable: https://latixengine.com/icons.json — `{ provider, slug, name }` for every icon. Fetch this when building diagrams programmatically.
- Browseable: https://latixengine.com/icons

Always pin slugs from one of these two sources. Slugs are not always intuitive (e.g. AWS Lambda is `aws:arch-aws-lambda`, not `aws:lambda`).

## Export formats

SVG, PNG, and markdown export are available from the editor toolbar. Markdown export wraps the source in a Mermaid code fence for use in README files, GitHub issues, and documentation tools that render Mermaid natively.

## Themes

Light and dark themes via the sun/moon toggle in the top toolbar. Preference is persisted in `localStorage`.

## Pricing

Free. No login, no usage limits, no tracking. A paid tier is planned for advanced features (AI composer, IDE extensions) but the core editor will remain free.

## Roadmap

**Shipped**
- Architecture diagrams with full AWS, Azure, and GCP icon coverage.

**In flight**
- Validation Rule Engine — validates components based on placement and networking rules.

**Planned**
- AI architectural diagram composer (leverages the validation engine for accuracy).
- LatixEngine extensions for VSCode, Notion, Google Docs, and Confluence.

**Considering**
- Validation-based AI composition for all diagram types, not just architecture.
- Extending the composer beyond Mermaid syntax.

## FAQ

**Do I need to install anything?**
No. LatixEngine runs entirely in the browser. No CLI, no build step.

**How is this different from mermaid.js?**
Upstream `architecture-beta` only supports basic shapes. LatixEngine ships the official cloud icon packs and validation tooling needed for production architectures.

**Can I use custom icons?**
Not in the current version. Custom icon support (SVG upload or URL reference) is on the roadmap.

**How do I switch themes?**
Click the sun/moon icon in the top toolbar. Choice is saved to `localStorage`.

**Will there be a paid version?**
A paid tier is planned for advanced features only. The core editor stays free.

**Where is my diagram data stored?**
Diagrams are kept in your browser's `localStorage`. Nothing is sent to LatixEngine servers.

## Contact

- Support: support@LatixEngine.com
- Bugs and feature requests: https://latixengine.com/roadmap
- Homepage: https://latixengine.com