typedoc-config-uml.ts settings

[yboujraf]

Dear @krisztianb

Happy to see I can generate class-diagram now ;-)

This is my status after installing the plugin.

Typedoc-umclass-plugin : settings

Would you like to verify if my settings are the optimal to generate the uml class diagram ?

module.exports = {
    inputFiles: ['./src/'],
    mode: 'file',
    includeDeclarations: true,
    tsconfig: 'tsconfig.json',
    out: './docs/dist/docs-class-diagram/',
    excludePrivate: false,
    excludeProtected: false,
    excludeExternals: true,
    readme: './README.md',
    name: 'Demo Library project',
    ignoreCompilerErrors: true,
    plugin: 'typedoc-umlclass',
    listInvalidSymbolLinks: true,
    entryPoint: 'index',
    categorizeByGroup: true,
    media: './medias',
    version: '',
    gitRemote: 'remote',
    gitRevision: 'revision',
    theme: 'default',
    umlClassDiagramType: 'detailed',
    umlClassDiagramLocation: 'local',
    umlClassDiagramFormat: 'png',
    umlClassDiagramSectionTitle: 'Class-Diagram',
    umlClassDiagramPosition: 'above',
    umlClassDiagramHideEmptyMembers: 'false',
    umlClassDiagramTopDownLayoutMaxSiblings: 6,
    umlClassDiagramMemberVisibilityStyle: 'icon',
    umlClassDiagramHideCircledChar: 'false',
    umlClassDiagramHideShadow: 'false',
    // umlClassDiagramBoxBackgroundColor: 'transparent',
    // umlClassDiagramBoxBorderColor : 'transparent',
    umlClassDiagramBoxBorderRadius: 2,
    // umlClassDiagramBoxBorderWidth : 6,
    // umlClassDiagramArrowColor: 3,
    umlClassDiagramClassFontName: 'Courier',
    umlClassDiagramClassFontStyle: 'bold',
    umlClassDiagramClassAttributeFontStyle: 'italic'
};

Would you like to share the minimum required to optimize the rendering and get all the information.

Best Regards,
Youssef

[krisztianb]

Thanks for your feedback.

Your settings look fine to me. Although you specify some options with their default value. So those could be removed.

So to break down the problems:

• SVG image is not displayed on the page
• Large diagram is cut off
• Wrong return value of methods

May I ask you to create a separate issue for each of these so we can look into them in a more organized manner? I think replying to all of these in one thread is going to be a messy thing. 🙄

May I ask you to includ the legend into the picture ?

What legend do you mean?

Could you generate into a seperate file the uml code compatible plantuml.

Yes, I didn't forget about that. It's on my feature TODO list. You might create a separate issue for this one if you like.

[krisztianb]

Thanks for taking the time and creating separate issue. I'll close this one.

[yboujraf]

Dear @krisztianb

This is my typedoc-umlclass settings

module.exports = {
    inputFiles: ['./src/'],
    mode: 'file',
    //mode: 'modules',
    includeDeclarations: true,
    tsconfig: 'tsconfig.json',
    out: './docs/dist/docs-class-diagram/',
    excludePrivate: false,
    excludeProtected: false,
    excludeExternals: true,
    readme: './README.md',
    name: 'Probel SW-P-8 protocol Library project',
    ignoreCompilerErrors: true,
    plugin: 'typedoc-umlclass',
    listInvalidSymbolLinks: true,
    entryPoint: 'index',
    categorizeByGroup: true,
    media: './docs/dist/docs-class-diagram/assets',
    version: '',
    gitRemote: 'remote',
    gitRevision: 'revision',
    theme: 'default',

    // Basic Settings
    umlClassDiagramType: 'detailed',
    umlClassDiagramLocation: 'embed',
    //umlClassDiagramFormat: 'png',
    umlClassDiagramFormat: 'svg',

    // HTML output
    umlClassDiagramSectionTitle: 'Class-Diagram',
    umlClassDiagramPosition: 'above',

    // Class diagram formating
    umlClassDiagramMethodParameterOutput: 'complete',
    umlClassDiagramHideEmptyMembers: 'false',
    // umlClassDiagramTopDownLayoutMaxSiblings: 6,
    umlClassDiagramMemberVisibilityStyle: 'icon',
    umlClassDiagramHideCircledChar: 'false',
    umlClassDiagramHideShadow: 'false',
    //umlClassDiagramBoxBackgroundColor: transparent | #RGBHEX ,
    //umlClassDiagramBoxBorderColor: transparent | #RGBHEX ,
    umlClassDiagramBoxBorderRadius: 2,
    //umlClassDiagramBoxBorderWidth: 1,
    //umlClassDiagramArrowColor: #RGBHEX ,
    umlClassDiagramClassFontName: 'Courier',
    //umlClassDiagramClassFontSize: integer ,
    umlClassDiagramClassFontStyle: 'bold',
    //umlClassDiagramClassFontColor: transparent|#RGBHEX ,
    //umlClassDiagramClassAttributeFontName: font-name ,
    umlClassDiagramClassAttributeFontStyle: 'italic',
    //umlClassDiagramClassAttributeFontColor: transparent|#RGBHEX,

    // Other settings
    umlClassDiagramHideProgressBar: true,
    umlClassDiagramCreatePlantUmlFiles: true,
    umlClassDiagramVerboseOutput: false
};

I am sure we could optimize for the color but enought at this stage.

Best regards,
Youssef

[krisztianb]

There are some options that you set with the default value. So you could remove those:

• umlClassDiagramVerboseOutput
• umlClassDiagramBoxBorderRadius (I think 2 is the default value - not sure)
• umlClassDiagramHideShadow
• umlClassDiagramHideCircledChar
• umlClassDiagramMemberVisibilityStyle
• umlClassDiagramMethodParameterOutput
• umlClassDiagramPosition
• umlClassDiagramType

The default value is listed in the README.

And of course you could also remove the ones that are commented out. If you need it, you can always find it in your version control tool (GIT).