Comments (6)
It took me a minute to wrap my head around this, but it's pretty simple in concept. I'll assume that it's implemented with metadata in the svg and png files. So an SVG or PNG file has D2 file contents stored as metadata. If the extension opens one of these SVG/PNG files, it extracts the metadata as editable text, then when it renders (using D2 on the command line), it puts the text into the SVG/PNG file, which if opened by a image viewer, shows as a fully formed SVG/PNG image.
This solves one BIG problem, it allows you to have a single file for markdown embedding. So when you embed 'foo.d2.svg', it just works for markdown (e.g. github). No editing your source file, then forgetting to run the conversion to another file that is actually embedded into your markdown.
Not my decision to make, and would require some work on D2 cli, as well as the extension. I rate it as 'highly interesting'
from d2-vscode.
we don't want editor lock-in, where your teammate uses vscode and you use vim and you can't decode unless you download vscode. i think this is a good feature to do, but we'd have it in the CLI to do the embedding, so that VSCode users can call the command automatically, and others can do it manually. we also want to make sure the encoding/decoding is the exact same code for all editors (e.g. where in the SVG it looks for the script), so it needs to be centralized in the main program.
shouldn't be hard to do and I think a good idea. i'm wondering if we should include the D2 script in the encoded form to save space (like a playground link https://play.d2lang.com/?script=qlDQtVOo5AIEAAD__w%3D%3D&), or include the raw script for preservation and readability without an outside tool. leaning towards the former, but let me know if you have any thoughts.
thanks @shah !
from d2-vscode.
After walking the dog and thinking about this, I agree that as much functionality should be pushed to the CLI. Then everyone can benefit, not just vscode users. On encoding the data, I would suggest against, having it as clear text is easier to code, easier to test, easier to debug and given the average size of a D2 file, no major space saving and disk space is cheap.
from d2-vscode.
Thanks for the quick look @BarryNolte -- glad to see you find it interesting.
In my opinion, this "D2 as meta data" embedded in SVG or PNG files could be strictly a feature of the VS Code extension (like hediet.vscode-drawio) and should not require any changes to the D2 CLI.
That's because an .d2.svg
or .d2.png
file would be only "editable" by those who understand the metadata. A regular .d2
file (processed by the CLI) would remain unchanged.
from d2-vscode.
the concern with space pertains more to serving images over the web.
i'm not sure what the exact flow for easier to test/debug is, can you elaborate on a use case?
from d2-vscode.
Still probably doesn't make a difference. I have a 6.3Kb test file that's pretty average++, but it creates a 1.6Mb svg and 1.8Mb png file. So, even with 100% compression, it's a 0.4% savings.
I'm just thinking of myself, but if I'm inserting stuff into a file, I want to be able to see it as plainly as possible. The D2 file doesn't hold any secret that isn't present in the svg or png file, so it's not a security problem. It's just an extra step that doesn't really provide a benefit.
from d2-vscode.
Related Issues (20)
- layers/steps keywords
- Extension checks for `d2` executable every time VS Code starts.
- syntax highlighting bug with unclosed bracket in code HOT 3
- vsc preview error HOT 2
- do not force color theme on extension activation. HOT 6
- Update Timer parameter doesn't apply to Markdown files HOT 3
- spread substitutions
- support layers HOT 4
- substitutions syntax highlight err
- Support syntax highlighting in markdown documents. HOT 2
- Allow for setting Layout, Theme and Sketch options per document HOT 4
- Opt-in footnotes in svg and connection tooltips HOT 1
- Remove `import` as a keyword HOT 1
- Horizontal scrolling issue in Preview mode HOT 2
- rendered href links to local .md files do not work HOT 2
- Detection of d2 on WSL HOT 6
- Couple of non-fatal warnings when trying to add this language to GitHub Linguist HOT 7
- Dark theme option for preview theme
- Create a plugin for Jetbrains HOT 1
- import syntax
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from d2-vscode.