terrastruct/d2-vscode

VSCode extension for D2 files.

d2-vscode's Issues

add `font` keyword

terrastruct/d2#1010

create d2 compile task

1. create a vs code task to run d2.
2. create a problem matcher to parse errors or successful compile.
3. preview should be updated to render using this task
4. display errors from matched compile error

example success output to match

% d2 in.d2 
success: successfully compiled in.d2 to in.svg

example error output to match

% d2 in.d2 
err: failed to compile: 5:1: invalid text beginning unquoted key
err: 7:1: unexpected map termination character } in file map
err: 8:1: block string must be terminated with |

See: https://code.visualstudio.com/docs/editor/tasks and https://code.visualstudio.com/api/extension-guides/task-provider

add bold, italic, underline as keywords

in vscode extension on windows, I get 'D2.<command>' not found

it happens whenever I try to preview or compile to svg.

fresh install/upgrade, sketch mode on in settings but not actually on

Kapture.2023-03-01.at.20.36.39.mp4

i recently upgraded from like 0.3.0 to 0.8.1. i'm not sure if sketch mode is on by default or if it was carried over from a previous setting, but it showed on and preview didn't render with it.

when i unchecked and checked again though, preview worked with it.

Render markdown preview with d2 diagrams in code blocks with language `d2`

Thanks for making d2 (and making it open source)! I've been playing around with it and it is great! I also like that there's a vscode and vim extension officially maintained! That's great that you are putting all this effort into making the ecosystem better.

I wanted to check if you were interested in adding a feature that would allow for markdown previews with d2 code blocks to be rendered in the markdown preview. Mermaid, plantuml, graphviz all have third party extensions that do this that you can find on the marketplace. I think it'd be great if this feature was officially supported.

I see that there's already a PR for split screen #11 which is a great start, but it doesn't quite solve the use case I'm thinking about.
I can imagine most users writing documentation in markdown will likely use a live markdown preview to make sure their document renders properly, and it would be nice to have d2 diagrams rendered in this preview.

I made a prototype extension for this, this is what it looks like in practice:

I'm happy to maintain this extension if you feel this feature is out of scope for the official extension. Here's the marketplace and github link to the extension for reference if you want to take a look at the extension or the code:

• https://marketplace.visualstudio.com/items?itemName=kdheepak.d2-markdown-preview
• https://github.com/kdheepak/d2-markdown-preview

Commands not found on version 0.8.4

It seems that 0.8.4 version is bugged in some way. No commands are working (D2.SomethingSomething command not found). Reinstallation does not help. Rolling back to 0.8.3 solves the issue.

error makes preview look frozen

I compiled with dagre, using a keyword it does not support, which returns an error from the CLI.

However, instead of seeing this error, the preview just keeps Loading

Kapture.2023-03-01.at.20.29.02.mp4

(this is probably because the error handling currently only works on a specific type of error that returns line numbers?)

input: |d2
  hello -> world
|

input -> compiler.parse

compiler: {
  parse -> AST
  AST: Abstract Syntax Tree {
    shape: oval
  style.fill: honeydew
  }

  AST -> IR: compile
  IR: Intermediate Representation (IR)
  IR -> graph: compile IR into graph
  graph: Graph\n(shapes & connections) {
    shape: oval
    style.fill: honeydew
  }
}

compiler.graph -> Set Dimensions
Set Dimensions -> Use ruler to measure all texts -> measured graph
Set Dimensions -> Use given, premeasured dimensions -> measured graph

measured graph: {
  shape: oval
  style.fill: honeydew
}

measured graph -> layout engine -> positioned graph

positioned graph: {
  shape: oval
  style.fill: honeydew
}

positioned graph -> exporter -> diagram

diagram: finalized diagram (styled) {
  shape: oval
  style.fill: honeydew
}

diagram -> render SVG

render SVG -> use sketch post processor: optional

use sketch post processor -> SVG bytes

SVG bytes: {
  shape: oval
  style.fill: honeydew
}

SVG bytes -> screenshot for PNG: optional

