Diagrams As Code

ilograph

Example

/Applications/Ilograph\ Desktop.app/Contents/MacOS/Ilograph\ Desktop  simple.yaml -o simple.html
resources:
- name: Users
  subtitle: Users of the system
  color: Gray
  style: plural
  icon: Networking/user.svg

- name: My Environment
  subtitle: Environment
  color: navy
  children:
  - name: Service A
    subtitle: Service
    icon: Networking/cloud-server.svg

  - name: Service B
    subtitle: Service
    color: Firebrick
    icon: Networking/cloud-server.svg

  - name: Data Store X
    subtitle: Database
    color: Purple
    description: This is a description
    icon: Networking/database.svg

perspectives:
- name: Dependency
  relations:
  - from: Users
    to: Service A, Service B
    label: Use

  - from: Service A
    to: Data Store X
    label: Read

  - from: Service B
    to: Data Store X
    label: Read/Write
    description: Labels can be given extended descriptions, like this

  notes: |-
    Welcome to your Ilograph diagram.

    Your diagram comes pre-populated with resources and a sample perspective.

    **Need Help**? Read [Creating your first Ilograph diagram in 5 minutes](https://www.ilograph.com/docs/editing/tutorial/#making-some-simple-changes). Additional resources are available on the [Ilograph Docs](https://www.ilograph.com/docs/editing/).

    **Example Diagrams**
    [AWS Diagram (Relation)](https://app.ilograph.com/demo.ilograph.Ilograph/Request)
    [AWS Diagram (Sequence)](https://app.ilograph.com/demo.ilograph.Ilograph/Get%2520diagram)
    [Datacenter Diagram](https://app.ilograph.com/demo.ilograph.Stack%2520Overflow%2520Architecture%2520\(2016\)/Traffic)