COMPONENT STUDIO TECHRIB

Editor de Componentes SVG

Do desenho vetorial a um componente que o simulador consegue reconhecer, ligar e testar.

No TechRib, um componente não é apenas uma imagem. O editor reúne o visual SVG, as peças, os bornes, os anchors e os metadados que participam da ligação, da simulação e do diagnóstico.

Edição visual SVGPeças e camadasBornes e anchorsEstados e metadados

▶ Abrir o simulador Conhecer o editor

Recurso avançadoA disponibilidade para criar ou substituir componentes depende do perfil e das permissões da conta.

Editor vetorial de componente industrial com camadas, propriedades, bornes e anchors — SVG + TERMINAIS + METADADOSVisual e comportamento técnico trabalhando juntos.

SVGVisual vetorialcorpo, peças e acabamento

▧Seleção por áreaedite conjuntos de elementos

▱Peças e camadasorganização do desenho

TTextosrótulos e identificação técnica

⊙Bornespontos funcionais do componente

◎Anchorsentrada real da fiação

◇Comportamentoestados, contatos e animações

Como funciona

Um fluxo único para ajustar aparência, conexão e comportamento sem perder o contexto técnico.

Escolha ou importe o visual

Abra um componente existente ou carregue uma base SVG para começar.

Organize o desenho

Selecione peças, mova conjuntos, ajuste escala, rotação, cores e textos.

Posicione bornes e anchors

Alinhe o borne visível e o ponto real onde a fiação deve se conectar.

Defina a parte técnica

Revise dados elétricos, contatos, estados, animações e informações do componente.

Valide e salve

Confira visual e terminais; quando disponível, salve como variante sem substituir a base.

Estrutura do componente

O registro relaciona a definição técnica ao arquivo visual usado na biblioteca e na prancha.

component.json + visual.svg

{
  "schema": "techrib.component/v1",
  "id": "meu-componente",
  "name": "Meu componente",
  "category": "industrial",
  "library": true,
  "ui": { "placedWidth": 180 },
  "visual": "visual.svg",
  "terminals": {
    "L1": { "function": "power-input" }
  }
}

Ferramentas do estúdio

Edite o que o usuário vê e também o que o simulador precisa interpretar.

Selecionar uma peça ou uma área inteira
Mover, agrupar, alinhar, distribuir e redimensionar
Girar elementos e editar textos técnicos
Organizar peças e camadas do SVG
Criar e posicionar bornes funcionais
Ajustar anchors sem deslocar o desenho
Configurar elétrica, contatos, estados e animações

Visual não bastaBornes e metadados incorretos podem prejudicar a fiação, a simulação e o diagnóstico mesmo quando o SVG parece perfeito.

As três partes precisam permanecer coerentes

O componente aprovado ocupa a área visual correta, recebe fios exatamente nos terminais e informa ao simulador como cada ponto deve participar do projeto.

Visual SVG

Desenhe o corpo, as peças e os estados visuais preservando proporção e leitura técnica.

Bornes e anchors

Posicione terminais e pontos reais de conexão para que o fio encontre exatamente o borne.

Metadados e comportamento

Relacione o visual às funções elétricas, contatos, estados e informações usadas pelo simulador.

Crie, ajuste e valide dentro do mesmo ambiente.

Abra o simulador, acesse o Editor SVG quando disponível e transforme o desenho em um componente técnico completo.

Acessar simulador