Typedoc: Generating class diagrams

Created on 13 Jan 2016  Â·  22Comments  Â·  Source: TypeStrong/typedoc

Currently, class hierarchy is shown as plain text, It would be nice if there was an option available to include SVG class diagram inside a class' documentation.

In addition, having the possibility to generate a full class diagram over a project (that would be displayed inside the home page or in a specific section) would be another nice addition.

enhancement plugin idea

Most helpful comment

I just wanted to update this thread. Both the typedoc-plantuml and typedoc-plantuml-extended packages form NPM are working with the latest 0.15.0 typedoc.

typedoc-plantuml: This is the original package created by Meir Gottlieb which enables you to insert UML diagrams into your comments using the <uml> tag and the PlantUML-Syntax inside of it.

typedoc-plantuml-extended: Someone uploaded the extensions of typedoc-plantuml developed by @0815fox to NPM and called it this way. It automatically creates class diagrams for your classes without having to insert any tags in your comments.

Just so that you know, because it wasn't clear to me: You need to install JAVA and Graphviz in order to use any of the two, because PlantUML relies on them. You don't have to install PlantUML by yourself as the required .jar file is included in the packages above.

All 22 comments

YES, please! Will be super helpful!

I do agree with you to some extent.
However having this kind of feature as an option would allow all sorts of
small architectures to be rendered in a clear way inside the documentation
page.

Moreover, ther could be an option to generate one diagram per namespace /
module in order to ensure readability for larger code bases.

On Thu, Jan 14, 2016 at 7:28 AM, Jeongho Nam [email protected]
wrote:

First, I'm sorry to opposite some opinion. Of course, what I want to say
is a subjective perspective, too.

I've used Doxygen for many years and of course, have used GraphViz to
generate class diagrams automatically. However, quality of [full] class
diagram automatically generated is not good. It's very hard to read and
lines expressing relationship and connection are very complicate to
comprehend.

Even the automatically generated full class diagram expanded to a project
level, the diagram's readability can't be guaranteed. So I want to insist,
if make a class diagram generator, it would be better to express class
diagram with only with hierarchy and inheritance relationship.

In my case, I draw class and collaboration diagram for each module or
package by my hand. At next, insert the diagrams to API document as image
files and the auto-generated API document with auto-generated inheritance
(not full, only prints object name) diagram.

http://samchonorg.wix.com/framework#!architecture-designs/c1lio
http://samchon.github.io/framework/api/cpp/annotated.html

Although I opposite to generate full class diagram, I do not opposite to
generate a simple diagram. I am challenging to a open-source contest as a
subject of UML. If I can be helpful, I want to try the function.

—
Reply to this email directly or view it on GitHub
https://github.com/sebastian-lenz/typedoc/issues/175#issuecomment-171548092
.

Cordialement.

M: [email protected]

:+1:

++

You might want to look at #68 which talks about class diagrams.

Last weekend I forked @meirgottlieb s typedoc-plantuml module and added automatical generation of uml class diagrams:

https://github.com/0815fox/typedoc-plantuml

screenshot

@0815fox Wow, it seems amazing.
I had been drawing diagrams and inserted to API documents by my hand like such below:

I appreciate for your help.

image

Credits to the uml tag features go to @meirgottlieb.

@0815fox Michael, how do I get to generate class diagrams automatically?

@nadhir-falta I wrote it just short time before / while they modified the interface of typedoc. I do not have time to adopt to their new interface. It stopped working with 0.5.0 of typedoc, I think.

@0815fox First of all, thank you for your work with typedoc-plantuml. I would really like to use it, as there seems to be no other solution for auto-generating documentation for a TypeScript project. Would it be difficult to adopt typedoc-plantuml to the latest typedoc?

Probably it is not too difficult, but I will not spend any time on this, as I don't have the time for it.

I switched and am using compodoc to do my docs for typescript. Angular team
uses it I believe.

On Thu, Nov 2, 2017 at 5:48 AM krisztianb notifications@github.com wrote:

@0815fox https://github.com/0815fox First of all, thank you for your
work with typedoc-plantuml. I would really like to use it, as there seems
to be no other solution for auto-generating documentation for a TypeScript
project. Would it be difficult to adopt typedoc-plantuml to the latest
typedoc?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/TypeStrong/typedoc/issues/175#issuecomment-341369187,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAKuek57vCwI0UItKsTxigsIW7h9BwxVks5syY_ygaJpZM4HD3-0
.

@Chowarmaan Thanks for the information. Can you create UML class diagramms using compodoc? I can't find such a feature. It looks like that it can only generate a kind of module dependency graph.

That is all it is doing now. Maybe add a feature request as it is s
actively developed.

On Nov 2, 2017 8:52 AM, "krisztianb" notifications@github.com wrote:

@Chowarmaan https://github.com/chowarmaan Thanks for the information.
Can you create UML class diagramms using compodoc? I can't find such a
feature. It looks like that it can only generate a kind of module
dependency graph.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/TypeStrong/typedoc/issues/175#issuecomment-341411419,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAKueqo9QnVFH0r0TAqZR6xuLk_pM8cBks5sybsFgaJpZM4HD3-0
.

I've just checked their Issues page and saw that there are already several requests for this (one using the plantuml approach). So I guess we have to wait.

@Chowarmaan is compodoc also good for non-angular typescript projects?

I use it with Angular/Ionic and it works well. I do not see why it would not work as it does take your tsconfig.json as a parameter, so it knows where the source is. I have not tried it on other projects outside of Angular though myself.

Ok, I'll give it a go one of these days. Thanks for the quick response! :)

On Tue, Feb 13, 2018 at 4:33 PM, Steven Scott notifications@github.com
wrote:

I use it with Angular/Ionic and it works well. I do not see why it would
not work as it does take your tsconfig.json as a parameter, so it knows
where the source is. I have not tried it on other projects outside of
Angular though myself.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/TypeStrong/typedoc/issues/175#issuecomment-365302404,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ATpP44Ljw4vkM3UAsap7wM223FWj-s0sks5tUastgaJpZM4HD3-0
.

Someone created a plugin for creating mermaid diagrams in doccomments using an @mermaid annotation.

/**
 * Hoge is sample class for example of `typedoc-plugin-mermaid`.
 *
 * @mermaid Make TypeDoc easy to use with mermaid.js
 * graph TB
 *   mermaid.js --> TypeDoc;
 */
export class Hoge {
}

typedoc generated documentation with diagram matching the above code snippet

@aciccarello Mermaid does not support class diagrams, does it?

I just wanted to update this thread. Both the typedoc-plantuml and typedoc-plantuml-extended packages form NPM are working with the latest 0.15.0 typedoc.

typedoc-plantuml: This is the original package created by Meir Gottlieb which enables you to insert UML diagrams into your comments using the <uml> tag and the PlantUML-Syntax inside of it.

typedoc-plantuml-extended: Someone uploaded the extensions of typedoc-plantuml developed by @0815fox to NPM and called it this way. It automatically creates class diagrams for your classes without having to insert any tags in your comments.

Just so that you know, because it wasn't clear to me: You need to install JAVA and Graphviz in order to use any of the two, because PlantUML relies on them. You don't have to install PlantUML by yourself as the required .jar file is included in the packages above.

Was this page helpful?
0 / 5 - 0 ratings