terrastruct / d2-vscode Goto Github PK
View Code? Open in Web Editor NEWVSCode extension for D2 files.
Home Page: https://d2lang.com
License: BSD 3-Clause "New" or "Revised" License
VSCode extension for D2 files.
Home Page: https://d2lang.com
License: BSD 3-Clause "New" or "Revised" License
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.
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.
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.
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.
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.
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
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.
with #4, we should add settings for the layout, theme, and sketch option to pass to d2
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]
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
add a eslint/prettier config to standardize formatting
currently layer
is highlighted but it should be layers
. and steps
needs to be added
% d2 in.d2
success: successfully compiled in.d2 to in.svg
% 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
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
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
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
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?
it happens whenever I try to preview or compile to svg.
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:
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>
.
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.
D2's CLI also spits out periodic messages when it takes a long time terrastruct/d2#1058
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:
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.
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.
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
(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)
I'm sure there are a large number of users who would love to have a plugin for Jetbrains IDEs in addition to VSCode.
Extension version: 0.6.1
Expectation:
The terminal shouldn't open when formatting a D2 document.
Steps to reproduce:
editor.action.formatDocument
, hotkey Shift+Alt+FColor 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.
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!
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?
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:
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.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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.