Public
Edited
Feb 19
_d2Module = import("https://esm.sh/@terrastruct/d2")
_d2 = new _d2Module.D2()
async function renderD2(input, options = { layout: "dagre", sketch: false }) {
const result = await _d2.compile(input, options);
return await _d2.render(result.diagram);
}
function d2(string, ...expressions) {
const input = [string, ...expressions.map((i) => i.toString())].join("");
return renderD2(input);
}
html`${await d2`
direction: down
explanation: |md
# What the heck is this?
[D2](https://d2lang.com) is a modern language that turns text to diagrams.
While the project is implemented in Go, it can be executed directly in a browser.
All thanks to [WASM bindings](https://www.npmjs.com/package/@terrastruct/d2?activeTab=readme).
Feel free to visit the [D2 Playground](https://play.d2lang.com/?script=qlDQtVOo5AIEAAD__w%3D%3D&) for more goodness.
|
D2 Parser: {
shape: class
+reader: io.RuneReader
# Default visibility is + so no need to specify.
readerPos: d2ast.Position
# Private field.
-lookahead: "[]rune"
# Escape the # to prevent being parsed as comment
# lookaheadPos: d2ast.Position
# Or just wrap in quotes
"#peekn(n int)": (s string, eof bool)
+peek(): (r rune, eof bool)
rewind()
commit()
}
explanation -- D2 Parser
`}`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
