terrastruct · alixander · Aug 17, 2025 · Aug 17, 2025 · Aug 17, 2025 · Aug 17, 2025
diff --git a/src/css/button.css b/src/css/button.css
@@ -19,6 +19,7 @@
 }
 
 .btn-primary {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -104,3 +105,42 @@
 .btn-primary > .btn-icon {
   filter: var(--btn-primary-icon-filter);
 }
+
+.btn-primary:hover > .compile-tooltip {
+  visibility: visible;
+}
+
+.btn-primary:hover > .compile-arrow {
+  visibility: visible;
+}
+
+.compile-tooltip {
+  position: absolute;
+  top: -41px;
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  background: var(--steel-900);
+  border-radius: 2px;
+  padding: 6px 8px 6px 8px;
+  visibility: hidden;
+}
+
+.compile-tooltip > span {
+  color: var(--steel-000);
+  font-size: 12px;
+  text-align: center;
+}
+
+.compile-arrow {
+  visibility: hidden;
+  position: absolute;
+  top: -35px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid var(--steel-900);
+}
diff --git a/src/css/main.css b/src/css/main.css
@@ -67,8 +67,6 @@
   --clipboard_icon_filter_light: var(--media-prefers-light) none;
   --btn_primary_fg_light: var(--media-prefers-light) var(--blue-600);
   --btn_primary_icon_filter_light: var(--media-prefers-light) none;
-  --sketch_mobile_bg_light: var(--media-prefers-light) var(--blue-050);
-  --sketch_mobile_fg_filter_light: var(--media-prefers-light) var(--blue-600-filter);
   --clickable_icon_filter_light: var(--media-prefers-light) none;
   --modal_close_icon_filter_light: var(--media-prefers-light) none;
   --theme_scheme: var(--media-prefers-light) light;
@@ -119,12 +117,6 @@
     invert(67%) sepia(12%) saturate(1615%) hue-rotate(198deg) brightness(103%)
       contrast(101%)
   );
-  --sketch-mobile-bg: var(--sketch_mobile_bg_light, initial);
-  --sketch-mobile-fg-filter: var(
-    --sketch_mobile_fg_filter_light,
-    invert(67%) sepia(15%) saturate(1391%) hue-rotate(198deg) brightness(103%)
-      contrast(96%)
-  );
   --clickable-icon-filter: var(
     --clickable_icon_filter_light,
     invert(71%) sepia(13%) saturate(274%) hue-rotate(191deg) brightness(89%) contrast(87%)

diff --git a/src/css/responsive.css b/src/css/responsive.css
@@ -23,22 +23,6 @@
   #sketch {
     display: none;
   }
-  #sketch-mobile {
-    display: flex !important;
-    flex-direction: column;
-    align-items: center;
-    padding: 0.4rem;
-    border-radius: 4px;
-  }
-  #sketch-mobile-icon {
-    margin-top: 2px;
-  }
-  .sketch-mobile-activated {
-    background: var(--sketch-mobile-bg);
-    #sketch-mobile-icon {
-      filter: var(--sketch-mobile-fg-filter);
-    }
-  }
   #download-cli {
     display: none;
   }

diff --git a/src/css/workstation.css b/src/css/workstation.css
@@ -140,11 +140,6 @@
   color: var(--steel-800);
 }
 
-#sketch-mobile-icon {
-  filter: invert(46%) sepia(11%) saturate(523%) hue-rotate(192deg) brightness(94%)
-    contrast(88%);
-}
-
 #key {
   width: 20px;
 }

diff --git a/src/index.html b/src/index.html
@@ -201,8 +201,12 @@
                   </div>
                 </div>
                 <button id="compile-btn" class="btn btn-primary btn-disabled">
+                  <div class="compile-tooltip">
+                    <span class="compile-tooltip-text">Cmd+S</span>
+                  </div>
                   <img src="assets/icons/play.svg" class="btn-icon" />
                   Compile
+                  <div class="compile-arrow"></div>
                 </button>
               </div>
             </div>
@@ -230,34 +234,16 @@
                   </div>
                 </div>
 
-                <div id="sketch">
-                  Sketch
-                  <div class="toggle">
-                    <input
-                      type="checkbox"
-                      class="toggle-checkbox"
-                      name="sketch-checkbox"
-                      id="sketch-checkbox"
-                    />
-                    <label class="toggle-label" for="sketch-checkbox">
-                      <span class="toggle-inner" />
-                      <span class="toggle-switch">
-                        <img
-                          id="sketch-toggle-icon"
-                          class="toggle-icon"
-                          src="assets/icons/toggle_x.svg"
-                        />
-                      </span>
-                    </label>
+                <div class="btn-menu-container">
+                  <button id="renderer-btn" class="btn btn-labeled">
+                    <div class="btn-label">Renderer</div>
+                    <div id="current-renderer" class="btn-value">SVG</div>
+                    <img src="assets/icons/down-grey.svg" class="btn-labeled-icon" />
+                  </button>
+                  <div id="renderer-menu" class="btn-menu" style="display: none">
+                    <!-- populated by JS -->
                   </div>
                 </div>
-                <div id="sketch-mobile" style="display: none">
-                  <img
-                    id="sketch-mobile-icon"
-                    src="assets/icons/sketch.svg"
-                    class="btn-icon"
-                  />
-                </div>
               </div>
               <div id="render-toolbar-right" class="workstation-toolbar-right">
                 <div id="export" class="btn-menu-container">

diff --git a/src/js/modules/editor.js b/src/js/modules/editor.js
@@ -8,6 +8,7 @@ import WebTheme from "./web_theme.js";
 import Theme from "./theme.js";
 import Layout from "./layout.js";
 import Sketch from "./sketch.js";
