Puis-je ajouter des formes personnalisées à draw.io?

11

J'aime la grande variété de formes disponibles (Général, Flèches, Électrique, etc.) mais j'ai besoin de symboles électriques supplémentaires. Puis-je ajouter des formes personnalisées d'une manière ou d'une autre?

Andrew
la source

Réponses:

7

Sous Fichier-> Nouvelle bibliothèque, vous obtiendrez une boîte de dialogue qui vous permet d'y faire glisser des images et des SVG. Vous pouvez également ajouter des images / SVG à l'aide du sélecteur de système de fichiers et par URL (les boutons en bas de la boîte de dialogue).

Une fois que vous avez ajouté vos formes personnalisées, donnez un nom de fichier à la bibliothèque et appuyez sur Enregistrer. Cela enregistrera la bibliothèque en tant que fichier de bibliothèque dans votre stockage sélectionné et ajoutera la bibliothèque aux sections sur le côté gauche. En utilisant les icônes au-dessus de la bibliothèque, vous pouvez la modifier à nouveau ou la supprimer de votre barre latérale. Les formes de cette bibliothèque se comporteront alors comme n'importe quelle autre bibliothèque.

Les bibliothèques personnalisées persistent dans votre barre latérale par navigateur, si vous souhaitez les ajouter à un autre navigateur, utilisez Fichier-> Ouvrir la bibliothèque pour ajouter à nouveau. Lors de l'actualisation, la bibliothèque restera en place, seule la suppression spécifique de la barre latérale à l'aide de l'icône en croix la supprimera.

Il existe une vidéo un peu ancienne sur les formes personnalisées utilisant Google Drive sur YouTube .

David
la source
1
Est-il possible de convertir un groupe d'objets existant en un nouvel objet qui ne peut pas être modifié mais qui peut être connecté à d'autres objets avec des connecteurs?
endolith
3

Vous pouvez créer vos propres formes. Pour cela, allez à Extras > Create shape. Il nécessite des détails de forme au format XML comme nous le voyons en SVG mais différent. Vous pouvez consulter leurs documents officiels pour comprendre les différents composants.

Exemple

<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>

Le code ci-dessus peut être utilisé pour créer la forme suivante.

entrez la description de l'image ici

Vous pouvez changer le style à partir du panneau latéral droit.

Amit Kumar Gupta
la source