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


First, let's start by a working example:


The installation is quite simple:
  1. Download CKeditor package (for example, CKEditor 3.6.5).
  2. Unzip it somewhere and move ckeditor directory to a dedicated place, for example in htdocs/ckeditor/.
  3. Download file
  4. Unzip this file to htdocs/ckeditor/plugins directory
  5. Check that in htdocs/ckeditor/plugins/plantuml directory, you have the following files: htdocs/ckeditor/plugins/plantumlimages/
  6. Add the following code into your HTML pages, in the <head> section:
    <!-- ckeditor -->
    	<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    <!-- /ckeditor -->
  7. Add the following code into your HTML pages, somewhere in the <body> section:
    <textarea cols="80" id="editor_kama" name="editor_kama" rows="20" >
    <script type="text/javascript">
    	CKEDITOR.replace( 'editor_kama',
    extraPlugins : 'plantuml',
    toolbar :
    	['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink'],
  8. Load your HTML file in your browser & enjoy.