Estilização

O LikeC4 oferece recursos avançados de personalização. Você pode alterar cores, formas, tamanhos e ícones de elementos e relacionamentos.

Elemento

Há várias formas de estilizar elementos:

• Estilizar todos os elementos de um tipo em specification
• Estilizar um elemento específico em model ou deployment
• Sobrescrever estilos em uma view (veja mais na próxima seção)

Elementos de um tipo

Para estilizar todos os elementos de um tipo, use o bloco style em specification:

specification {
  element user {
    style {
      // every element of 'user' kind
      shape person // has 'person' shape
      color amber  // and amber color
    }
  }

  element frontend {
    style {
      // every 'frontend' displayed as browser
      shape: browser // ':' is optional, but if you prefer
    }
  }
}

Elemento específico

Para estilizar um elemento específico, use o bloco style aninhado.
Os estilos do elemento sobrescrevem os definidos para o tipo:

specification {
  element actor {
    style {
      shape person
      color red
    }
  }
}

model {
  customer = actor 'Customer' {
    style {
      // inherits shape and overrides color
      color green
    }
  }
}

Por visão

A próxima seção explica como personalizar elementos em cada visão.

Propriedades de estilo

Forma

specification {
  element actor {
    style {
      shape person
    }
  }
}

Formas disponíveis: rectangle (padrão), component, storage, cylinder, browser, mobile, person, queue, bucket, document e agent.

Cor

specification {
  element actor {
    style {
      color red
    }
  }
}

Cores disponíveis: primary (padrão), secondary, muted, amber, gray, green, indigo, red.

Dica

Também é possível usar cores personalizadas definidas na especificação.

Tamanho

O tamanho de um elemento é controlado pelas seguintes propriedades:

propriedade	explicação
size	tamanho da forma
padding	espaço ao redor do título do elemento
textSize	tamanho da fonte do título do elemento

Cada propriedade aceita: xsmall, small, medium, large ou xlarge
(ou as formas curtas xs, sm, md, lg, xl).
O tamanho padrão é medium.

Quando o tamanho da forma é xsmall, apenas o título do elemento é exibido.

specification {
  element element {
    style {
      size large
      textSize xl
    }
  }
}

Opacidade

Se um elemento for exibido como um grupo (como um container), você pode definir sua opacidade:

specification {
  element element {
    style {
      opacity 10%
    }
  }
}

Borda

Se um elemento for exibido como um grupo (como um container), você pode alterar o estilo da borda:

specification {
  element element {
    style {
      opacity 10%
      border dotted
    }
  }
}

Valores aceitos: dashed (padrão), dotted, solid, none.

Múltiplas instâncias

Para exibir um elemento como várias instâncias, defina multiple como true:

specification {
  element element {
    style {
      multiple true
    }
  }
}

Ícone

Os elementos podem ter um ícone em qualquer formato de imagem aceito pelo navegador (png, svg, webp etc.):

model {
  pg = service 'PostgreSQL' {
    style {
      // Publicly available with `https://`
      icon https://icons.terrastruct.com/dev%2Fpostgresql.svg

      // or local image, relative to current file
      icon ../postgresql.svg
    }
  }
}

Dica

icon pode ser definido diretamente como uma propriedade, sem o bloco style:

model {
  pg = service 'PostgreSQL' {
    icon https://icons.terrastruct.com/dev%2Fpostgresql.svg
  }
}

Dica

Use none para remover um icon:

pg = service 'PostgreSQL' {
  icon none
}

Suporte a modos claro e escuro em SVG

Ao usar SVGs, você pode incluir as versões clara e escura em um único arquivo e usar uma media query prefers-color-scheme para alternar entre elas.

O LikeC4 renderizará a versão correta com base no tema atual.

  <style>
    .svg-dark { display: none; }
    @media (prefers-color-scheme: dark) {
      .svg-light { display: none; }
      .svg-dark  { display: inline; }
    }
  </style>
  <g class="svg-light">
    <!-- Light mode icon version here -->
  </g>
  <g class="svg-dark">
    <!-- Dark mode icon version here -->
  </g>

Experimente mudar o tema para ver o comportamento em ação.

Ícones incluídos

O LikeC4 inclui mais de 5.000 ícones destes pacotes:

• aws: de aws-icons.com
• azure: de microsoft.com
• bootstrap: de Bootstrap Icons (mais de 2.000 ícones)
• gcp: de gcpicons.com
• tech: de techicons.dev e svglogos.dev

Exemplo:

