Sublime Text Diagram Plug-in

Overview

This is a modified version from jvantuyl‘s work, click here to view details.

This is a plugin that renders diagrams in Sublime Text 2 or 3.

By default, it binds the Alt-D key (preview diagram) and registers a command on the Command Palette. Place your cursor in your diagram or select lines of text and trigger the command. Multiselections are allowed.

To generate diagrams, simplely press Ctrl-B, you will get diagrams in the same directory with source file.

If you wish to override the viewer used, disable start-time sanity checks, or change the default character set for diagram files, search “Diagram Settings” in Command Palette, copy settings from “default settings” to “user settings”, change any one as you wish.

Install

To install from scratch, it’s necessary to have:

To install, click menu Preferences – Browse Packages.., unzip the plugin (or put a checkout of this project for the original version) into the popup directory.

Download

The source is available via git at:

https://github.com/qjebbs/sublime_diagram_plugin.git

Or as a tarball at:

https://github.com/qjebbs/sublime_diagram_plugin/tarball/master

Support

Operating Systems: MacOS X, Linux, Windows

Diagram Types: PlantUML

Viewers (in order of preference):

  • Sublime3Viewer
  • WindowsDefaultViewer
  • QuickLookViewer
  • EyeOfGnomeViewer
  • PreviewViewer
  • FreedesktopDefaultViewer

Patches to support additional viewers or diagrams are welcome.

Modifications

  • Totally rewrite the syntax file, full support of all diagram types and salt, including skinparam support for styles, inner HTML and Creole.
  • Add setting for output file format, available: png, svg, eps, latex.
  • Add Diagram to Build System.
  • In preview mode, diagrams are generated to %TEMP%/TempDiagrams.
  • Include Preprocessing support, such as “!include styles.wsd”
  • No more random file name, and has generated diagrams more neatly organized.
  • Add Goto Anything support.
  • Add Sublime3Viewer for viewing diagram images in sublime text 3. Thanks to hardillb.
  • Settings take effect immediately.
  • Add Ctrl+/, Ctrl+Shift+/ quick comment support.
  • Add part of snippets.
  • PlantUML Document intergrated.
  • Key binding, menu, command changes
  • Brief console messages

Operations

Press Alt D to preview.

Preview mode tend to preview the current diagram, unless you select part of a diagram (more the one line) or more than one diagram.

Press Ctrl B to build diagrams for current file.

Build Command tend to build all diagrams unless you select some of them or part of a diagram.

Preview of new syntax & Side by side viewing (multiple column)

This is a preview for activity diagram with “Monokai Extend” color scheme.

Side by side viewing is a more convenience way to edit plantuml diagrams. Each time you view the diagram, the result will refresh in the right one place, no popup window or new view.

mult_col_view

STEP 1

If you are using sublime text 3 and keep the default diagram plugin settings, you can ignore this step.

Make sure you are using sublime text 3 and have followed settings:

"viewer" : "Sublime3Viewer", 
"format": "png" // png, svg, eps, latex

STEP 2

press alt D to preview diagram; press alt shift 2 to switch to 2 columns; drag the preview to new column.

Preview of Goto Symbol

Press Ctrl R to list all diagram titles in current file.

Perfectly deal with complex titles. Same process in using title as file name.

Example Results

Activity

Component1

Component2

State

salt

Thanks

Special thanks to all of those who have contributed code and feedback, including:

  • Tobias Bielohlawek (Syntax Highlighting Support)
  • Julian Godesa (UX Feedback)
  • Seán Labastille (Preview Support, Multi-Diagram Support)
  • Kirk Strauser (Python 3 / SublimeText 3 Support)
  • Stanislav Vitko (PlantUML Updates)
  • Constantine ? (Windows Viewer, Charset Support, Various Other Fixes)
  • Marcelo Da Cruz Pinto (Windows Viewer)
  • Peter Ertel (PEP8 Cleanup, Windows Improvements)
  • Juan Cabrera (Version Updates)

 

4 comments

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注