Posso adicionar formas personalizadas ao draw.io?

11

Gosto da grande variedade de formas disponíveis (Geral, Flechas, Elétrica, etc.), mas preciso de mais alguns símbolos elétricos. Posso adicionar formas personalizadas de alguma forma?

Andrew
fonte

Respostas:

7

Em Arquivo-> Nova Biblioteca, você verá uma caixa de diálogo que permite arrastar imagens e SVGs para dentro dela. Você também pode adicionar imagens / SVGs usando o seletor de sistema de arquivos e por URL (os botões na parte inferior da caixa de diálogo).

Depois de adicionar suas formas personalizadas, atribua um nome de arquivo à biblioteca e pressione salvar. Isso salvará a biblioteca como um arquivo de biblioteca no armazenamento selecionado e a adicionará às seções no lado esquerdo. Usando os ícones acima da biblioteca, você pode editá-lo novamente ou removê-lo da barra lateral. As formas nessa biblioteca se comportarão como qualquer outra biblioteca.

As bibliotecas personalizadas persistem na barra lateral por navegador, se você quiser adicioná-las a outro navegador, use Arquivo-> Abrir Biblioteca para adicionar novamente. Ao atualizar a biblioteca, ela permanecerá no lugar, apenas a remoção específica da barra lateral, usando o ícone de cruz, a removerá.

Há um vídeo um pouco antigo sobre formas personalizadas usando o Google Drive no YouTube .

David
fonte
1
É possível converter um grupo de objetos existente em um novo objeto que não pode ser editado, mas pode ser conectado a outros objetos com conectores?
Endolith
3

Você pode criar suas próprias formas. Para isso, vá para Extras > Create shape. Requer alguns detalhes de forma formatada em XML, como vemos no SVG, mas diferentes. Você pode verificar os documentos oficiais para entender os diferentes componentes.

Exemplo

<shape aspect="variable" h="24" name="share2" strokewidth="inherit" w="24">
  <connections/>
  <foreground>
    <strokewidth width="0.5"/>
    <path>
      <move x="12" y="0"/>
      <line x="24" y="12"/>
      <line x="12" y="24"/>
      <line x="0" y="12"/>
      <close/>
      <close/>
      <move x="10" y="16"/>
      <line x="10" y="12"/>
      <line x="15" y="12"/>
      <line x="15" y="14"/>
      <line x="18" y="11"/>
      <line x="15" y="8"/>
      <line x="15" y="10"/>
      <line x="8" y="10"/>
      <line x="8" y="16"/>
      <close/>
    </path>
    <fillstroke/>
  </foreground>
</shape>

O código acima pode ser usado para criar a seguinte forma.

insira a descrição da imagem aqui

Você pode alterar o estilo no painel do lado direito.

Amit Kumar Gupta
fonte