model {
  fn = service 'Lambda Function' {
    icon aws:lambda
  }
  k8s = service 'K8s Service' {
    icon gcp:google-kubernetes-engine
  }
  pg = storage 'PostgreSQL' {
    icon tech:postgresql
  }
  ui = component 'User Interface' {
    icon bootstrap:house
  }
}

Tecnologia derivada automaticamente

Ícones incluídos (exceto bootstrap:) definem automaticamente a technology do elemento quando ela ainda não foi informada. Por exemplo, icon tech:docker define a tecnologia como “Docker”. Veja Tecnologia para mais detalhes.

Dica

Use o preenchimento automático de código do VS Code para explorar os ícones disponíveis.

Cor do ícone

Use iconColor para sobrescrever a cor do ícone independentemente do preenchimento do elemento.
Aplica-se aos ícones bootstrap:* incluídos.

model {
  api = service 'API' {
    style {
      icon tech:nodejs    // ⛔️ Not applied
      icon bootstrap:gear // ✅ Applies to `bootstrap:*` icons.
      iconColor indigo
    }
  }
}

iconColor aceita cores do tema ou cores personalizadas definidas na especificação.

Tamanho do ícone

Use iconSize para redimensionar o ícone sem alterar o tamanho do elemento:

model {
  api = service 'API' {
    style {
      icon tech:nodejs
      iconSize sm
    }
  }
}

iconSize usa os mesmos valores de tamanho e, por padrão, usa o size do elemento (ou seja, se não for especificado e o tamanho for large, o ícone também será large).

Posição do ícone

Use iconPosition para posicionar o ícone ao redor do texto do elemento:

model {
  api = service 'API' {
    style {
      icon tech:nodejs
      iconPosition top
    }
  }
}

Valores aceitos: left (padrão), right, top, bottom.

Ícones com aliases

Com o prefixo @, você pode usar pastas com aliases (saiba mais em configuração):

model {
  pg = service 'PostgreSQL' {
    style {
      // local images, based on aliased folders
      icon @/postgresql.svg
    }
  }
}

Relacionamento

Há várias formas de estilizar relacionamentos:

• Estilizar todos os relacionamentos de um tipo em specification
• Estilizar um relacionamento específico em model
• Personalizar por view (explicado aqui)

Relacionamentos de um tipo

Relacionamentos podem ser estilizados na especificação:

specification {
  relationship async {
    color amber
    line dotted
    head diamond
    tail vee
  }
}

Relacionamento específico

model {
  customer -> ui 'opens in browser' {
    style {
      line solid
      color amber
    }
  }
}

Relacionamento por visão

A próxima seção explica como personalizar relacionamentos por visão.

Propriedades de relacionamentos

Além de color, os relacionamentos podem ter as seguintes propriedades:

Linha

linha	exemplo
dashed	..
solid	..
dotted	..

Por padrão, a linha é dashed.

Tipo de seta

O tipo de seta pode ser definido para a ponta inicial e a ponta final do relacionamento:

tipo	exemplo
normal	..
onormal	..
diamond	..
odiamond	..
crow	..
vee	..
open	..
none	..

onormal significa “normal contornada”, ou seja, sem preenchimento
odiamond significa “losango contornado”

Por padrão, a ponta final é normal e a ponta inicial é none.

model {
  customer -> ui 'opens in browser' {
    style {
      head diamond
      tail crow
    }
  }
}

Múltiplos

Por padrão, vários relacionamentos entre os mesmos dois elementos são combinados em uma única aresta. Se os títulos forem diferentes, o rótulo combinado será [...].

Defina multiple como true para renderizar cada relacionamento como uma aresta separada, com seu próprio rótulo:

specification {
  relationship async {
    multiple true
    line dotted
    color amber
  }
}

Você também pode habilitar esse comportamento por visão em relacionamentos individuais:

views {
  view flows {
    include *
    include customer -> api with {
      multiple true
    }
  }
}

Nota

• multiple true divide os relacionamentos correspondentes em arestas individuais; relacionamentos que não correspondem na mesma conexão permanecem combinados.
• Regras por visão (with { ... }) têm precedência sobre as configurações definidas em specification. Defina multiple false para desabilitar a expansão de relacionamentos específicos em uma visão.
• Arestas expandidas nunca são combinadas em arestas bidirecionais; apenas arestas não expandidas (combinadas) participam da combinação bidirecional.
• A expansão a partir de elementos aninhados é aceita — cada relacionamento se torna sua própria aresta no nível correto do elemento.

Personalização de estilos

A configuração do projeto explica como sobrescrever os estilos padrão.

Configuração do projetoSaiba como personalizar estilos no seu projeto