+import Export from "./export.js";
 import Zoom from "./zoom.js";
 import Alert from "./alert.js";
 
@@ -166,6 +167,11 @@ function initTextArea() {
 
 async function attachListeners() {
   document.getElementById("compile-btn").addEventListener("click", compile);
+
+  // Set up tooltip text based on OS
+  const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+  const shortcutText = isMac ? "Cmd+S" : "Ctrl+S";
+  document.querySelector(".compile-tooltip-text").textContent = shortcutText;
 }
 
 function displayCompileErrors(errs) {
@@ -278,6 +284,7 @@ async function compile() {
   QueryParams.set("script", encoded);
 
   const sketch = Sketch.getValue() === "1" ? true : false;
+  const ascii = Sketch.getASCII();
   const layout = Layout.getLayout();
   let svg;
 
@@ -294,13 +301,17 @@ async function compile() {
     }
     let response;
     try {
-      response = await fetch(
-        `https://api.d2lang.com/render/svg?script=${encoded}&layout=${layout}&theme=${Theme.getThemeID()}&sketch=${Sketch.getValue()}`,
-        {
-          headers,
-          method: "GET",
-        }
-      );
+      let apiUrl = `https://api.d2lang.com/render/svg?script=${encoded}&layout=${layout}&theme=${Theme.getThemeID()}`;
+      if (ascii) {
+        apiUrl += `&ascii=1`;
+      }
+      if (sketch) {
+        apiUrl += `&sketch=1`;
+      }
+      response = await fetch(apiUrl, {
+        headers,
+        method: "GET",
+      });
     } catch (e) {
       // 4-500s do not throw
       Alert.show(
@@ -340,7 +351,8 @@ async function compile() {
       fs: { index: script },
       options: {
         layout,
-        sketch,
+        sketch: ascii ? false : sketch,
+        ascii,
         forceAppendix: false,
         target: "",
         animateInterval: 0,
@@ -377,7 +389,8 @@ async function compile() {
     }
     const renderOptions = {
       layout: layout,
-      sketch,
+      sketch: ascii ? false : sketch,
+      ascii,
       themeID: Theme.getThemeID(),
       center: true,
     };
@@ -399,17 +412,23 @@ async function compile() {
   const containerHeight = renderEl.getBoundingClientRect().height;
 
   diagramSVG = svg;
-  renderEl.innerHTML = svg;
 
-  // skip over the xml version tag
-  const svgEl = renderEl.lastChild;
+  if (ascii) {
+    renderEl.innerHTML = `<pre style="font-family: monospace; white-space: pre; overflow: auto; width: 100%; height: 100%; user-select: text; cursor: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text;">${svg}</pre>`;
+  } else {
+    renderEl.innerHTML = svg;
+
+    // skip over the xml version tag
+    const svgEl = renderEl.lastChild;
 
-  svgEl.id = "diagram";
-  Zoom.attach();
+    svgEl.id = "diagram";
+    Zoom.attach();
 
-  svgEl.setAttribute("width", `${containerWidth}px`);
-  svgEl.setAttribute("height", `${containerHeight}px`);
+    svgEl.setAttribute("width", `${containerWidth}px`);
+    svgEl.setAttribute("height", `${containerHeight}px`);
+  }
   unlockCompileBtn();
+  Export.updateExportButton();
 }
 
 function parseRange(rs) {

diff --git a/src/js/modules/export.js b/src/js/modules/export.js
@@ -1,9 +1,10 @@
 import Alert from "./alert.js";
 import Editor from "./editor.js";
+import Sketch from "./sketch.js";
 import Mobile from "../lib/mobile.js";
 
 function init() {
-  document.getElementById("export-btn").addEventListener("click", toggleMenu);
+  document.getElementById("export-btn").addEventListener("click", handleExportClick);
   document.getElementById("export-menu").addEventListener("mouseleave", hideMenu);
   document.getElementById("export-menu-png").addEventListener("click", exportPNG);
   document.getElementById("export-menu-svg").addEventListener("click", exportSVG);
@@ -22,6 +23,30 @@ function init() {
   }
 }
 
+function handleExportClick() {
+  if (Sketch.getASCII()) {
+    copyASCII();
+  } else {
+    toggleMenu();
+  }
+}
+
+function updateExportButton() {
+  const exportBtn = document.getElementById("export-btn");
+  const exportMenu = document.getElementById("export-menu");
+
+  if (!exportBtn || !exportMenu) {
+    return;
+  }
+
+  if (Sketch.getASCII()) {
+    exportBtn.textContent = "Copy";
+    exportMenu.style.display = "none";
+  } else {
+    exportBtn.innerHTML = 'Export<img src="assets/icons/down.svg" class="btn-icon" />';
+  }
+}
+
 function toggleMenu() {
   const menu = document.getElementById("export-menu");
   if (menu.style.display == "none") {
@@ -201,6 +226,22 @@ async function exportPNGClipboard() {
   }, "image/png");
 }
 
+async function copyASCII() {
+  const ascii = Editor.getDiagramSVG();
+  if (ascii == "") {
+    Alert.show(`Compile a diagram to copy`, 4000);
+    return;
+  }
+
+  try {
+    await navigator.clipboard.writeText(ascii);
+    Alert.show(`Copied to clipboard`, 2000, "success");
+  } catch (e) {
+    Alert.show(`Failed to copy to clipboard: ${e}`, 4000);
+  }
+}
+
 export default {
   init,
+  updateExportButton,
 };