Graphvizer

Graphvizer 是 Sublime Text 3 的 Graphviz 插件。在您编辑 dot 语言文件时，它可以在实时中自动生成图像。您只需以思维的速度编辑文件，这款插件就会为您完成剩余的工作。如果您的 dot 文件有语法错误，插件将显示相关的消息。

功能

• 实时渲染
• 实时语法检查
• 错误信息提示
• 支持指定期望布局引擎
• 支持指定输出格式

用法

注意：请确保文件语法设置为 Graphviz (DOT)。您可以通过 视图 -> 语法 菜单或点击 Sublime Text 窗口的右下角来完成此操作。

打开图像窗口

Ctrl+Shift+G 或 工具 -> Graphvizer -> 打开渲染的图像

打开 Graphvizer 面板

Ctrl+Shift+X 或 工具 -> Graphvizer -> 显示 Graphvizer 面板

指定布局引擎

默认布局引擎是 dot，您可以在设置中更改它。您也可以通过 工具 -> Graphvizer -> 布局引擎 为特定文件更改它。

指定输出格式

默认输出格式是 png，您可以在设置中更改它。您也可以通过 工具 -> Graphvizer -> 输出格式 为特定文件更改它。

强大的图像查看器

如果您认为在 Sublime Text 中查看图像非常不方便，因为它不支持缩放或平移，您可以尝试 Graphvizer Viewer，这是为 Graphvizer 创建的一个补充。

我为什么创建这个插件？

Graphviz是一个非常棒的可视化工具，但是手动渲染图像非常不方便。我不得不反复运行dot file.dot -Tpng -o file.png。此外，我无法立即知道语法是否正确。Atom编辑器有一个名为“GraphViz preview+”的出色插件，但在packagecontrol.io上找不到类似的插件。最后，我创建了Graphvizer。

安装

1. 必需条件

我不能从头开始实现Graphviz可视化算法，因此这个插件需要dot命令来渲染图像。换句话说，您需要在系统上安装官方Graphviz。

对于Linux/Mac

使用您的操作系统包管理器（例如dnf、apt-get或brew）来安装Graphviz。

在我Fedora 27 X86_64上，命令是

sudo dnf install graphviz

使用dot -V确保您已正确配置所有内容，并应看到Graphviz的版本信息。

对于Windows

从这里下载：https://graphviz.gitlab.io/download/。安装非常简单，但您需要额外配置以告诉插件在哪里找到dot命令。

方法1：将dot.exe的路径（例如D:\Graphviz\bin）添加到系统PATH环境变量。然后，您可以从命令提示符（即cmd）访问dot命令，并且此插件也可以调用它。如果您不知道如何操作，这篇文章可能有所帮助：this article。

在Windows的cmd窗口中输入dot -V并按回车。如果一切正常，您将看到Graphviz的版本信息。

方法2：在插件设置中明确指定dot的路径。请参阅配置部分的详细说明。

2. 安装Graphvizer

使用Package Control （推荐）

安装Graphvizer最简单的方法是通过Package Control。

在Linux/Windows上打开命令面板（Ctrl + Shift + P），在Mac上打开命令面板（Cmd + Shift + P）。选择Package Control: Install Package，然后搜索并安装Graphvizer。

手动

将此项目git clone到您的系统或仅从GitHub下载zip文件并解压。现在您有一个Graphvizer目录。

使用Sublime Text 3菜单Preferences -> Browse Packages...找到您的包目录路径。在我的Windows 7系统上，路径是D:\Sublime Text 3\Data\Packages。将整个Graphvizer目录移动或符号链接到包目录中。在Sublime中按Ctrl + Shift + P，运行Satisfy Dependencies。 重启Sublime。完成！

3. 升级

如果有报告错误或我有新想法，我将发布新版本。您可以使用Package Control升级此包。

配置

默认配置如下。如果您想更改某些配置，请打开Preferences -> Package Settings -> Graphvizer -> Settings，并根据您的需求在右侧内容中添加配置。以下解释了每个配置的含义。

