Embed > HTML is used to create HTML markup for embedding in an HTML page (or a service such as Blogger). The HTML markup requires a remote script to be loaded to render the graph in the page. Embedded HTML supports pages, links, collapse/expand, layers, zoom, mathematical typesetting, a built-in lightbox and displays as vector (suited for retina displays).

Options

  • Include a copy of my diagram: By default a copy of the diagram is included
  • Public URL of the diagram: If available, the public URL will be used to load the diagram
  • Link: How to open links (automatic means relative links and anchors open in the same window)
  • Border Color: Color for highlighting the border of shapes with links
  • Zoom: If the viewer should have a toolbar with zoom and initial zoom for the diagram (default is 100%)
  • Link: Highlights shapes with links in the given color (default is #0000ff)
  • Fit: Diagram will adjust to the available width of the page or container
  • Layers: Whether it should be possible to show/hide individual layers (viewer and lightbox)

  • Lightbox: Click opens the diagram in a new tab or using the built-in lightbox
  • Show Edit Button: If a "Open in new window" button is shown in the lightbox

If layers or zoom is enabled, a toolbar will be added with the respective controls. If zoom is enabled, the container size will change as the user zooms in/out. The configuration and data are stored in a JSON object in the data-mxgraph attribute. The following switches are available for the viewer:

  • xml/url=data: Specifies the XML or URL for the diagram. URL has precedence over XML

  • toolbar=[pages|zoom|layers|lightbox|custom]: Possible items for the toolbar (eg. toolbar=layers lightbox). Custom entries are required to have a matching key in toolbarButtons.
  • toolbar-buttons={...}: Toolbar button definitions of the form {key:{title: string, image: base64-encoded, handler: function[, enabled: false]}, key...}
  • toolbar-nohide=true: Keeps the toolbar in the DOM (for developers).
  • max-height=value: Maximum initial height of the diagram.
  • auto-fit=false: Disables automatic zoom (if zoom buttons are not visible).
  • check-visible-state=false: Disables delayed rendering.

  • lightbox=[false|open]: Disables or forces lightbox in new window
  • layers=[index0 index1 ...]: Space-separated list of visible layers (eg. layers=0 1)
  • tooltips=false: Disables tooltips
  • toolbar-position=[top|inline|bottom]: Position of the toolbar (default is top)
  • zoom=value: Initialzoom (default is 1)
  • editable=false: Disables editing from lightbox (default is 1)
  • allow-zoom-in=true: Forces auto-fit and specifies if zoom > 1 is allowed.

  • border=value: Padding for graph (default is 8)

  • page=value: Initial page (default is 0).
  • nav=false: Disables collpase/expand
  • resize=[true|false]: Forces or disables resizing the container after changes
  • target=[self|blank]: Opens links in same/new window (default opens relative links and anchors in same window)
  • move=true: Collapse/expand moves siblings
  • title=value: Optional title for the toolbar (or tooltip if no toolbar is visible)
  • edit=url|_blank: Optional link for "Open in new window" function in lightbox (where _blank opens a copy of the diagram)

By default, links to anchors, relative links or links to the same domain open in the same window (even if the embedded diagram is inside an iframe). All other links open in a new window unless target=self is specified.

The lightbox can be closed by pressing Escape, clicking on the dark background, the close icon in the top right corner or the close symbol in the toolbar.

If the CSS border of the container is transparent (default) or non-null, the container border will change during mouseover. If enabled, the toolbar will be shown and a margin will be added for the toolbar.

The responsive switch is implemented using max-width:100%.

Requirements

Embedded HTML requires JavaScript support. Supported browsers are Microsoft Internet Explorer 6 and later, Microsoft Edge, Safari, Chrome, Firefox, Android, iOS, Microsoft and Chromebook touch devices.