Export Diagram as Image

❮❮ ❮ Back

Next ❯ ❯❯

Task

• Export PlantUML diagram as SVG or PNG image.

Steps in VS Code Using the PlantUML Extension

① Open PlantUML code file

• Open PlantUML (PUML) file in code editor, clicking in it to ensure it has focus.

② Access Command Palette

• Press Shift+Command+P (Mac) or Ctrl+Shift+P (Windows/Linux) to access VS Code Command Palette.

③ Use PlantUML: Export Current Diagram

• In the Command Palette, enter/select PlantUML: Export Current Diagram.
• Select desired image format from list (svg or png recommended).

④ Access image file

• In PlantUML success notification, click View Report button to find image file path.
  • 💡 Pro Tip: For Git working trees, a folder out that contains exported image is generated at top-level of working tree. Add /out to .gitignore.
• Image file name specified in @startuml declaration.

Steps in PlantUML Online Server

• Click PNG or SVG link at bottom of page to open image.
• Click File ❯ Save Page As… to save.
  • Or press Command+S (Mac) or Ctrl+S (Windows/Linux).

---

❮❮ ❮ Back

Next ❯ ❯❯