Model Xtractor - Online Class Diagram Editor
Model Xtractor - Online Class Diagram Editor User Account   
    RSS Posts | Model Xtractor
  • Diagrams
  • Metadata
  • Blog
  • Support
  • Pricing
  • Tutorial

Publish Diagrams to Your Own Site

Leave a Comment » Apr 12, 2010
Bookmark and Share
Categories: Tutorial

Diagrams created and published on Model-Xtractor.com are all shared and can be re-published on external sites and blogs, by anyone, using one of our plugins. You’ll instantly get either a small shadowed thumbnail, or a large thumbnail with buttons similar to those of a published diagram page, except a click on the image will bring you not to the viewer, but to the original diagram page.

Published Diagrams

For any diagram, you can publish a large thumbnail of adjustable width 300..700 pixels on your own blog. Here is such a 500 pixels wide image (click on it, to go to the original published diagram page from this blog):

Click for the published entry of the diagram
EditViewPrint

Or you can publish a small shadowed thumbnail 200 pixels wide:

Model Xtractor Diagram

Authors can delete own diagrams and this could leave your blog entries in an uncertain state. Our plugins determine when no images exist for the given diagram, or if there is no diagram for an id, and show the following image:

Diagram Not Found!

Script Plugin

On Blogger/Blogspot (see an example here) or other blogs/sites that allow inline HTML scripts, copy and paste the JavaScript code below:

<script type="text/javascript">xtractor_id=3;xtractor_size=500;</script>
<script type="text/javascript" src="http://model-xtractor.com/web/plugins/Plugin.js">
</script><noscript>Please Enable JavaScript!</noscript>

xtractor_id must get the diagram id. xtractor_size can be 0 if you want the image to automatically scale to its container. A custom size may take a value between 300 and 700 pixels, with the image always centered within its parent block element. Best resolution is for 700 pixels wide (like all our large thumbnails from the published diagram pages), otherwise the image will shrink and look less crispy. Alternatively, a size of 200 will show the small shadowed thumbnail instead, with no Edit, View or Print buttons below.

The script plugin shows no diagram if JavaScript was disabled in user’s browser.

Wordpress Plugin

Wordpress blogs (see an example here) should use a Wordpress plugin that you can download here. Add its model-xtractor folder to the plugins directory, activate the Model-Xtractor plugin and you’re done (no further configuration required). Use this in your posts (but leave no spaces inside!):

[ model-xtractor]3,500[/model-xtractor ]

First parameter is the diagram id, the second is the image size, whose value (by default 0, optional) can be customized to 200, or between 300 and 700, as it has been described before.

The Wordpress Plugin does not use HTML scripts, so diagrams are displayed even when JavaScript is disabled in user’s browser.

Leave a Comment

Accepts [code lang=".."] .. [/code], where lang is one of: csharp/vbnet/java/js/c/cpp/xml/sql/as3/php/ruby

E d i t   D i a g r a m s   O n l i n e !
Advertisement
Last Recommended Diagrams
  • Tutorial: Platforms and Products
  • Ajax Control Toolkit: Extenders
  • Accordion Control, from AJAX Control Toolkit
  • Tab Control of AJAX Control Toolkit
  • NHibernate Product Dependencies
  • NHibernate Component Dependencies
  • Iesi.Collections Assembly - Object Models
  • Spring.Core Classes implementing ICriteria
  • Spring.Collections Namespace
  • Common.Logging.Simple Namespace Object Model
Last Recommended Diagram
Thumbnail
Tutorial: Platforms and Products
© 2010 Model-Xtractor.com - All Rights Reserved.
  • Terms of Use
  • Privacy Policy
  • News
  • About Us
  • Contact Us