Legend: {
  top: 0
  left: 0
  blue: "" {
    width: 20
    height: 20
    style.stroke: black
  }
  blue-explanation: Actions {
    shape: text
  }

  green: "" {
    width: 20
    height: 20
    style.fill: honeydew
    style.stroke: black
  }
  green-explanation: Intermediate artifacts {
    shape: text
  }
}

(works fine i remove the top and left. awesome improvement since I last used this plugin @BarryNolte @gavin-ts . i'm switching to vscode to edit D2)

regex parsing error with urls

https://d2lang.com/tour/interactive#links

the : probably messing it up

add task provider to run d2

provide task to simply run d2 (e.g. on a file and create an svg right next to it (can use the preview settings for layout/theme etc))

maybe on a whole directory, or maybe to format the whole workspace

see https://stackoverflow.com/questions/55135876/extension-api-task-provider-build-task-example

customize key bindings

https://twitter.com/golinvauxb/status/1620393448640745479

hello... The D2 extension for vscode steals the CTRL+SHIFT+D shortcut from vscode (that used to open the debug side panel).
Is it possible to customize this keybind? I do not know how to modify such keybindings (that appear in the "Default" list). TIA!

Support .d2.svg and .d2.png like .drawio.svg / .drawio.png in VS Code extension

D2 is a fantastic project, especially the VS Code extension which makes it easier to edit files. I'd like to suggest that the VS Code extension team add the type of slick SVG and PNG integration offered by hediet.vscode-drawio extension.

As stated in the hediet.vscode-drawio documentation:

• .drawio.svg are valid .svg files that can be embedded in Github readme files! No export needed.
• .drawio.png are valid .png files! No export needed.

It would be cool to have the same functionality for D2 diagrams:

• .d2.svg would be valid .svg files that can embed their D2 into the SVG and then the SVG can be easily used directly in Markdown and other files
• same with .d2.png

Once D2 code can be embedded into an .d2.svg or .d2.png file, the visual and code can be managed in the same file and be easily editable by VS Code at the same time.

Thanks!

Show 2D Preview gives an error in VSCode

Hi.

OS: Windows 11
VSCode: 1.74.3

I've tried to start with the d2 VSCode plugin and immediately faced an error. I wanted to try d2 by using the hello world example, when I select "Show D2 Preview" I get the following error:

A system error occurred (ENOENT: no such file or directory, open 'C:\Users<user>\AppData\Local\Temp\2023023-3048-g37xzx.86uwmout.d2.temp'

There is no such file in this directory. I've uninstalled and installed the plug-in, but this didn't help.

Any idea how to solve this?

code snippet color off

What it looks like in vscode preview vs in watch mode

input: |go
  func hello
|

what yes

Couple of non-fatal warnings when trying to add this language to GitHub Linguist

Status: Downloaded newer image for linguist/grammar-compiler:latest
docker.io/linguist/grammar-compiler:latest
8 warnings found when compiling new grammar 'repository `vendor/grammars/d2-vscode` (from https://github.com/terrastruct/d2-vscode.git)':
- Unknown keys in grammar: `source.d2` (in `syntaxes/d2.tmLanguage.json`) contains invalid keys (`#`)
- Unknown keys in grammar: `text.html.markdown.d2` (in `syntaxes/markdown.tmLanguage.json`) contains invalid keys (`information_for_contributors`, `version`)
- Missing include in grammar: `text.html.markdown.d2` (in `syntaxes/markdown.tmLanguage.json`) attempts to include `text.git-commit` but the scope cannot be found
- Missing include in grammar: `text.html.markdown.d2` (in `syntaxes/markdown.tmLanguage.json`) attempts to include `text.html.derivative` but the scope cannot be found
- Missing include in grammar: `text.html.markdown.d2` (in `syntaxes/markdown.tmLanguage.json`) attempts to include `text.log` but the scope cannot be found
- Missing include in grammar: `text.html.markdown.d2` (in `syntaxes/markdown.tmLanguage.json`) attempts to include `source.asp.vb.net` but the scope cannot be found
- Missing include in grammar: `text.html.markdown.d2` (in `syntaxes/markdown.tmLanguage.json`) attempts to include `text.git-rebase` but the scope cannot be found
- Missing include in grammar: `text.html.markdown.d2` (in `syntaxes/markdown.tmLanguage.json`) attempts to include `source.json.comments` but the scope cannot be found

These warnings are not fatal, but may mean the syntax highlighting on GitHub.com may not be as expected.

OK! added grammar source 'vendor/grammars/d2-vscode'
	new scope: source.d2
	new scope: text.html.markdown.d2

Automatically increment build number on merge to master

Currently the version number for the extension in package.json must be incremented/changed manually (if someone remembers).

Using the ci system, is it possible to automatically update the version number?

Proposal, version # format:

[major].[minor].[daily].[build_number]

• Major incremented manually
• Minor incremented on 'official release' build
• Daily incremented by ci on daily build
• build_number incremented on each merge attempt into master.

vsc preview error

on vsc(Mac Venture 13.4.1), the preview of *.d2 makes error now.
Until a few days ago, it worked well.

but on terminal, d2 is working well.

//flow.d2
x -> y

$ d2 flow.d2
success: successfully compiled flow.d2 to flow.svg in 55.019709ms

loading screen

Would be perceived as a lot snappier if we show an immediate loading screen that just streams CLI output until the render shows up.

Or perhaps an overlay so that subsequent renders don't jump from image to text.

Kapture.2023-03-27.at.10.12.46.mp4

D2's CLI also spits out periodic messages when it takes a long time terrastruct/d2#1058

Set displayName to D2

Terminal opens when using "Format Document"

Extension version: 0.6.1

Expectation:
The terminal shouldn't open when formatting a D2 document.

Steps to reproduce:

1. Open a d2 document.
2. Run editor.action.formatDocument, hotkey Shift+Alt+F
3. Terminal opens and displays a message "Document hello.d2 formatted."
4. Close the terminal, format again, terminal opens again.

Extension checks for `d2` executable every time VS Code starts.

I don't have D2 installed globally, it gets installed when I open a project that uses it, so whenever I open VS Code I'm greeted with a nice big pop-up telling me that D2 isn't installed. It seems to be that this line gets run every time VS Code starts.

I don't know whether this is desired behaviour or not, but if it is would it be possible to add an option to disable it?

update README on new functionality

Currently only supports syntax highlighting of .d2 files.

this line is no longer true 🎉 . we should include some gifs/screenshots and delineate newly added functionality from #19

Update README to indicate we're published

rename theme neutral grey to neutral gray

import syntax

terrastruct/d2#1371

`top` and `left` keywords

render diagrams split screen

add `classes`, `grid-columns`, `grid-rows`, and `text-transform` to keywords

layers/steps keywords

currently layer is highlighted but it should be layers. and steps needs to be added

configure d2 layout and theme in preferences

with #4, we should add settings for the layout, theme, and sketch option to pass to d2

d2 HEAD not compatible

not sure why, but there was a regression in master right now where errors are not being shown. when i pull master and run go install ., the following file doesn't report errors when previewing.

but when I install d2 from homebrew, it works fine:

input: |d2
  hello -> world
|

input -> compiler.parse

compiler: {
  parse -> AST
  AST: Abstract Syntax Tree {
    shape: oval
  fill: honeydew
  }

  AST -> compile
}

compiler.compile -> graph
graph: Graph\n(shapes & connections) {
  shape: oval
  fill: honeydew
}

graph -> Set Dimensions
Set Dimensions -> Use ruler to measure all texts -> measured graph
Set Dimensions -> Use given, premeasured dimensions -> measured graph

measured graph: {
  shape: oval
  fill: honeydew
}

measured graph -> layout engine -> positioned graph

positioned graph: {
  shape: oval
  fill: honeydew
}

positioned graph -> exporter -> diagram

diagram: finalized diagram (styled) {
  shape: oval
  fill: honeydew
}

diagram -> render SVG

render SVG -> use sketch post processor: optional

use sketch post processor -> SVG bytes

SVG bytes: {
  shape: oval
  fill: honeydew
}

SVG bytes -> screenshot for PNG: optional

for context, there was a regression with errors not being reported on cli at all, but i already fixed that: terrastruct/util-go@56bcfcd

i wonder if it's something else in util-go changes that could affect this.

the errors are reported exactly the same though so i don't see how it could

run d2 without temporary files

We can avoid creating temporary files for d2 to read and write to. If we execute d2 with - (see d2 --help) it should read from stdin and we can pass the text directly to d2 that way and read the result directly from stdout.

spawnSync > options > input

Create a plugin for Jetbrains

I'm sure there are a large number of users who would love to have a plugin for Jetbrains IDEs in addition to VSCode.

add `direction` as keyword

set up linter

add a eslint/prettier config to standardize formatting

CWD of the plugin (and spawned d2 child process) is unclear

When spawning the child process, the CWD is not set. This leads to unexpected behavior. Specifically, d2 cannot reliably resolve relative references to images to be included in the rendered diagram. This makes it necessary for the references to be absolute, which makes the .d2 non-portable.

d2-vscode/src/docToPreviewGenerator.ts

Line 109 in db793e9

const proc = spawnSync(d2Path, [

Render diagrams from comments containing D2 text in any language

See https://news.ycombinator.com/item?id=33705291

Detection of d2 on WSL

Hello,

I am using VS Code to open a project on WSL thanks to official WSL extension.

I installed d2 on WSL with the provided command:

curl -fsSL https://d2lang.com/install.sh | sh -s --

The command is in the path since I can call it from the terminal:

> d2 --version
v0.4.1

But the d2 extension provide the following error:

[11:29:34] - ************************************************************
[11:29:34] - D2 executable not found.
[11:29:34] - Make sure the D2 executable is installed and on your system PATH.
[11:29:34] - https://d2lang.com/tour/install
[11:29:34] - ************************************************************
[11:35:51] - Preview for test.d2 has errors.

In the preview, I have the following error: spawnSync d2 ENOENT

Is WSL is officially supported by the extension ? If not, is it possible to add the support ?

I really like d2 and I would like to use it on WSL.

Thanks a lot for your help.

Add support for TALA layout

Currently there's only support for dagre and elk layouts, support for tala should also be added.

---

Using VS Code v1.74.3

D2 VS Code extension v0.6.0

Dark theme option for preview theme

When I try to set the theme for the preview window, none of the dark themes (i.e Dark Mauve/Dark Flagship Terrastruct) are listed in the picker.

remove `preview` and republish

call autoformat on save

do not force color theme on extension activation.

Color theme for the whole visual studio code experience is a very sensitive thing to be changing without express consent from the user. Please make the themes available, but do not activate any theme without interaction.

syntax highlighting bug with unclosed bracket in code

closed bracket

unclosed bracket

md is ok, but not js

Code: |js function todo() { | {
  style.stroke-width: 0
}
Text

add `grid-gap`, `vertical-gap`, `horizontal-gap` as keywords

terrastruct/d2#1178

Publish extension on Open VSX.

The VSCode marketplace terms of service only allow use by visual studio products. This is a problem for third party forks of VSCode, for example:

• GitPod, a cloud ide
• VSCodium, a fully open source version of VSCode
• The code-oss package in ArchLinux.

All of the examples that I listed use the third party Open VSX, which doesn't have these license restrictions. Adding the extension to that repository would allow people using these and potentially others to use the extension more easily.

Add support for ctrl+scroll in preview mode

An easy way to zoom in on a part of the diagram is paramount. I propose Browser-style ctrl+scroll wheel as the standard zoom.

support autocompletion/hinting

Like the title says. I don't know how that is done best for extensions, but I've seen it done via published openapi definitions.

links in diagrams not working

As the title says, if you have a diagram with a link to e.g. another local .md file and click it, nothing happens. For example (remove backslash):

[getting-started](./getting-started.md)

```d2
getting-started {
  link: ./getting-started.md
}
\```

normal link works, link in diagram doesn't. I checked with the developer console what the differences are. While there are other attribute son the a element, they don't change the behavior. I tried copying the attributes from the working link to the diagram link, but that didn't help either. I guess it has to do with it being wrapped by an <svg>.

add `double-border` to keywords