Open Plawn opened 1 year ago
i prefer d2 can use variables
#variable
$str = "https://icons.terrastruct.com/";
test{
icon: $str . "essentials%2F226-alarm%20clock.svg"; #= https://icons.terrastruct.com/essentials%2F226-alarm%20clock.svg
}
#variable
$c_str = "style.font-color: red; style.stroke: red; style.fill: mistyrose;";
test{
$c_str;
test2
}
Yeah variables seem like a better more generic approach to solving this problem.
yeah exactly, that's how it will work.
$icon-host: https://icons.terrastruct.com
x: {
icon: ${icon-host}/essentials%2F226-alarm%20clock.svg
}
>d2 foobar.d2 # run at 2023/7/7 23:30
x->y
output-time:"${today} ${time}"
{ # japan: [ yyyy/mm/dd(aaa) hh:mm ] 2023/07/07(金) 23:30
near: bottom-right
shape:text
}
It would be cleaner if the icon provider had more "indirections features" such as shortcut or path transformations in order to make it easier to use frequently used icons
closed by 0.6.0?
@Plawn vars
goes a long way here, but i think your comment deserves further consideration. it's still unideal that you'd like to write ugly URLs like ${icon-host}/essentials%2F226-alarm%20clock.svg
.
maybe we should just alias more human-friendly urls for each icon.
Or maybe an official set should be included in D2 such that LSPs can find them. Icons are core to good diagrams, and I don't think even with vars that we've reached an ideal solution yet
that's why i proposed the
@other/essential-alarm-clock
syntax
i'm happy with vars.
vars:"d2 v0.6.0" {
d2-config: {theme-id: 0; dark-theme-id: 0; pad: 0; center: false; sketch: false; layout-engine: dagre}
#-------------------------------------------------------------
# images
# https://www.irasutoya.com/ (famous japanese free image site)
#-------------------------------------------------------------
twitter:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxvrqXBEb4N9O11rxy6fdpSdnAio1cYG0GvgjmrDeHUVyc-U2SnolR4kUseN5CPhP9vfnxKDim3PjnzlNwWlcfRMRzOItu_kl05cnBIEb_S3D5hwJkhQoKa9tgnUHEYpI3-Y0WO4jWGpiitYso-OtWROLRGwiWw01-_wVqJ6wolygvTQN_i9xj7un7njJB/s992/bluebird_fired_text.png"
#-------------------------------------------------------------
}
direction:right
t->x{style.stroke-width: 8; style.stroke: red;}
t:""{
shape:image
icon:"${twitter}"
}
x:"𝕏"{
shape:text
style.font-size: 100;
}
I solved it by generating a d2 with icon classes, variables is also nice Idea, I will maybe change base url to variable. I generated it using simple python script and jinja2 templates. I'm creating repo for my org. but someone may create official or unofficial repo similar to https://github.com/plantuml/plantuml-stdlib/tree/master
classes: {
API Connections: {
icon: https://icons.terrastruct.com/azure%2FWeb%20Service%20Color%2FAPI%20Connections.svg
shape: image
label: "API Connections"
}
API Management Services: {
icon: https://icons.terrastruct.com/azure%2FIntegration%20Service%20Color%2FAPI%20Management%20Services.svg
shape: image
label: "API Management Services"
}
Access Review: {
icon: https://icons.terrastruct.com/azure%2FIdentity%20Service%20Color%2FAccess%20Review.svg
shape: image
label: "Access Review"
}
}
classes: {...@../classes/other/terrastruct/azure.d2.classes}
direction: right
Tranformation.class: Databricks
Orchestration.class: Data Pipeline
it would be great if we could import / include classes / styles and variables from public repo similar to plantuml what is already requested #1397 Plant UML example !define AzurePuml https://raw.githubusercontent.com/plantuml-stdlib/Azure-PlantUML/release/2-2/dist !includeurl AzurePuml/AzureCommon.puml
Add a syntax to use an icon provider in order to use a shortcun when using an url for a given icon