CKeditor

You can use a plugin for CKeditor to add UML into your editor.

Demo

First, let's start by a working example:

You can click on "UML" button in the toolbar to add a new diagram. You can also select an image, and click on this same button to edit the diagram, or use the contextual menu on the image. <img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.plantuml.com/plantuml/img/SyfFKj2rKt3CoKnE1G00" alt="Bob -> Alice" /> Very easy to used and to integrate.

Installation

The installation is quite simple:

Download CKeditor package (for example, CKEditor 3.6.5).
Unzip it somewhere and move ckeditor directory to a dedicated place, for example in htdocs/ckeditor/.
Download plantumlPluginForCKEditor.zip file
Unzip this file to htdocs/ckeditor/plugins directory
Check that in htdocs/ckeditor/plugins/plantuml directory, you have the following files: htdocs/ckeditor/plugins/plantumlimages/
plugin.js

Add the following code into your HTML pages, in the <head> section:

<!-- ckeditor -->
	<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<!-- /ckeditor -->

Add the following code into your HTML pages, somewhere in the <body> section:

<textarea cols="80" id="editor_kama" name="editor_kama" rows="20" >
</textarea>
<script type="text/javascript">
//<![CDATA[
	CKEDITOR.replace( 'editor_kama',
		{
extraPlugins : 'plantuml',
toolbar :
[
	['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink'],
	['About','-','Plantuml']
]
		});
//]]>
</script>

Load your HTML file in your browser & enjoy.