@@ -18,6 +18,7 @@ export const FORMAT = `Diagram elements (leave out width/height and boxes grow t
 - Image: {"id","type":"image","href":"data:image/png;base64,…","width","height","fit"?:"cover"|"contain"} a picture inside the diagram (a card, a screenshot, a logo).
 - z: higher draws on top (default 0).
 Diagram-level "legend": {"title"?, "items":[{"tone","text"}]} (or {"tone": "text"}) is drawn below everything; set it with edit_diagram's legend field.
+Diagram-level "headerLogos": [{"href","aspect"?:width/height,"background"?:badge color}] are drawn in the export header, opposite the title.
 Colors come from the active style: use "tone" (any name the style defines, like "shared" or "private"); strokeColor / backgroundColor pin a color in every style, so avoid them.
 Cylinders ("type":"cylinder") are for data at rest; boxes for what processes it. Groups without a label only arrange their children (no frame).
 Arrows: "route":"curved" (or the style's arrowRoute) flows side to side with ends spread out; "around":"above"|"below" arcs over what's between; "quiet":true only shows while a scene uses it.
 
@@ -1098,6 +1098,16 @@ export function exportFrame(doc, S, resolved, { caption = false } = {}) {
     let ty = y + H.padding, inner = '';
     if (title) inner += `<text class="g-header-title" x="${tx}" y="${ty + H.titleSize * 0.62}" font-size="${H.titleSize}" font-weight="700" fill="${color}" text-anchor="${a}" dominant-baseline="central" font-family="${font}">${esc(title)}</text>`, (ty += H.titleSize * 1.25);
     if (subtitle) inner += `<text class="g-header-subtitle" x="${tx}" y="${ty + H.subtitleSize * 0.8}" font-size="${H.subtitleSize}" fill="${color}" fill-opacity="0.75" text-anchor="${a}" dominant-baseline="central" font-family="${font}">${esc(subtitle)}</text>`;
+    // Logos sit at the far end from the title, as tall as the text block, each on its own optional badge.
+    const size = headH - H.padding * 2, p = size * 0.14, cy = y + headH / 2;
+    let lx = a === 'end' ? x + H.padding : x + w - H.padding;
+    for (const l of a === 'end' ? doc.headerLogos || [] : [...(doc.headerLogos || [])].reverse()) {
+      const lw = size * (l.aspect || 1), bp = l.background ? p : 0;
+      const ix = a === 'end' ? lx + bp : lx - bp - lw;
+      if (l.background) inner += `<rect class="g-header-logo-badge" x="${ix - p}" y="${cy - size / 2 - p}" width="${lw + 2 * p}" height="${size + 2 * p}" rx="${size * 0.22}" fill="${esc(l.background)}"/>`;
+      inner += `<image class="g-header-logo" href="${esc(l.href)}" x="${ix}" y="${cy - size / 2}" width="${lw}" height="${size}" preserveAspectRatio="xMidYMid meet"/>`;
+      lx += (a === 'end' ? 1 : -1) * (lw + 2 * bp + size * 0.3);
+    }
     bands += band(y, headH, H, inner);
   }
   if (footH) {