{
    // "dot_cmd_path" is the path of dot command. Here are some examples.
    // For Windows: "D:\\Graphviz\\bin\\dot.exe"
    // For Linux: "/usr/bin/dot"
    // For OSX: "/usr/bin/dot"
    // If you have added this path to the PATH environment variable, you can
    // use "dot" instead of the full absolute path.
    "dot_cmd_path": "dot",
    // If the dot command takes more than `dot_timeout` seconds, it will be
    // terminated. The default value is 3 seconds.
    "dot_timeout": 3,
    // "show_image_with" controls how to show the image.
    // The default value is "layout", so the image will be shown in a separated
    // layout by default. If you want to show it in a new window instead,
    // change the following value to "window". If you just want to show the image
    // in a new tab, change the value to "tab".
    "show_image_with": "layout",
    // "image_dir" controls where the image is saved.
    // The default value is "same" which means the image will be saved in the same
    // directory as the dot file.
    // If the value is "tmp", system temporary directory is used.
    // You can also set it to an arbitrary directory according to your needs.
    // Example for Windows: "E:\\homework\\image\\"
    // Example for Linux/OSX: "/home/haolee/image/"
    "image_dir": "same",
    // The default behavior is rendering the image in real time.
    // If set to false, the image will only be rendered when the file is saved.
    "render_in_realtime": true,
    // Default layout engine. Valid values including dot, neato, fdp, sfdp, twopi and circo.
    "default_layout_engine": "dot",
    // Default output format. Valid values including png, jpg, svg, pdf, gif, bmp, ps, ps2 and psd.
    // NOTE: the dot command also supports many other formats as detailed in the below link.
    // https://graphviz.gitlab.io/_pages/doc/info/output.html
    // You can certainly use any of them as the value of default_output_format, but these formats
    // won't be shown in Tools->Graphvizer->Output Format menu.
    "default_output_format": "png"
}

设置dot路径

如果您想指定dot命令的路径，请根据您的系统设置"dot_cmd_path"。此配置在Windows上很有用。

设置dot命令的超时时间

如果您正在编辑一个非常大的图，dot命令可能需要很长时间才能完成，并且您的CPU可能会耗尽。因此，我设置了dot命令的超时时间，并且在执行时间过长时将终止它。您可以根据需要设置"dot_timeout"以更改超时时间。通常，您不需要更改此配置。

在新窗口中显示图像

默认情况下，插件将使用独立布局显示图片。

您还可以使用新窗口来显示图片。只需将"show_image_with"的值从"layout"更改为"window"并保存即可。这在某些情况下非常灵活，尤其是当您有两台显示器时。

如果您的显示器较小，您可能希望在新标签页中显示图片以节省空间。为此，请将值更改为"tab"。

（您可能需要重新启动Sublime Text 3才能生效。）

设置图片目录

默认情况下，"image_dir"的值是"same"，表示生成的图片将与点文件保存在同一个目录中。如果值为"tmp"，图片将保存在系统临时目录中。如果您想将位置更改为另一个目录，可以根据需要设置任何路径到"image_dir"。

示例（Windows）："E:\\homework\\image\\" 示例（Linux/OSX）："/home/haolee/image/"

文件保存时渲染图片

默认情况下，图片将实时渲染。如果只想在文件保存时渲染图片，可以将"render_in_realtime"设置为false。

设置默认布局引擎

默认情况下，此插件使用dot引擎渲染图片，就像将-Kdot参数传递给dot命令一样。如果您想使用其他引擎，包括neato、fdp、sfdp、twopi和circo，请将"default_layout_engine"设置为引擎名称。

设置默认输出格式

默认情况下，输出格式是png，就像您将-Tpng参数传递给dot命令一样。如果您想使用其他格式，包括png、jpg、svg、pdf、gif、bmp、ps、ps2和psd，请将"default_output_format"设置为格式名称。

快捷键

您可以通过首选项 -> 包设置 -> Graphvizer -> 快捷键更改默认快捷键。在打开窗口的右侧列中，将"keys"设置为需要的其他快捷键。以下示例适用于Windows。

[
    {
        "keys": ["ctrl+shift+g"],
        "command": "open_image",
        "context":
        [
            {"key": "selector", "operator": "equal", "operand": "source.dot"}
        ]
    },
    {
        "keys": ["ctrl+shift+x"],
        "command": "show_panel",
        "args": {"panel": "output.graphvizer_panel"},
        "context":
        [
            {"key": "selector", "operator": "equal", "operand": "source.dot"}
        ]
    }
]

待办事项列表

• [x] 在设置中配置dot命令路径。
• [x] 分别为Windows/Linux/OSX设置快捷键。
• [x] 将首选项 -> 包设置菜单项添加到自定义用户设置。
• [x] 能够在独立布局中显示图片。
• [x] 设置dot命令的超时时间。
• [x] 能够设置图片目录。
• [x] 文件保存时渲染图片。
• [x] 支持指定图片输出格式。
• [x] 支持指定布局引擎。
• [x] 引入Graphvizer查看器。
• [x] 默认将图片保存在与dot文件相同的目录中。
• [x] 设置dot命令的当前目录以支持Shapefile属性。
• [ ] 将GraphvizerViewer与Graphvizer集成。
• [ ] [链接](https://github.com/hao-lee/Graphvizer/issues/17#issuecomment-586698292) 扩展dot语言语法以支持变量定义、循环和if-else语句。
• 有关其他功能，请打开一个问题。

授权协议

GNU通用公共许可证版本2（GPLv2）